Home
Run >
<!DOCTYPE html> <html> <head><!-- www.techstrikers.com --> <title>Add Custom Complex Style on Map</title> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 99%; width: 99%; } </style> //loading google maps asynchronously <script async defer src="https://maps.googleapis.com/maps/api/js? signed_in=true&callback=initialize"> </script> <script> function initialize() { var inRoadMapType = new google.maps.StyledMapType([ { featureType: 'road.highway', elementType: 'geometry', stylers: [ {hue: '#ff0022'}, {saturation: 60}, {lightness: -20} ] }, { featureType: 'road.arterial', elementType: 'all', stylers: [ {hue: '#2200ff'}, {lightness: -40}, {visibility: 'simplified'}, {saturation: 30} ] }, { featureType: 'road.local', elementType: 'all', stylers: [ {hue: '#f6ff00'}, {saturation: 50}, {gamma: 0.7}, {visibility: 'simplified'} ] }, { featureType: 'water', elementType: 'geometry', stylers: [ {saturation: 40}, {lightness: 40} ] }, { featureType: 'road.highway', elementType: 'labels', stylers: [ {visibility: 'on'}, {saturation: 98} ] }, { featureType: 'administrative.locality', elementType: 'labels', stylers: [ {hue: '#0022ff'}, {saturation: 50}, {lightness: -10}, {gamma: 0.90} ] }, { featureType: 'transit.line', elementType: 'geometry', stylers: [ {hue: '#ff0000'}, {visibility: 'on'}, {lightness: -70} ] } ], {name: 'IN Road Atlas'}); var lat_lng = {lat: 20.08672, lng: 78.42444}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 6, center: lat_lng, // Brooklyn. mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'inroadatlas'] } }); map.mapTypes.set('inroadatlas', inRoadMapType); map.setMapTypeId('inroadatlas'); } </script> </head> <body> <div id="map"></div> </body> </html>