<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Simple SlippyMap using Google Maps v3 API</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var osmMapType = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return "http://tile.openstreetmap.org/" +
zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
isPng: true,
alt: "OpenStreetMap layer",
name: "OpenStreetMap"
});
var map;
function initialize(){
var latlng = new google.maps.LatLng(57, 21);
var mapOpts = {
zoom: 3,
center: latlng,
panControl: true,
scaleControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), mapOpts);
map.setCenter(latlng); map.setZoom(3);
map.overlayMapTypes.insertAt(0, osmMapType);
map1.mapTypes.set('OpenStreetMap', osmMapType);
map.setMapTypeId('OpenStreetMap');
}
</script>
<style>
html, body, #map{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body onload="initialize()">
<div id="map"></div>
</body>
</html>