polyMap
A Google Maps API to Virtual Earth API bridge by Poly9
Do you have a mapping application built using the Google Maps API that you would like to see work with the newest kid on the web mapping block, namely MSN Virtual Earth? Perhaps VE has better satellite photos of your city, or you simply like the scroll wheel zooming feature? What to do then?
Enter the polyMap API bridge. It allows you to switch, in most cases, from one mapping "provider" to another by replacing a single line of HTML. Let's jump right in and see how it is used:
a fairly simple Google Maps application:
<html>
<head>
<script src="http://maps.google.com/maps?file=api..."
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 300px; height: 300px"></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
window.setTimeout(function() {
map.recenterOrPanToLatLng(new GPoint(-122.1569, 37.4569));
}, 2000);
//]]>
</script>
</body>
</html>
|
the same application, now using Virtual Earth, by the way of the polyMap bridge:
<html>
<head>
<script src="http://www.example.com/polyMap/polyMap.js"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 300px; height: 300px"></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
window.setTimeout(function() {
map.recenterOrPanToLatLng(new GPoint(-122.1569, 37.4569));
}, 2000);
//]]>
</script>
</body>
</html>
|
Let's take it for a spin on a more elaborate example, coming from the Google Maps API documentation page:
the "Click Handling" sample app:
...
<script src="http://maps.google.com/maps?file=api..."
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function onLoad() {
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
GEvent.addListener(map, 'click', function(overlay, point) {
if (overlay) {
map.removeOverlay(overlay);
} else if (point) {
map.addOverlay(new GMarker(point));
}
});
}
//]]>
</script>
...
|
the same map, now rendered using Virtual Earth by the way of polyMap:
...
<script src="http://www.example.com/polyMap/polyMap.js"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function onLoad() {
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
GEvent.addListener(map, 'click', function(overlay, point) {
if (overlay) {
map.removeOverlay(overlay);
} else if (point) {
map.addOverlay(new GMarker(point));
}
});
}
//]]>
</script>
...
|
There is not much more to it; in most situations where the Google Maps API is used, the drop-in replacement is painless.
To make it work:
- copy the following files to a directory on your server: polyMap.js, MapControl.js, VE.js, pngfix.js
- create a directory named images (inside the directory created above) and copy into it blue.gif and Close.png
- remove, if present, the strict DOCTYPE document type definition from your page's HTML
- in polyMap.js, set the BASE_URL variable according to your web path (it's at the top)
- last but not least, replace the Google Maps API file invocation to instead include your copy of polyMap.js
Questions, comments, improvements or improvement ideas? Drop us a line at ApiBridgeAtPoly9DotCom@poly9.com
