Google Maps API v3 To Show Map With No Roads

2/6/2015 10:12:19 PM

JavaScript

Google Maps

Google Maps JavaScript API v3

Use the Google Maps v3 Javascript API to show a map without roads. You can also add/remove other features. You will need to generate your own API key to use the Google API

Other Features:

http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

https://developers.google.com/maps/documentation/javascript/maptypes?csw=1#StyledMaps

Google API Key: https://developers.google.com/maps/documentation/javascript/tutorial

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        html, body, #map-canvas
        {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE">
    </script>
    <script type="text/javascript">

        function initialize()
        {
            var myStyle = [
                {
                    featureType: "road",
                    stylers: [
                        { visibility: "off" }
                    ]
                },
                {
                    featureType: "landscape",
                    stylers: [
                        { visibility: "on" }
                    ]
                }
            ];


            var styledMap = new google.maps.StyledMapType(myStyle,
                { name: "Styled Map" });


            var mapOptions = {
                center: { lat: 50.457504, lng: 11.315918 },
                zoom: 4,
                mapTypeControlOptions: {
                    mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
                }
            };

            var map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);

            map.mapTypes.set('map_style', styledMap);
            map.setMapTypeId('map_style');
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <div id="map-canvas"></div>
</body>
</html>