mirror of
https://github.com/metafy-social/python-scripts.git
synced 2024-11-24 04:21:12 +00:00
49 lines
1.7 KiB
HTML
49 lines
1.7 KiB
HTML
|
<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>
|