Google Maps API - SPLessons

Google Maps Markers

Home > Lesson > Chapter 9
SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Google Maps Markers

Google Maps Markers

shape Introduction

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

shape Description

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

shape Description

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

shape Example

The example below demonstrate the main scheme of adding a marker in Google Maps. [c] <!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> [/c]

Remove a marker

shape Description

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.

shape Example

The below example demonstrate hiding and deleting a marker in Google Maps JavaScript applications. [c] <!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> [/c]

Animation Marker

shape Description

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

shape Example 1

Example below demonstrate the marker bouncing and droping animation property in Google Maps JavaScript API. [c] <!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); } } [/c]

shape Example 2

The below example demonstrate creating animation property for a group of markers. by using the setTimeout() to space the animations of the markers. [c] <!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> [/c]

Summary

shape Key points

  • 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.

shape Programming Tips

  • 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.