Google Maps API - SPLessons

Chapter 9

Google Maps Markers

Google Maps Markers

The chapter demonstrates about the Google Maps Markers and following are the topics covered.

  • Markers

To identify the location on a map, markers are used in Google Maps. By default, the Google Maps JavaScript API uses a standard images as markers.

Google provides the custom icon options to users, so that a custom icon can be created with in the constructor called markers or by calling setIcon() on marker.

Adding a marker

A marker can be created using the google.maps.Marker constructor. The following are the main things to be remembered before creating a marker.

The example below demonstrate the main scheme of adding a marker in Google Maps.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var myLatLng = {lat: 17.3700, lng: 78.4800};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap"></script>
</body>
</html>

Remove a marker

Using setMap() method marker can be removed on the map by passing the argument as null .
Marker.setamap(null); method only removes the marker on the map, if user wish to delete the marker should set null to the marker itself.
A set of markers can be managed by creating arrays. This arrays are helpful to remove a particular marker in a group of markers by calling the setMap() method.

The below example demonstrate hiding and deleting a marker in Google Maps JavaScript applications.

<!DOCTYPE html>
<html>
  <head>
    <title>Removeing a Markers</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #010101;
  padding: 10px;
  border: 1px solid #BCB7B7;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
    </style>
  </head>
  <body>
    <div id="floating-panel">
      <input onclick="clearMarkers();" type=button value="Hide Markers">
      <input onclick="showMarkers();" type=button value="Show All Markers">
      <input onclick="deleteMarkers();" type=button value="Delete Markers">
    </div>
    <div id="map"></div>
    <p>Click on the map to add markers.</p>
    <script>

// When the user clicks on the map, the markers get appeared.
// The markers are stored in an array.
// User can click an option to hide, show or delete the markers.
var map;
var markers = [];

function initMap() {
  var haightAshbury = {lat: 28.6139, lng:  77.2090};
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: haightAshbury,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  // This event listener will call addMarker() when the map is clicked.
  map.addListener('click', function(event) {
    addMarker(event.latLng);
  });
  // Adds a marker at the center of the map.
  addMarker(haightAshbury);
}

// Adds a marker to the map and push to the array.
function addMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markers.push(marker);
}
// Sets the map on all markers in the array.
function setMapOnAll(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map);
  }
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
  setMapOnAll(null);
}
// Shows any markers currently in the array.
function showMarkers() {
  setMapOnAll(map);
}
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
  clearMarkers();
  markers = [];
}
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap"></script>
  </body>
</html>

Animation Marker

Markers can be animated by using google.maps.animation in Google Maps API. The following animations are supported by Google Map API.

Example below demonstrate the marker bouncing and droping animation property in Google Maps JavaScript API.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Marker Animations</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
var marker;
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {lat: 17.3700, lng: 78.4800}
  });
  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: 17.3700, lng: 78.4800}
  });
  marker.addListener('click', toggleBounce);
}
function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

The below example demonstrate creating animation property for a group of markers. by using the setTimeout() to space the animations of the markers.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Marker animations with <code>setTimeout()</code></title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
#floating-panel {
  position: absolute;
  top: 10px;
  left: 40%;
  z-index: 5;
  background-color: #010101;
  padding: 5px;
  border: 2px solid #BCB7B7;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
      #floating-panel {
        margin-left: -52px;
      }
    </style>
  </head>
  <body>
    <div id="floating-panel">
      <button id="drop" onclick="drop()">Drop Markers</button>
     </div>
    <div id="map"></div>
    <script>

// If user weant to adding a number of markers and want to drop them on the map
// window.setTimeout() used to space your markers' animation.

var neighborhoods = [
  {lat: 28.6139, lng: 77.2090},
  {lat: 18.9750, lng: 72.8258},
  {lat: 13.0827, lng: 80.2707},
  {lat: 12.9667, lng: 77.5667},
  {lat: 17.3700, lng: 78.4800}
];
var markers = [];
var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 21.0000, lng: 78.0000}
  });
}
function drop() {
  clearMarkers();
  for (var i = 0; i < neighborhoods.length; i++) {
    addMarkerWithTimeout(neighborhoods[i], i * 200);
  }
}
function addMarkerWithTimeout(position, timeout) {
  window.setTimeout(function() {
    markers.push(new google.maps.Marker({
      position: position,
      map: map,
      animation: google.maps.Animation.DROP
    }));
  }, timeout);
}
function clearMarkers() {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }
  markers = [];
}
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap"></script>
  </body>
</html>

Summary

  • Objects on the maps depends on Latitude and Longitude, so when the user zoom or drag on the map the objects moves.
  • Standard images are used as Markers by Google Maps.

  • Copy the API key obtained from Google Maps API and paste using the JavaScript tag in the code for loading Maps.
  • Set the required Map Properties for better output.
  • Make sure the latitude and longitudes of the required location mentioned to be correct.