Custom Marker Symbols

by Nikhil krishnan

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>

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

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a star-shaped symbol
// with a pale yellow fill and a thick yellow border.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {
      lat: -25.363882,
      lng: 131.044922
    }
  });

  var img = 'http://www.eurodirectrentals.com/public/images/google_map/icon_explore.png';

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: img,
    map: map
  });

  var locations = '<b>Hello.</b><br> Your content here';

  var infowindow = new google.maps.InfoWindow({
    content: locations
  });

  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}