Create a Stylized Google Map
- سُلَيْمَان بْن دَاوُوْد

- 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

Comments