Level-5; Sheikh Hasina Software Technology Park, Jessore, Bangladesh
+8801976062011
shahanur.sharif84

Use Snazzy Style Maps By Google Api

Read all about software development and Coding

Use Snazzy Style Maps By Google Api

How do I use these styles?

Using these styles in your website is as easy as copying the JSON on any style page and passing this to the map options of any Google Maps object. If you are creating your own HTML and JavaScript website be sure to read up on the Google Maps API and if this code is still too technical check out our Map Builder and just pick and choose the settings you want.

Some web platforms and blogging engines (like WordPress) make it difficult to edit code directly. To style your maps on these platforms you have to find a plugin that supports styled Google Maps.

 step:1 : —-> Create Basic HTML format

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title> Snazzy Style Maps </title>
</head>
<body>

</body>
</html>

step:2 —-> Add basic Style Into Head Section

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title> Snazzy Style Maps </title>
<style>
    #map {
          width: 100%;
          height: 400px;
          background-color: grey;
        }
</style>
</head>
<body>

</body>
</html>

step:3 —-> Create Div Id(map_id) in the body tag

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title> Snazzy Style Maps</title>
<style>
     #map {
         width: 100%;
         height: 400px;
         background-color: grey;
        }
</style>
</head>
<body>



  <div id="map"></div>

</body>


</html>

step:4 —-> Add google map script with api key (https://developers.google.com/maps/documentation/javascript/get-api-key)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title> Snazzy Style Maps</title>
<style>
   #map {
        width: 100%;
        height: 400px;
        background-color: grey;
       }
</style>
</head>
<body>
<div id="map"></div>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD66hkCo9Pd6aZoPkfJ_5JRr8KnFTQzPIA&callback=initMap">
</script>

</body>
</html>

step:5—–> And Lastly Ddd this script into in the body section
NB: You can modify your style By (https://snazzymaps.com/)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title> Snazzy Style Maps</title>
<style>
    #map {
       width: 100%;
       height: 400px;
       background-color: grey;
     }
</style>
</head>
<body>

<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD66hkCo9Pd6aZoPkfJ_5JRr8KnFTQzPIA&callback=initMap">
</script>

<script>
function initMap() { 
var map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 40.674, lng: -73.945 },
zoom: 12,
styles: [
{ elementType: 'geometry', stylers: [{ color: '#242f3e' }] },
{ elementType: 'labels.text.stroke', stylers: [{ color: '#242f3e' }] },
{ elementType: 'labels.text.fill', stylers: [{ color: '#746855' }] },
{
featureType: 'administrative.locality',
elementType: 'labels.text.fill',
stylers: [{ color: '#d59563' }]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{ color: '#d59563' }]
},
{
featureType: 'poi.park',
elementType: 'geometry',
stylers: [{ color: '#263c3f' }]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{ color: '#6b9a76' }]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [{ color: '#38414e' }]
},
{
featureType: 'road',
elementType: 'geometry.stroke',
stylers: [{ color: '#212a37' }]
},
{
featureType: 'road',
elementType: 'labels.text.fill',
stylers: [{ color: '#9ca5b3' }]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{ color: '#746855' }]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [{ color: '#1f2835' }]
},
{
featureType: 'road.highway',
elementType: 'labels.text.fill',
stylers: [{ color: '#f3d19c' }]
},
{
featureType: 'transit',
elementType: 'geometry',
stylers: [{ color: '#2f3948' }]
},
{
featureType: 'transit.station',
elementType: 'labels.text.fill',
stylers: [{ color: '#d59563' }]
},
{
featureType: 'water',
elementType: 'geometry',
stylers: [{ color: '#17263c' }]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{ color: '#515c6d' }]
},
{
featureType: 'water',
elementType: 'labels.text.stroke',
stylers: [{ color: '#17263c' }]
}
]
});
}
</script>

</body>
</html>

Example : http://jsbin.com/zohiciyupu/edit?html,output

I am Professional Front-End web developer . I have 5 year experience . I am working on MicroDreamIt t last Five years….!!

 

2 Responses

  1. sumon says:

    Thanks brother , its awesome for unique map integration…

  2. john says:

    nice article about styling google map

Leave a Reply

Your email address will not be published. Required fields are marked *