Ok so I developed the following code to use Google Maps with Marker Clusterer.
I used the example on the website and slightly modified it for my json data.
My issue here is, I am not getting any errors but its not working either.
What am I doing wrong here?
Thanks
<head>
<style type="text/css">
body {
margin: 0;
padding: 10px 20px 20px;
font-family: Arial;
font-size: 16px;
}
#map-container {
padding: 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #ccc #999 #ccc;
-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
width: 600px;
}
#map {
width: 600px;
height: 400px;
}
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/" +
"svn/trunk/markerclusterer/src/markerclusterer.js">
</script>
<script type="text/javascript">
var data = {
"users": [
{ "latitude":"48.4048403957642",
"longitude":"2.68452644348145" },
{ "latitude":"48.4050236871384",
"longitude":"2.68512690051361"},
{ "latitude":"48.4048403957642",
"longitude":"2.68452644348145"},
{ "latitude":"48.7570941168018",
"longitude":"2.16670989990234"},
{ "latitude":"48.404922961092",
"longitude":"2.70020564018949"},
{ "latitude":"48.8739279353421",
"longitude":"2.32875823974609"},
{ "latitude":"48.4048403957642",
"longitude":"2.68452644348145"},
{ "latitude":"41.0349860434783",
"longitude":"28.9774059609177"}
]
};
function initialize() {
var center =
new google.maps.LatLng(48.404840395764175,
2.6845264434814453);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
for (var i = 0; i < data.length; i++) {
var location = data.users[i];
var latLng =
new google.maps.LatLng(location.latitude,
location.longitude);
var marker = new google.maps.Marker({ position: latLng });
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-container"><div id="map"></div></div>
The markers aren’t being added because
for (var i = 0; i < data.length; i++) {should be
for (var i = 0; i < data.users.length; i++) {