<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>GOOGLE MAPS API</title>
<link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="where.js"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(37.39361,-122.099263)
var mapOptions = {
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
i = 0;
var markers = [];
for ( pos in myData ) {
i = i + 1;
var row = myData[pos];
window.console && console.log(row);
var newLatlng = new google.maps.LatLng(row[0], row[1]);
var marker = new google.maps.Marker({
position: newLatlng,
map: map,
title: row[2]
});
markers.push(marker);
var options = {
imagePath: 'http://rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m'
}
}
var markerCluster = new MarkerClusterer(map, markers, options);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="height: 500px"></div>
<p><b>About this Map</b></p>
<p>
This is a cool script by
<a href="https://github.com/Mysterious-Owl">Mysterious-Owl</a> with the use of API.<br>
To see the details of a marker, hover over the marker.
</p>
</body>
</html>