I am trying to show markers on google map. And it is working fine if I use static array for marker's lat and long.
But when I try to make dynamic using php array, then it is not working.
Here is the code.
$(document).ready(function(){
var var_locations = <?=json_encode($locations)?>;
/****** Array which need to make Dynamic *********/
var locations=[
['Location <br>Name', 13.0104292, 77.64844689999995, 1],
['Location <br>Name', 28.6699553, 77.10752720000005, 1],
];
function initialize() {
console.log(locations);
var mapOptions = {
center: new google.maps.LatLng(20.5937, 78.9629),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById("map"),mapOptions);
var i;
for (i = 0; i < locations.length; i++) {
var infoWindow = new google.maps.InfoWindow({
content: locations[i][0],
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
title:locations[i][0]
});
google.maps.event.addListener(marker, 'click', (function(mm, tt) {
return function() {
infoWindow.setContent(tt);
infoWindow.open(map, mm);
}
})(marker, locations[i][0]));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
});
I want following array in above code to be dynamic
var locations=[
['Location <br>Name', 13.0104292, 77.64844689999995, 1],
['Location <br>Name', 28.6699553, 77.10752720000005, 1],
];
For that I am using following code to make it dynamic
var var_locations = <?=json_encode($locations)?>;
var locations=[
var_locations.forEach(function(item) {
[item.clinicName, item.latitude, item.longitude],
});
];
But it is not working. To test whether loop is working, I tried to print in console value (item.latitude) in loop, And values are being printed, Means loop is working fine.
But if I use loop inside js array then it is not working. Nor giving error through which I can identify some problem.
How I can make that array dynamic?
Update
[
{
"clinicName": "Dummy clinic",
"doctorName": "Any name",
"phoneNumber": 234242342,
"address": "test address, city",
"latitude": "13.0104292",
"email": "[email protected]",
"longitude": "77.64844689999995"
},
{
"clinicName": "Dummy clinic",
"doctorName": "Any name",
"phoneNumber": 234242342,
"address": "test address, city",
"latitude": "13.0104292",
"email": "[email protected]",
"longitude": "77.64844689999995"
},
]
This is json array, I am getting from api. And I converted that array in php array to make it use on my page.
My Answer:
$locations = array(
array('name' => 'Location 1', 'lat' => 37.774929, 'lng' => -122.419416),
array('name' => 'Location 2', 'lat' => 34.052235, 'lng' => -118.243683),
array('name' => 'Location 3', 'lat' => 40.712776, 'lng' => -74.005974)
);
echo "var var_locations = [";
foreach($locations as $location){
echo "{lat: " . $location['lat'] . ", lng: " . $location['lng'] . "},";
}
echo "];";
?>
});
This code will dynamically create a JavaScript array of locations using PHP. You can then use this array to show markers on a Google Map.
Rate this post
5 of 5 based on 4179 votesComments