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>