title: How place multiple markers on google map api with php/xml?
body: <p>I have multiple stores that i need to place on google map but with the code below it only shows one similar marker on each store. when i try to move script to foreach loop it is not working at all. and also i need to center marker when button is clicked on that store.</p>
  
  <pre><code>   &lt;?php foreach ($list as $record): ?&gt;
       &lt;?php if (strcmp($record-&gt;district, $current_district) == 0): ?&gt;
        &lt;?php $x = explode(',', $record-&gt;coord); ?&gt;
           &lt;tr&gt;
             &lt;td&gt; &lt;?php echo $record-&gt;address; ?&gt; &lt;/td&gt;
             &lt;td&gt; &lt;?php echo $record-&gt;work_range; ?&gt; &lt;/td&gt;
             &lt;td&gt;&lt;button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mapid"&gt;Show on map&lt;/button&gt;
             &lt;?php $coords = explode(',', $record-&gt;coord);?&gt;
             &lt;/td&gt;
          &lt;/tr&gt;
  
       &lt;?php endif; ?&gt;
      &lt;?php endforeach; ?&gt;
  
  
  &lt;script type="text/javascript"&gt;
      jQuery(function($) {
          var script = document.createElement('script');
          script.src = "//maps.googleapis.com/maps/api/js?key=AIzaSyCOGCQoaHaVrdY9z2Tg3hfowUtEeb-BwQs&amp;callback=initialize";
          document.body.appendChild(script);
      });
  
      function initialize() {
          var map;
          var bounds = new google.maps.LatLngBounds();
          var mapOptions = {
              mapTypeId: 'roadmap'
          };
  
          map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
          map.setTilt(45);
  
          var markers = [
              ['&lt;?php echo $record-&gt;address;?&gt;', &lt;?php echo $coords[0];?&gt;, &lt;?php echo $coords[1];?&gt;]
          ];
  
          var infoWindowContent = [
              ['&lt;div class="info_content"&gt;' +
              '&lt;h3&gt;&lt;?php echo $record-&gt;address;?&gt;&lt;/h3&gt;' +
              '&lt;p&gt;.&lt;/p&gt;' +        '&lt;/div&gt;']
          ];
  
          var infoWindow = new google.maps.InfoWindow(), marker, i;
  
          for( i = 0; i &lt; markers.length; i++ ) {
              var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
              bounds.extend(position);
              marker = new google.maps.Marker({
                  position: position,
                  map: map,
                  title: markers[i][0]
              });
  
              google.maps.event.addListener(marker, 'click', (function(marker, i) {
                  return function() {
                      infoWindow.setContent(infoWindowContent[i][0]);
                      infoWindow.open(map, marker);
                  }
              })(marker, i));
              map.fitBounds(bounds);
          }
          var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
              this.setZoom(1);
              google.maps.event.removeListener(boundsListener);
          });
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>I also tried to loop through markers array</p>
  
  <pre><code>var markers = [
              &lt;?php foreach ($list as $record):?&gt;
              &lt;?php $coord = explode(',', $record-&gt;coord);?&gt;
              ['&lt;?php if(!empty($coord[0])){echo $record-&gt;address;}else{echo "None";}?&gt;', &lt;?php if(!empty($coord[0])){echo $coord[0];}else{echo "48.7795";}?&gt;, &lt;?php if(!empty($coord[1])){echo $coord[1];}else{echo "47.8138";}?&gt;]
              &lt;?php endforeach;?&gt;
          ];
  </code></pre>
  
  <p>but it has such error </p>
  
  <blockquote>
    <p>Cannot read property '47.4592' of undefined</p>
  </blockquote>