Site Overlay

Custom Google Map

You just have to copy below code and it in your application. I have explained it with comments in the code. So you can understand it by better way.

    <script>

      function initMap() {
       /* Here define your markers in array format */
       var locations = [
       ['Your Location', 45.070711, 7.683895, 4, 'Your custom marker address', 'youremail@google.com'],
       ['Your Location 2', 45.070711, 7.683895, 4, 'Your custom marker address', 'youremail@google.com'],
       ['Your Location 3', 45.070711, 7.683895, 4, 'Your custom marker address', 'youremail@google.com']
       ];
       /* Add your div id here */
        var mapDiv = document.getElementById('your-id');
        var map = new google.maps.Map(mapDiv, {
          /* Add your lat lang of location where you want to make map center */
          center: {lat: 22.304240, lng: -39.721336},
          /* There are options to show controls as per your feasibility */
          zoom: 2,
          scrollwheel: false,
          disableDefaultUI: false,
          zoomControl: false,
          mapTypeControl: false,
          scaleControl: false,
          streetViewControl: false,
          rotateControl: false,
          fullscreenControl: false,
          /* Here is style of your map, you can generate it from https://mapstyle.withgoogle.com/ this site. Copy json from there and paste here. */
          styles:[
              {
                "elementType": "geometry",
                "stylers": [
                {
                    "color": "#14cb56"
                }
                ]
            },
            {
                "elementType": "labels",
                "stylers": [
                {
                    "visibility": "off"
                }
                ]
            },
            {
                "elementType": "labels.icon",
                "stylers": [
                {
                    "visibility": "off"
                }
                ]
            },
            {
                "elementType": "labels.text.fill",
                "stylers": [
                {
                    "color": "#757575"
                }
                ]
            },
            {
                "elementType": "labels.text.stroke",
                "stylers": [
                {
                    "color": "#212121"
                }
                ]
            },
            {
                "featureType": "administrative",
                "elementType": "geometry",
                "stylers": [
                {
                    "color": "#19e161"
                },
                {
                    "visibility": "off"
                }
                ]
            },
            {
                "featureType": "administrative.country",
                "elementType": "geometry.stroke",
                "stylers": [
                {
                    "color": "#19e161"
                },
                {
                    "visibility": "on"
                },
                {
                    "weight": 1
                }
                ]
            },
            {
                "featureType": "administrative.country",
                "elementType": "labels.text.fill",
                "stylers": [
                {
                    "color": "#9e9e9e"
                }
                ]
            },
            {
                "featureType": "administrative.land_parcel",
                "stylers": [
                {
                    "visibility": "off"
                }
                ]
            },
            {
                "featureType": "administrative.locality",
                "elementType": "labels.text.fill",
                "stylers": [
                {
                    "color": "#bdbdbd"
                }
                ]
            },
            {
                "featureType": "administrative.neighborhood",
                "stylers": [
                {
                    "visibility": "off"
                }
                ]
            },
            {
                "featureType": "poi",
                "stylers": [
                {
                    "visibility": "off"
                }
                ]
            },
            {
                "featureType": "poi",
                "elementType": "labels.text.fill",
                "stylers": [
                {
                    "color": "#757575"
                }
                ]
            },
            {
                "featureType": "poi.park",
                "elementType": "geometry",
                "stylers": [
                {
                    "color": "#19e161"
                }
                ]
            },
            {
                "featureType": "poi.park",
                "elementType": "labels.text.fill",
                "stylers": [
                {
                    "color": "#616161"
                }
                ]
            },
            {
                "featureType": "poi.park",
                "elementType": "labels.text.stroke",
                "stylers": [
                {
                    "color": "#1b1b1b"
                }
                ]
            },
            {
                "featureType": "road",
                "stylers": [
                {
                    "visibility": "off"
                }
                ]
            },
            {
                "featureType": "road",
                "elementType": "geometry.fill",
                "stylers": [
                {
                    "color": "#19e161"
                }
                ]
            },
            {
                "featureType": "road",
                "elementType": "labels.icon",
                "stylers": [
                {
                    "visibility": "off"
                }
                ]
            },
            {
                "featureType": "road",
                "elementType": "labels.text.fill",
                "stylers": [
                {
                    "color": "#8a8a8a"
                }
                ]
            },
            {
                "featureType": "road.arterial",
                "elementType": "geometry",
                "stylers": [
                {
                    "color": "#19e161"
                }
                ]
            },
            {
                "featureType": "road.highway",
                "elementType": "geometry",
                "stylers": [
                {
                    "color": "#19e161"
                }
                ]
            },
            {
                "featureType": "road.highway.controlled_access",
                "elementType": "geometry",
                "stylers": [
                {
                    "color": "#19e161"
                }
                ]
            },
            {
                "featureType": "road.local",
                "elementType": "labels.text.fill",
                "stylers": [
                {
                    "color": "#616161"
                }
                ]
            },
            {
                "featureType": "transit",
                "stylers": [
                {
                    "visibility": "off"
                }
                ]
            },
            {
                "featureType": "transit",
                "elementType": "labels.text.fill",
                "stylers": [
                {
                    "color": "#757575"
                }
                ]
            },
            {
                "featureType": "water",
                "elementType": "geometry",
                "stylers": [
                {
                    "color": "#19e161"
                }
                ]
            },
            {
                "featureType": "water",
                "elementType": "labels.text.fill",
                "stylers": [
                {
                    "color": "#3d3d3d"
                }
                ]
            }
            ]
        });


    var contentString = '';
    var infowindow = new google.maps.InfoWindow({
      content: contentString
    });
   // Create a marker and set its position.
   var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        icon:'images/marker.svg',
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      
      /* Here is the your goole map info window structure */
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            var contentString = '<div id="td-map-content">'+
            '<div class="invo-contact-info-box">'+
            '<div class="invo-contact-info-box-cnt">'+
            ' <h3>'+locations[i][0]+'</h3>'+ 
            ' <hr>'+     
            ' <p>'+locations[i][4]+'</p>'+          
            ' <hr>'+     
            ' <p><a href="mailto:'+locations[i][5]+'">'+locations[i][5]+'</a></p>'+          
            '</div>'+
            '</div>';
          infowindow.setContent(contentString);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }

    }
   
    </script>

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

Leave a Reply

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

Copyright © 2022 Dip Codes. All Rights Reserved.