نحوه‌ی استایل‌دهی به گوگل‌مپ

 

کتابخانه‌ی گوگل‌مپ

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

 کامپوننت‌های(اجزاء، مولفه) گوگل‌مپ ( Google Maps Components )

1. feautureTypes
2. elementTypes
3. Stylers

 

شروع استایل‌دهی به گوگل‌مپ

<div class="wrapper">
  <div id="newMap"></div>       
</div>

window.onload = function() {
  // add the script here
}

window.onload = function() {
   var mapStyle = [
      // we will add the style rules here
   ];
}

window.onload = function () {
    var mapStyle = [
        // we will add the style rules here.
    ];
    var options = {
    mapTypeControlOptions: {
        mapTypeIds: ['Styled']
    },
        center: new google.maps.LatLng(35.732766,51.389306),
        zoom: 16,
        disableDefaultUI: true,
        mapTypeId: 'Styled'
    };
    var div = document.getElementById('newMap');
    var map = new google.maps.Map(div, options);
    var styledMapType = new google.maps.StyledMapType(mapStyle, { name: 'Styled' });
    map.mapTypes.set('Styled', styledMapType);
};

.wrapper {
  width   : 90vw;
  height : 70vh;
  margin : 0 auto;
}
header {
  text-align : center;
}
#newMap{
  width : 100%;
  height : 100%;
}

 var mapStyle = [
      {
        featureType: 'water',
        elementType: 'geometry.fill',
        stylers: [
            { color: '#2980b9' }
        ]
      }
    ];

{
        featureType: 'landscape.natural',
        elementType: 'all',
        stylers: [
            { hue: '#809f80' },
            { lightness: -35 }
        ]
}

 var mapStyle = [
        // we will add the style rules here.
 {
        featureType: 'water',
        elementType: 'geometry.fill',
        stylers: [
            { color: '#2980b9' }
        ]
      },{
        featureType: 'landscape.natural',
        elementType: 'all',
        stylers: [
            { hue: '#809f80' },
            { lightness: -35 }
        ]
      },
      {
          featureType: 'poi',
          elementType: 'geometry',
          stylers: [
              { hue: '#f9e0b7' },
              { lightness: 30 }
          ]
      },{
          featureType: 'road',
          elementType: 'geometry',
          stylers: [
              { hue: '#d5c18c' },
              { lightness: 14 }
          ]
      },{
          featureType: 'road.local',
          elementType: 'all',
          stylers: [
              { hue: '#ffd7a6' },
              { saturation: 100 },
              { lightness: -12 }
          ]
      }      
         
      ];