I am trying to replace my data with the ones provided by this sample code, but my code does not work. I just added an array called results and tried to pass its lat and lan values to the map but for some reasons it does not work.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MarkerClusterer v3 Simple Example</title>
<style >
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="https://maps.googleapis.com/maps/api/js"></script>
<script>
var script = '<script type="text/javascript" src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer';
if (document.location.search.indexOf('compiled') !== -1) {
script += '_compiled';
}
script += '.js"><' + '/script>';
document.write(script);
</script>
<script>
function initialize() {
var results = [
[
'Alexs loc', '37.9908372',
'23.7383394', '0',
'id-90'], [
'John Jamess loc', '37.9908372',
'23.7383394', '1',
'id-89'], [
'Normans loc', '38.075352',
'23.807885', '3',
'id-12'], [
'Jack Moores loc', '37.9908372',
'23.7383394', '2',
'id-67'], ];
var center = new google.maps.LatLng(37.9908372, 23.7383394);
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 < results.length; i++) {
var placeLoc = new google.maps.LatLng(results[i][1], results[i][2]);
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>
<p>
<a href="?compiled">Compiled</a> |
<a href="?">Standard</a> version of the script.
</p>
<div id="map-container"><div id="map"></div></div>
</body>
</html>
Not checked but I see the code where you are creating marker in loop. Here position should refer to placeLoc and not latLng