Harry Wood

OpenStreetMap option in Google Maps API v2 (old)

Default to google maps, because most of your users are brainwashed into thinking Google Inc are the only ones who could possibly provide a decent map, BUT add the option to switch to a better map (top right) for those enlighted souls who prefer an editable open licensed map, and prefer and to support a not-for-profit project.

This is the old google maps API v2 which requires a google API key, and is deprecated, so you're unlikely to be following this example. This changes the credit text according to the selected layer, but we don't try to remove the google logo or the 'terms of use' link.

<!DOCTYPE html>
<html>
<head>
  <title>OpenStreetMap option in Google Maps API v2 (old)</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 
  
  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=YOUR_KEY_HERE" type="text/javascript"></script>

<script type="text/javascript">
  //<![CDATA[
 
  function load()
  {
     if (!GBrowserIsCompatible())
         return;
    
     var copyOSM = new GCopyrightCollection("&copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors");
     copyOSM.addCopyright(new GCopyright(1, new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)), 0, " "));
    
     var tilesOSM  = new GTileLayer(copyOSM, 1, 17, {tileUrlTemplate: 'http://tile.openstreetmap.org/{Z}/{X}/{Y}.png'});
    
     var mapOSM    = new GMapType([tilesOSM],     G_NORMAL_MAP.getProjection(), "OSM");
     var mapGoogle = G_NORMAL_MAP; 
     //mapGoogle.setName("google");  TODO How to set the name on the control?
     
     //Swap the order around to default to OSM instead
     var mapTypesArray = [mapGoogle, mapOSM ];
     
     var map = new GMap2(document.getElementById("map"), { mapTypes: mapTypesArray });
    
     map.addControl(new GLargeMapControl());
     map.addControl(new GMapTypeControl());
     
     var latlng = new GLatLng(43.8545, 18.39);
     
     map.setCenter( latlng, 12);
    
     
     // Create a base icon for all of our markers that specifies the
     // shadow, icon dimensions, etc.
     var baseIcon = new GIcon(G_DEFAULT_ICON);
     baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
     baseIcon.iconSize = new GSize(20, 34);
     baseIcon.shadowSize = new GSize(37, 34);
     baseIcon.iconAnchor = new GPoint(9, 34);
     baseIcon.infoWindowAnchor = new GPoint(9, 2);
     
        
        
     // Creates a marker whose info window displays the letter corresponding
     // to the given index.
     function createMarker(point, index) {
        // Create a lettered icon for this point using our icon class
        var letter = String.fromCharCode("A".charCodeAt(0) + index);
        var letteredIcon = new GIcon(baseIcon);
        letteredIcon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
     
        // Set up our GMarkerOptions object
        markerOptions = { icon:letteredIcon };
        var marker = new GMarker(point, markerOptions);
     
        GEvent.addListener(marker, "click", function() {
           marker.openInfoWindowHtml("Marker <b>" + letter + "</b>");
        });
        return marker;
     }
/*
     // Add 10 markers to the map at random locations
     var bounds = map.getBounds();
     var southWest = bounds.getSouthWest();
     var northEast = bounds.getNorthEast();
     var lngSpan = northEast.lng() - southWest.lng();
     var latSpan = northEast.lat() - southWest.lat();
     for (var i = 0; i < 10; i++) {
        var latlng = new GLatLng(southWest.lat() + latSpan * Math.random(),
              southWest.lng() + lngSpan * Math.random());
        map.addOverlay(createMarker(latlng, i));
     }
*/

var marker = new GMarker(latlng, { } );
            
     GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml("What the???<br>Is this google or OpenStreetMap?");
     });
     map.addOverlay(marker);
     
  }
  //]]>
  </script>
</head>
<body onload="load()" onunload="GUnload()">
 
<div id="map" style="width: 300px; height: 200px; border:1px solid gray;"></div>

</body>
</html>

Home
Blog
About
Maps
Other
Contact