I have been battling with this for ages. using JQuery I have been able to display a single location. But when it comes to Multiple Locations, I just can’t seem to get things to work.
I have found a ton of Open Source some amazing presentation, and others just straight up and down. Please can someone look at the below. This is exactly as per what was given for PHP.
I copied this into a “Blank” Application, but just can make it work.
/////////////////// Open Source Code ///////////////
<!DOCTYPE html>
<html>
<head>
<script
src=“http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false”>
</script>
<script>
// Set location to centre on
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
// Set other locations in array first title for marker, second coords
var locations = [
[‘marker title1’, -13.530825,-71.957565],
[‘marker title2’, -13.531211,-71.961921],
[‘marker title3’, -13.531336,-71.960387],
[‘marker title4’, -13.533099,-71.960151],
[‘marker title5’, -13.533985,-71.960751],
[‘marker title6’, -13.535289,-71.962929],
[‘marker title7’, -13.516617,-71.978872],
[‘marker title8’, -13.515626,-71.975873],
[‘marker title9’, -13.531847,-71.984493],
[‘marker title10’, -13.50123,-72.031091],
[‘marker title11’, -13.163152,-72.54581]
];
function initialize()
{
//apply location marker to centre on
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById(“googleMap”),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
title: ‘My centre location marker’
});
marker.setMap(map);
// apply other location markers
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,
title: locations[i][0]
});
}
}
google.maps.event.addDomListener(window, ‘load’, initialize);
</script>
</head>
<body>
<div id=“googleMap” style=“width:500px;height:380px;”></div>
</body>
</html>