var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: navigator.geolocation.getCurrentPosition(showPosition, showError),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
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));
}
var Locations = [{% block content %}{% for e in object_list %}['{{ e.name}}', {{ e.latitude}}, {{ e.longitude}}, 4],
{% endfor %}]{% endblock %};
would mean that I could grab my locations and other attributes from my database. The output looks the same: var Locations = [['Everyone Active Hartham Leisure Centre', 51.800052, -0.077467, 4],
['Gordons Gym', 51.480226, 0.069589, 4],
['The Concorde Club', 51.48808, -0.40301, 4],
['Croydon High Sports Club', 51.341246, -0.061708, 4],
['Everyone Active Northolt Leisure Centre', 51.548934, -0.375026, 4],
['Everyone Active Central Park Leisure Centre', 51.602689, 0.228719, 4],
['Heston Community Sports Hall', 51.480955, -0.365949, 4],
['Everyone Active Westminster Lodge Leisure Centre', 51.750365, -0.34032, 4],
['Everyone Active Hornchurch Sports Centre', 51.563842, 0.207556, 4],
...
...
...
['The Landmark Spa and Health Club', 51.521554, -0.161116, 4],
['Brands Hatch Place Hotel and Spa', 51.361902, 0.269406, 4],
];
NB I didn't know what the final variable was for, so I just put "4" there but insight into what that should be would also be helpful. I also notice a trailing comma but can't work out how to remove that, and hence can't see if that is the problem. for (i = 1; i < locations.length; i++) {
// ...
}
for (i = 0; i < locations.length; i++) {
var x = i; // don't actually use this code, just use "i" below, but you can't put an "i" in square brackets in a comment on EE :-)
if (locations[x] != null) { // in case trailing comma is not ignored
// ...
}
}
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script>
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: navigator.geolocation.getCurrentPosition(showPosition, showError),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
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));
}
</script>
</head>
<style>
#map {
height: 400px;
width: 700px;
}
</style>
<body>
<div>
<h2>HTML5 Show Location on GoogleMap Sample</h2>
<div id="map"></div>
</div>
</body>
</html>
document.getElementById('map')
So you have 2 options: either wrap your code in a function and run it on window.onload, or move the whole script block to the end of the document (just before </body>).center: new google.maps.LatLng(locations[0][1], locations[0][2]),
Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.
Have a better answer? Share it in a comment.
From novice to tech pro — start learning today.
Open in new window
If the geolocation doesn't work, it takes the first location in the array as center.