Thursday, March 3, 2011

Yahoo maps api, version 3.8 doesn't display custom image?

I used the following code to display custom marker on Yahoo Maps :

<Script type=text/javascript>
  var map=new YMap(document.getElementById('map'));                                                                  // Create a map object
  Get_Lat_Lon()                                                                                                      // 
  var myPoint=new YGeoPoint(Lat,Lon);                                                                                // Create a lat/lon object
  map.addPanControl();                                                                                               // Add a pan control
  map.drawZoomAndCenter(myPoint,16);                                                                                 // Display the map centered on a latitude and longitude
  map.setMapType(YAHOO_MAP_REG);                                                                                     // Set map type to either of: YAHOO_MAP_SAT YAHOO_MAP_HYB YAHOO_MAP_REG
  var myMapTypes = map.getMapTypes();                                                                                // Get valid map types, returns array [YAHOO_MAP_REG, YAHOO_MAP_SAT, YAHOO_MAP_HYB]
  var myImage = new YImage();                                                                                        // Create Custom Marker_Image
  myImage.src = 'C:/Dir_Data/Center_Image.png';                                                                                                  // Specify image url
  myImage.size = new YSize(10,10);                                                                                   // Set image size
  var marker = new YMarker(myPoint,myImage);                                                                                                       // Create a marker positioned at a lat/lon
  marker.addLabel("<Font Size=1>Here</Font>");                                                                                                    // Add a label to the marker
  var Location_Image = new YImage();                                                                                 // Create Custom Marker_Image
  Location_Image.src = 'C:/Dir_Data/Sample_Image.png';                                                               // Specify image url
  Location_Image.size = new YSize(6,6);                                                                              // Set image size
  var marker_0 = new YMarker(new YGeoPoint(12.4567890,-12.456789),Location_Image);                                   // Create a marker positioned at a lat/lon
  marker_0.addLabel("<Font Size=1>AAA</Font>");                                                                      // Add a label to the marker
  marker_0.addAutoExpand("<Html><Center>[ A-Id :  ]<Br>AAA</Center></Html>");                                        // Add a mouse over label to the marker
  var markup_0 = "Lat = 12.4567890<Br>Lon = -12.456789";                                                               // Add a markup label to the marker
  YEvent.Capture(marker_0,EventsList.MouseClick,function(){ marker_0.openSmartWindow(markup_0); });                  //
  map.addOverlay(marker_0);                                                                                          // Display the marker
  var Location_Image = new YImage();                                                                                 // Create Custom Marker_Image
  Location_Image.src = 'C:/Dir_Data/Sample_Image.png';                                                               // Specify image url
  Location_Image.size = new YSize(6,6);                                                                              // Set image size
  var marker_1 = new YMarker(new YGeoPoint(-8.253114,33.808793),Location_Image);                                   // Create a marker positioned at a lat/lon
  marker_1.addLabel("<Font Size=1>BBB</Font>");                                                                      // Add a label to the marker
  marker_1.addAutoExpand("<Html><Center>[ B-Id :  ]<Br>BBB</Center></Html>");                                        // Add a mouse over label to the marker
  var markup_1 = "Lat = -8.253114<Br>Lon = 33.808793";                                                               // Add a markup label to the marker
  YEvent.Capture(marker_1,EventsList.MouseClick,function(){ marker_1.openSmartWindow(markup_1); });                  //
  map.addOverlay(marker_1);                                                                                          // Display the marker
  var Location_Image = new YImage();                                                                                 // Create Custom Marker_Image
  Location_Image.src = 'C:/Dir_Data/Sample_Image.png';                                                               // Specify image url
  Location_Image.size = new YSize(5,5);                                                                              // Set image size
  var marker_2 = new YMarker(new YGeoPoint(70,80),Location_Image);                                   // Create a marker positioned at a lat/lon
  marker_2.addLabel("<Font Size=1>CCC</Font>");                                                                      // Add a label to the marker
  marker_2.addAutoExpand("<Html><Center>[ C-Id :  ]<Br>CCC</Center></Html>");                                        // Add a mouse over label to the marker
  var markup_2 = "Lat = 70<Br>Lon = 80";                                                               // Add a markup label to the marker
  YEvent.Capture(marker_2,EventsList.MouseClick,function(){ marker_2.openSmartWindow(markup_2); });                  //
  map.addOverlay(marker_2);                                                                                          // Display the marker
  var Location_Image = new YImage();                                                                                 // Create Custom Marker_Image
  Location_Image.src = 'C:/Dir_Data/Sample_Image.png';                                                               // Specify image url
  Location_Image.size = new YSize(3,3);                                                                              
......
</Script>

It used to work fine with :

<Script Type=text/javascript Src=http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=

and I can see my custom image (a color dot) on the map. Now with :

<Script Type=text/javascript Src=http://api.maps.yahoo.com/ajaxymap?v=3.8&appid=

my custom image is not showing up, it seems there is a difference with version 3.0 and version 3.8, what can I do to fix it ?

Frank

From stackoverflow
  • If you add marker.addAutoExpand("Add a Label to a Marker for this Effect"); before marker.addLabel("Y"); It will work. BTW I use v3.8

0 comments:

Post a Comment