I have multiple LAT/LONG in an array in PHP, but a code available to display lat/long is to display single lat/long, I tried to iterate the array in for loop, but it didn't work shown Below:
<html>
<head>
<style type="text/css">
div#map {
position: relative;
}
div#crosshair {
position: absolute;
top: 192px;
height: 19px;
width: 19px;
left: 50%;
margin-left: -8px;
display: block;
background: url(crosshair.gif);
background-position: center center;
background-repeat: no-repeat;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var geocoder;
var centerChangedLast;
var reverseGeocodedLast;
var currentReverseGeocodeResponse;
function initialize() {
<?php for($i=0;$i<count($data);$i++){?>
var latlng = new google.maps.LatLng(<?php echo $data[$i]['lat'].','.$data[$i]['long']; ?>);
var myOptions = {
zoom: 40,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
geocoder = new google.maps.Geocoder();
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "<?php echo $data[$i]['deviceID'];?>"
});
<?php }?>
}
</script>
</head>
<body onLoad="initialize()">
<div id="map" style="width:200px; height:200px">
<div id="map_canvas" style="width:100%; height:200px"></div>
<div id="crosshair"></div>
</div>
</body>
</html>
I suspect there must be some parameter multiple in javasctipt code to make this work, but not sure about... Could some one help on this.
You are creating new map in every iteration. Place map definition and geocoder definition outside foreach:
function initialize() {
var myOptions = {
zoom: 40,
center: latlng, // set some default latlng here, e.g $data[0]['lat'], $data[0]['lng']
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
geocoder = new google.maps.Geocoder();
<?php for($i=0;$i<count($data);$i++){?>
var latlng = new google.maps.LatLng(<?php echo $data[$i]['lat'].','.$data[$i]['long']; ?>);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "<?php echo $data[$i]['deviceID'];?>"
});
<?php }?>
}