Custom Markers

by Abin Thaha Azeez

HTML

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
 <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

var map;
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8,
        center: new google.maps.LatLng(8.5241, 76.9366),
        mapTypeId: 'roadmap'
    });
    var clusterOptions = {
        imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m', 
        gridSize: 5
    }

    var icons = {
        geolocation: {
            icon: 'https://maps.google.com/mapfiles/kml/pal3/icon27.png'
        },
        BackDatedGeolocationUpdate: {
            icon: 'https://maps.google.com/mapfiles/kml/pal3/icon32.png'
        }
    };

    var features = [
			{
        position: new google.maps.LatLng(8.5241, 76.9366),
        type: 'BackDatedGeolocationUpdate'
      }, {
        position: new google.maps.LatLng(8.5241, 76.9366),
        type: 'geolocation'
      }, {
        position: new google.maps.LatLng(9.5241, 76.9166),
        type: 'BackDatedGeolocationUpdate'
      }, {
        position: new google.maps.LatLng(9.5241, 76.9166),
        type: 'geolocation'
      }, {
        position: new google.maps.LatLng(9.5241, 76.9166),
        type: 'BackDatedGeolocationUpdate'
      }, {
        position: new google.maps.LatLng(9.9189, 77.1025),
        type: 'BackDatedGeolocationUpdate'
      }, {
        position: new google.maps.LatLng(9.9189, 77.1025),
        type: 'geolocation'
      }, {
        position: new google.maps.LatLng(9.9189, 77.1025),
        type: 'geolocation'
      }, {
        position: new google.maps.LatLng(9.9189, 77.1025),
        type: 'BackDatedGeolocationUpdate'
      }, {
        position: new google.maps.LatLng(9.5241, 77.1025),
        type: 'BackDatedGeolocationUpdate'
      }, {
        position: new google.maps.LatLng(8.93122, 77.10256),
        type: 'BackDatedGeolocationUpdate'
      }, {
        position: new google.maps.LatLng(8.93125, 77.1026),
        type: 'BackDatedGeolocationUpdate'
      }, {
        position: new google.maps.LatLng(8.93122,...