CODEWITHSUNDEEP
javascriptphpgoogle-mapsgoogle-maps-api-3
DS9
DS9

Reputation: 3033

multiple marker in google map

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.

Upvotes: 3

Views: 7213

Answers (2)

Tudor Ravoiu
Tudor Ravoiu

Reputation: 2150

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"
}
]

Upvotes: 1

DS9
DS9

Reputation: 3033

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));
}

Upvotes: 1

Related Questions