CODEWITHSUNDEEP
javascriptmaps
Matthew Colley
Matthew Colley

Reputation: 11436

Javascript Google Maps API3 Polygon Multiple Circles

I am using Mysql and PHP to generate XML which is consumed by a Google Map. I am setting markers and polygon circles. The markers set with no problems, however only one polygon circle is displayed, not the other nine (a total of ten is returned from the database) I am quite certain this is an array issue, however I just cant seem to put my finger on why only one polygon is created. Hopeful someone can get me pointed in the right direction, here is my code:

   //function to consume xml
   var xml = parseXml(data); 
   var polygonNodes = xml.documentElement.getElementsByTagName("polygon"); 
   for (var i = 0; i < polygonNodes.length; i++) {
   var polylatlng = new google.maps.LatLng( 
          parseFloat(polygonNodes[i].getAttribute("polygon_lat")), 
          parseFloat(polygonNodes[i].getAttribute("polygon_lng"))); 
   }
   createCircle(polylatlng);

  //here i am creating the polygon circle
  function createCircle(polylatlng) { 
  var html = "<div id='infodiv'>HelloWorld</div>"; 
    var circle = new google.maps.Circle({
        map: map,
        center: polylatlng,
        fillColor: '#7491D3',
        fillOpacity: 0.03,
        strokeColor: '#7491D3',
        strokeOpacity: 0.1,
        strokeWeight: 1,
        radius: 18362.55489862987
        }); 
  google.maps.event.addListener(circle, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, circle); 
  }); 
}

Upvotes: 1

Views: 925

Answers (1)

nrabinowitz
nrabinowitz

Reputation: 55688

Unless I'm reading this wrong, you're not including the createCircle function in your loop, so it only gets called once. Try:

for (var i = 0; i < polygonNodes.length; i++) {
    var polylatlng = new google.maps.LatLng( 
          parseFloat(polygonNodes[i].getAttribute("polygon_lat")), 
          parseFloat(polygonNodes[i].getAttribute("polygon_lng"))
    ); 
    createCircle(polylatlng);
}

Good code indentation is helpful for issues like this :).

Upvotes: 1

Related Questions