CODEWITHSUNDEEP
xmlgoogle-maps
nautilia
nautilia

Reputation: 75

Add an image to an XML file and parse it on Google Maps API v3

I'm trying to add a category "image" to an XML file with markers that are rendered on a Google Map with a sidebar. The XML has this structure

marker lat="0" lng="0" html="text" label="sidebar label" image="image.jpg"

What I want is to add to the sidebar label, next to the each text entry, an image, whose source is defined by the field 'image' on the XML.

Also, we want this image to appear on the map bubble. Below is the code we have. I'm not an expert and all my tests have failed.

I'll be grateful for any suggestion or advice on this. Thank you!

<script type="text/javascript"> 
//<![CDATA[
  var side_bar_html = ""; 
  var gmarkers = []; 
  var map = null;

function createMarker(latlng, name, html) {
var contentString = html;
var marker = new google.maps.Marker({
    icon: 'monumento.png',
    position: latlng,
    map: map,
    zIndex: Math.round(latlng.lat()*-100000)<<5
    });

google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString); 
    infowindow.open(map,marker);
    });

gmarkers.push(marker);
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';

 }

function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}

function initialize() {
var myOptions = {
zoom: 17,
center: new google.maps.LatLng(25.777557,-80.15065),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
    });

  downloadUrl("casas_famosos.xml", function(doc) {
    var xmlDoc = xmlParse(doc);
    var markers = xmlDoc.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      // obtain the attribues of each marker    
      var lat = parseFloat(markers[i].getAttribute("lat"));
      var lng = parseFloat(markers[i].getAttribute("lng"));
      var point = new google.maps.LatLng(lat,lng);
      var html = markers[i].getAttribute("html");
      var label = markers[i].getAttribute("label");       
      var marker = createMarker(point,label,html);
    }
    document.getElementById("side_bar").innerHTML = side_bar_html;
  });
 }
var infowindow = new google.maps.InfoWindow(
{ 
size: new google.maps.Size(150,50)

});
 //]]>
</script>

Upvotes: 2

Views: 2281

Answers (1)

Trott
Trott

Reputation: 70153

You can get the image from the XML when you get all the other XML attributes, then add it to the html that appears in the infowindow, like this:

function createMarker(latlng, name, html, image) {
    var contentString = image + html;
    var marker = new google.maps.Marker({
        icon: 'monumento.png',
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat()*-100000)<<5
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
    });

    gmarkers.push(marker);
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + image + name + '<\/a><br>';
}

...

downloadUrl("casas_famosos.xml", function(doc) {
    var xmlDoc = xmlParse(doc);
    var markers = xmlDoc.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
        // obtain the attribues of each marker    
        var lat = parseFloat(markers[i].getAttribute("lat"));
        var lng = parseFloat(markers[i].getAttribute("lng"));
        var point = new google.maps.LatLng(lat,lng);
        var html = markers[i].getAttribute("html");
        var label = markers[i].getAttribute("label");
        var image = '<img src="'+markers[i].getAttribute("image")+'" alt=""/>';      
        var marker = createMarker(point,label,html,image);
    }

Note that I'm assuming that the images are in the same directory as the HTML. If not, you'll have to adjust the generated img tag appropriately.

Upvotes: 2

Related Questions