googlemaps-v3-utility-library
Version:
Google Maps API V3 Utility Library
163 lines (140 loc) • 6.81 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 - Google North America Offices</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script src="google_northamerica_offices.js" type="text/javascript">
</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 src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools.js">
</script>
<script type="text/javascript">
//<![CDATA[
var map;
var mgr;
var icons = {};
var allmarkers = [];
function load() {
var myOptions = {
zoom: 3,
center: new google.maps.LatLng(50.62504, -100.10742),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map'), myOptions);
mgr = new MarkerManager(map);
google.maps.event.addListener(mgr, 'loaded', function(){
setupOfficeMarkers();
google.maps.event.addListener(map, 'zoom_changed', function() {
updateStatus(mgr.getMarkerCount(map.getZoom()));
});
});
}
function getIcon(images) {
var icon = false;
if (images) {
if (icons[images[0]]) {
icon = icons[images[0]];
} else {
var iconImage = new google.maps.MarkerImage('images/' + images[0] + '.png',
new google.maps.Size(iconData[images[0]].width, iconData[images[0]].height),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var iconShadow = new google.maps.MarkerImage('images/' + images[1] + '.png',
new google.maps.Size(iconData[images[1]].width, iconData[images[1]].height),
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[images[0]] = {
icon : iconImage,
shadow: iconShadow,
shape : iconShape
};
}
}
return icon;
}
function setupOfficeMarkers() {
allmarkers.length = 0;
for (var i in officeLayer) {
if (officeLayer.hasOwnProperty(i)) {
var layer = officeLayer[i];
var markers = [];
for (var j in layer["places"]) {
if (layer["places"].hasOwnProperty(j)) {
var place = layer["places"][j];
var icon = getIcon(place["icon"]);
var title = place["name"];
var posn = new google.maps.LatLng(place["posn"][0], place["posn"][1]);
var marker = createMarker(posn, title, getIcon(place["icon"]));
markers.push(marker);
allmarkers.push(marker);
}
}
mgr.addMarkers(markers, layer["zoom"][0], layer["zoom"][1]);
}
}
mgr.refresh();
updateStatus(mgr.getMarkerCount(map.getZoom()));
}
function createMarker(posn, title, icon) {
var markerOptions = {
position: posn,
title: title
};
if(icon !== false){
markerOptions.shadow = icon.shadow;
markerOptions.icon = icon.icon;
markerOptions.shape = icon.shape;
}
var marker = new google.maps.Marker(markerOptions);
google.maps.event.addListener(marker, 'dblclick', function() {
mgr.removeMarker(marker)
updateStatus(mgr.getMarkerCount(map.getZoom()));
});
return marker;
}
function showMarkers() {
mgr.show();
updateStatus(mgr.getMarkerCount(map.getZoom()));
}
function hideMarkers() {
mgr.hide();
updateStatus(mgr.getMarkerCount(map.getZoom()));
}
function deleteMarker() {
var markerNum = parseInt(document.getElementById("markerNum").value);
mgr.removeMarker(allmarkers[markerNum]);
updateStatus(mgr.getMarkerCount(map.getZoom()));
}
function clearMarkers() {
mgr.clearMarkers();
updateStatus(mgr.getMarkerCount(map.getZoom()));
}
function reloadMarkers() {
setupOfficeMarkers();
}
function updateStatus(html) {
document.getElementById("status").innerHTML = html;
}
//]]>
</script>
</head>
<body onload="load()">
<input type="button" onclick="deleteMarker()" value="delete marker #:" /> <input type="text" id="markerNum" value="0" size="3"/>|
<input type="button" onclick="clearMarkers()" value="clear all markers" />|
<input type="button" onclick="reloadMarkers()" value="reload all markers" />|
<input type="button" onclick="showMarkers()" value="show all markers" />|
<input type="button" onclick="hideMarkers()" value="hide all markers" />
<input type="button" onclick="mgr.toggle()" value="toggle markers" />
<br/>
<div id="map" style="width: 600px; height: 400px;"></div>
<div id="status"></div>
</body>
</html>