1

I am using a google map API on my website. The map gets the data from the xml and then shows the markers on the respective locations using the longitude and latitude. However, I have more than 500 entries in the xml but the map does not show all of them. Can anybody please help me out. I need markers for the whole xml on the map. The map is displayed on "http://saleon.com.pk/" and the xml file that the map is using is "http://saleon.com.pk/test/generate.php". For the google maps, my code is this:

    <script type="text/javascript">
  var infowindow;
  var map;
  function initialize(str,category,city,minprice,maxprice,flag) {

var myLatlng = new google.maps.LatLng(30.55538, 73.13690);
    var myOptions = {
      zoom: 5,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    downloadUrl("<?php echo WEB_PATH;?>test/generate.php", function(data){
      var markers = data.documentElement.getElementsByTagName("marker");
      for (var i = 0; i < markers.length; i++) {
        var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
        var marker = createMarker(markers[i].getAttribute("name1"),markers[i].getAttribute("name2"), markers[i].getAttribute("img"), markers[i].getAttribute("description"), markers[i].getAttribute("id"), latlng);
       }
     });

    function createMarker(name1,name2, img, description, id, latlng) {
    var marker = new google.maps.Marker({position: latlng, map: map});
    google.maps.event.addListener(marker, "click", function() {
      if (infowindow) infowindow.close();
      infowindow = new google.maps.InfoWindow({content: '<div style="float:left;"><img src="<?php echo WEB_PATH;?>'+img+'" width="75px" height="75px" /></div><div style="float:left; margin-left:10px; font:Arial;"><div style="font-weight:bold;">'+name1+'<br/>'+name2+'</div><div style="width:200px;">'+description+'</div><div><a href="<?php echo WEB_PATH;?>index.php?page=item&id='+id+'">View Product</a></div></div>'});
      infowindow.open(map, marker);
    });
    return marker;
}
</script>

1 Answers1

1

you have defined same latitude and longitude for so many markers in your xml file. E.g lat="33.718151" lng="73.060547" appears in 52 entries. Your markers are being overwritten as they are at same location.For situations where there are multiple markers at a same location you could offset the markers just a little, (say by .001 degree), in a radius from the actual point. This should also produce a nice visual effect.

B Kalra
  • 821
  • 6
  • 17
  • Thanks for giving me the solution. It actually worked out to be exactly what you said. The markers were showing but they were over eachother so only the marker on the top was showing. Can you give me an idea on how to should I offset the markers so that the markers do not go out from the area they are meant to be and at the same time do not get so much crowded that they could not be shown on the map. I tried to offset them by 0.001 but a point comes when they go out of the actual place. Because some locations have more that 100 markers or so. What should I do? Thanks once again. – Muneeb Shahid Mar 15 '13 at 13:46
  • Ok.Then you can try the method of showing multiple infos in the infobox.Check this post http://stackoverflow.com/questions/3548920/google-maps-api-v3-multiple-markers-on-exact-same-spot and answer by Ignatius will solve your trouble! – B Kalra Mar 18 '13 at 08:43