Pastebin is 300% more awesome when you are logged in. Sign Up, it's FREE!
Guest

OSM in Google Map

By: elbatron on Sep 22nd, 2011  |  syntax: JavaScript  |  size: 1.42 KB  |  hits: 101  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8"/>
  5.                 <title>Simple SlippyMap using Google Maps v3 API</title>
  6.                 <script type="text/javascript"
  7.                         src="http://maps.google.com/maps/api/js?sensor=false"></script>
  8.                 <script type="text/javascript">
  9. var osmMapType = new google.maps.ImageMapType({
  10.         getTileUrl: function(coord, zoom) {
  11.                 return "http://tile.openstreetmap.org/" +
  12.                 zoom + "/" + coord.x + "/" + coord.y + ".png";
  13.         },
  14.         tileSize: new google.maps.Size(256, 256),
  15.         isPng: true,
  16.         alt: "OpenStreetMap layer",
  17.         name: "OpenStreetMap"
  18. });
  19.  
  20. var map;
  21. function initialize(){
  22.         var latlng = new google.maps.LatLng(57, 21);
  23.         var mapOpts = {
  24.                 zoom: 3,
  25.                 center: latlng,
  26.                 panControl: true,
  27.         scaleControl: true,
  28.         mapTypeControlOptions: {
  29.         style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  30.         },
  31.         zoomControl: true,
  32.         zoomControlOptions: {
  33.         style: google.maps.ZoomControlStyle.SMALL
  34.         },
  35.                 mapTypeId: google.maps.MapTypeId.ROADMAP
  36.                
  37.         };
  38.         map = new google.maps.Map(document.getElementById("map"), mapOpts);
  39.         map.setCenter(latlng);  map.setZoom(3);
  40.         map.overlayMapTypes.insertAt(0, osmMapType);
  41.         map1.mapTypes.set('OpenStreetMap', osmMapType);
  42.         map.setMapTypeId('OpenStreetMap');
  43. }
  44. </script>
  45. <style>
  46. html, body, #map{
  47.         height: 100%;
  48.         width: 100%;
  49.         margin: 0;
  50.         padding: 0;
  51.         }
  52. </style>
  53.         </head>
  54.         <body onload="initialize()">
  55.                 <div id="map"></div>
  56.         </body>
  57. </html>