multiple marker in google map

Question

i have a problem with placing multiple marker in google map.here is my code.it display only one marker during page reloading and when page is complettly load then map is not display.
javascript code:

<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize(lat,lon)
{
  var myCenter=new google.maps.LatLng(lat,lon);
  var mapProp = {
  center:myCenter,
  zoom:9,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

 var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

 var marker=new google.maps.Marker({
  position:myCenter,
 });
marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
 </script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

php code:

<?php
require_once 'geocode.php';

$addarray=array(0=>'a, ahmedabad,india',1=>'b,ahmedabad,india');
foreach($addarray as $add)
{
// define the address and set sensor to false
$opt = array (
    'address' => urlencode($add),
    'sensor'  => 'false'
);

// now simply call the function
$result = getLatLng($opt);

// if status was successful, then print the lat/lon ?
if ($result['status']) {

   echo '<pre>';
?>
 <script>
initialize(<?php echo $result['lat'];?>,<?php echo $result['lon'];?>);
 </script>  

<?php
   echo '</pre>';
}
}
?>

here first i got lat and lon according to address then i called javascript function to place marker.but something is missing or create a problem.
thanks in advance.

possible duplicate of [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) — geocodezip, Oct 09 '13 at 12:59
and my quetion is diff. from your suggested quetion.beacause there is a array of location in javascript. and i pass location one by one using foreach loop with php.so the problem may be similar in this two quetion but method is different. so i think it is not duplicate. — DS9, Oct 09 '13 at 13:15
Your question wasn't clear enough. What about [this one (Google maps with multiple markers from a php array)](http://stackoverflow.com/questions/8169494/google-maps-with-multiple-markers-from-a-php-array)? Did you do any research? — geocodezip, Oct 09 '13 at 14:03

score 1 · Answer 1 · edited Sep 23 '14 at 14:52

You have to set the array as a global var. Also notice that markers_array is an object that contain all the markers latitudes and longitudes and also other data if you want to initialize an infowindow also.

var markers;
var map;

var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);



for(i=0;i<markers_array.length;i++){
    addMarker(markers_array[i].lat,markers_array[i].long);
}


function addMarker(lat,lng) {
    var myLatlng = new google.maps.LatLng(lat,lng);

    var marker = new google.maps.Marker({
        map: map,
        position: myLatlng,
        name: zip
    });
    markers.push(marker);
 }

LATER EDIT:

Here is an example of the marker array in json format:

[
{
"name":"Marker 1 Italy",
"lat":"46.027482",
"long":"11.114502"
},
{
"name":"Marker 2 France",
"lat":"48.019324",
"long":"3.555908"
},
{
"name":"Marker 3 Spain",
"lat":"40.329796",
"long":"-4.595948"
}
]

I've amended the answer to show an example of `markers_array`. I made up the lats and lngs so use your own. — Andy, Oct 09 '13 at 14:20

score 1 · Accepted Answer · answered Oct 10 '13 at 09:05

Thanks @Tudor Ravoiu for your help. it is solved by changing few things.
i have created array in json format in php and pass it to javascript.

<?php
require_once 'geocode.php';

$addarray=array(0=>'a,ahmedabad,india',1=>'b,ahmedabad,india',2=>'c,ahmedabad,india');
$lat1=array();
foreach($addarray as $add)
{
// define the address and set sensor to false
$opt = array (
    'address' => urlencode($add),
    'sensor'  => 'false'
);

// now simply call the function
$result = getLatLng($opt);

// if status was successful, then print the lat/lon ?
if ($result['status'])
{ 
   array_push($lat1,array($result['address'],$result['lat'],$result['lon']));
}
}echo json_encode($lat1);
?>

javascript code:

<script type="text/javascript">
var locations = <?php echo json_encode($lat1);?>;
var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: new google.maps.LatLng(23.0171240, 72.5330533),
  mapTypeId: google.maps.MapTypeId.TERRAIN
});

var infowindow = new google.maps.InfoWindow();

var marker, i;
for (i = 0; i < locations.length; i++) 
{ 
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
   });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

multiple marker in google map

2 Answers2