Styled Google Map

An example of Google Maps JavaScript API.

HTML

<div id="google-map-styled"></div>
<!-- Replace the API Key with your own -->
<script async defer src='https://maps.googleapis.com/maps/api/js?key=AIzaSyB3bABW7kKWoZmbDMAjRsR1aFuW4m10bcg&callback=initMap'></script>

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#google-map-styled {
 width: 90%;
  height: 300px;
  border-color:#67b9e8;
  align-self: center;
}

JavaScript

window.addEventListener('load', function() {
   init();
});

    var map;

    function init() {
      var mapOptions = {
        center: new google.maps.LatLng(40.4167, -3.70325),
        zoom: 17,
        zoomControl: true,
        zoomControlOptions: {
          style: google.maps.ZoomControlStyle.DEFAULT,
        },
        disableDoubleClickZoom: true,
        mapTypeControl: true,
        mapTypeControlOptions: {
          style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        },
        scaleControl: true,
        scrollwheel: true,
        panControl: true,
        streetViewControl: true,
        draggable: true,
        overviewMapControl: true,
        overviewMapControlOptions: {
          opened: false,
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: [{
          "stylers": [{
            "saturation": 100
          }, {
            "gamma": 0.8
          }, {
            "lightness": 4
          }, {
            "visibility": "on"
          }]
        }, {
          "featureType": "landscape.natural",
          "stylers": [{
            "visibility": "on"
          }, {
            "color": "#5dff00"
          }, {
            "gamma": 4.97
          }, {
            "lightness": -5
          }, {
            "saturation": 80
          }]
        }],
      }
      var mapElement = document.getElementById('google-map-styled');
      var map = new google.maps.Map(mapElement, mapOptions);
      var locations = [
        ['Temple Gym', 'undefined', 'undefined', 'undefined', 'undefined', 58.057104319954995, 26.494465303635366, 'https://mapbuildr.com/assets/img/markers/solid-pin-blue.png']
      ];
      for (i = 0; i < locations.length; i++) {
        if (locations[i][1] == 'undefined') {
          description = '';
        } else {
          description = locations[i][1];
        }
        if (locations[i][2] == 'undefined') {
          telephone = '';
        } else {
          markericon = locations[i][7];
       ...