top of page

Create a Stylized Google Map

  • Writer: سُلَيْمَان بْن دَاوُوْد
    سُلَيْمَان بْن دَاوُوْد
  • Jul 30, 2021
  • 1 min read

You can create stylized google map like this **DON'T REUSE API KEY** it has been changed




<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script><scriptsrc="https://maps.googleapis.com/maps/api/js?key=AIzaSyCdEuUY-dSmTRIgRf66-ui4YLkJSaTjFqa4&callback=initMap&libraries=&v=weekly"defer                            ></script><style type="text/css">                            /* Always set the map height explicitly to define the size of the div                            * element that contains the map. */                            #map {                            height: 100%;                            }
                            /* Optional: Makes the sample page fill the window. */                            html,                            body {                            height: 100%;                            margin: 0;                            padding: 0;                            }</style><script>                            "use strict";                            let map;                            function initMap() {
                            var styledMapType = new google.maps.StyledMapType(                            [                            {                            "featureType": "administrative",                            "elementType": "labels.text.fill",                            "stylers": [                            {                            "color": "#1c2263"                            }                            ]                            },                            {                            "featureType": "landscape",                            "elementType": "all",                            "stylers": [                            {                            "color": "#2C2825"                            }                            ]                            },                            {                            "featureType": "poi",                            "elementType": "all",                            "stylers": [                            {                            "visibility": "off"                            },                            {                            "weight": "1.09"                            }                            ]                            },                            {                            "featureType": "road",                            "elementType": "all",                            "stylers": [                            {                            "color": "#5F5651"                            },                            {                            "lightness": 10                            },                            {                            "visibility": "on"                            },
                            ]                            },                            {                            "featureType": "road.highway",                            "elementType": "all",                            "stylers": [                            {                            "visibility": "simplified"                            },
                            ]                            },                            {                            "featureType": "road.arterial",                            "elementType": "labels.icon",                            "stylers": [                            {                            "visibility": "on"                            }                            ]                            },                            {                            "featureType": "transit",                            "elementType": "all",                            "stylers": [                              {                            "visibility": "on"                            }                            ]                            },                            {                            "featureType": "water",                            "elementType": "all",                            "stylers": [                            {                            "color": "#000000"                            },                            {                            "visibility": "on"                            }                            ]                            }                            ],                            {name: 'Styled Map'});


                            map = new google.maps.Map(document.getElementById("map"), {                            center: {                            lat: 48.4478803,                             lng: -123.3117757                            ,                            },                            zoom: 12  ,                            disableDefaultUI: true,                            heading: true                            });

                            map.mapTypes.set('styled_map', styledMapType);                            map.setMapTypeId('styled_map');                            }</script><div id="map"></div>

Output





 
 
 

Recent Posts

See All
Duplicate Category in Wordpress

The following code helps to duplicate the default wordpress category by help of code. // Add Duplicate option for categories in WordPress...

 
 
 
C#.NET and Its Associated Codes

1- Creating an Desktop Application in C#.NET C# ADO.NET & MySQL MAIN C# and MySQL ADO.NET with Crystals Reports Ready Code 2- Handling...

 
 
 

Comments


© 2020 by syednazrulhassan

bottom of page