Google Maps API
- Edit fiddle - JSFiddle
- http://jsfiddle.net/ByZNT/2/
External Resources
https://maps.googleapis.com/maps/api/js?v=3.exp
html, body, #map-canvas { height: 750px; width: 1500px; margin: 0px; padding: 0px }
<script type="text/javascript"> function initialize() { var mapOptions = { zoom: 17, center: new google.maps.LatLng(35.6241565, 139.7226984), mapTypeId: google.maps.MapTypeId.ROADMAP, //mapTypeId: google.maps.MapTypeId.TERRAIN, disableDefaultUI: true }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var stylesArray = [ { elementType: 'geometry.fill', stylers: [ {saturation: -100} ] }, { elementType: 'labels.text.fill', stylers: [ {lightness: -100} ] }, { featureType: 'administrative', elementType: 'geometry.fill', stylers: [ {lightness: -100} ] }, { featureType: 'landscape', elementType: 'geometry.fill', stylers: [ {lightness: -100} ] }, { featureType: 'poi', elementType: 'geometry.fill', stylers: [ {lightness: -100} ] }, { featureType: 'road', elementType: 'geometry.fill', stylers: [ {lightness: -96} ] }, { featureType: 'transit', elementType: 'geometry.fill', stylers: [ {lightness: -80} ] }, { featureType: 'water', elementType: 'geometry.fill', stylers: [ {lightness: -93} ] }, { featureType: 'landscape', elementType: 'labels', stylers: [ {visibility: 'off'} ] }, { featureType: 'poi', elementType: 'labels', stylers: [ {visibility: 'off'} ] } ]; map.setOptions({styles: stylesArray}); } google.maps.event.addDomListener(window, 'load', initialize); </script> <div id="map-canvas"></div>