googlemaps-v3-utility-library
Version:
Google Maps API V3 Utility Library
109 lines (89 loc) • 3.26 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API Example - Random Weather Map</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
document.write('<script type="text/javascript" src="../src/markermanager' + (document.location.search.indexOf('packed') > -1 ? '_packed' : '') + '.js"><' + '/script>');
</script>
<script type="text/javascript">
//<![CDATA[
var IMAGES = [ 'sun', 'rain', 'snow', 'storm' ];
var ICONS = [];
var map = null;
var mgr = null;
function setupMap() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(48.25, 11.00),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
setupWeatherMarkers();
}
function getWeatherIcon() {
var i = Math.floor(IMAGES.length*Math.random());
if (!ICONS[i]) {
var iconImage = new google.maps.MarkerImage('images/' + IMAGES[i] + '.png',
new google.maps.Size(32, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32)
);
var iconShadow = new google.maps.MarkerImage('images/' + IMAGES[i] + '.png',
new google.maps.Size(32, 59),
new google.maps.Point(0,0),
new google.maps.Point(0, 32)
);
var iconShape = {
coord: [1, 1, 1, 32, 32, 32, 32, 1],
type: 'poly'
};
ICONS[i] = {
icon : iconImage,
shadow: iconShadow,
shape : iconShape
};
}
return ICONS[i];
}
function getRandomPoint() {
var lat = 48.25 + (Math.random() - 0.5) * 14.5;
var lng = 11.00 + (Math.random() - 0.5) * 36.0;
return new google.maps.LatLng(Math.round(lat * 10) / 10, Math.round(lng * 10) / 10);
}
function getWeatherMarkers(n) {
var batch = [];
for (var i = 0; i < n; ++i) {
var tmpIcon = getWeatherIcon();
batch.push(new google.maps.Marker({
position: getRandomPoint(),
shadow: tmpIcon.shadow,
icon: tmpIcon.icon,
shape: tmpIcon.shape,
title: 'Weather marker'
})
);
}
return batch;
}
function setupWeatherMarkers() {
mgr = new MarkerManager(map);
google.maps.event.addListener(mgr, 'loaded', function(){
mgr.addMarkers(getWeatherMarkers(20), 3);
mgr.addMarkers(getWeatherMarkers(200), 6);
mgr.addMarkers(getWeatherMarkers(1000), 8);
mgr.refresh();
});
}
//]]>
</script>
</head>
<body onload="setupMap()">
<div id="map" style="margin: 5px auto; width: 650px; height: 400px"></div>
<div style="text-align: center; font-size: large;">
Random Weather Map
</div>
</body>
</html>