Google Maps – Markers


Google Maps – Markers

”;


Previous

Next

We can draw objects on the map and bind them to a desired latitude and longitude. These are called overlays. Google Maps provides various overlays as shown below.

  • Markers
  • Polylines
  • Polygons
  • Circle and rectangle
  • Info window
  • Symbols

To mark a single location on the map, Google Maps provides markers. These markers use a standard symbol and these symbols can be customized. This chapter explains how to add markers, and how to customize, animate, and remove them.

Adding a Simple Marker

You can add a simple marker to the map at a desired location by instantiating the marker class and specifying the position to be marked using latlng, as shown below.

var marker = new google.maps.Marker({
   position: new google.maps.LatLng(19.373341, 78.662109),
   map: map,
});

Example

The following code sets the marker on the city Hyderabad (India).

Live Demo 
<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:7
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.088291, 78.442383),
               map: map,
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

It produces the following output −