Google Maps Markers

How to Create Google Maps Markers

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

Marker makes Single locations on a map. It can also display custom icon images and you can also animate this.

Adding a Simple Marker

Syntax

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

The following code sets the Marker on the city Delhi (India). It is also animated marker.

Syntax

	
<!DOCTYPE html>
<html>
<head>
<script
src="https://maps.googleapis.com/maps/api/js">
</script>

<script>
var myCenter=new google.maps.LatLng(28.6139,77.2090);
var marker;

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:4,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker=new google.maps.Marker({
  position:myCenter,
  animation:google.maps.Animation.BOUNCE
  });

marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:548px;height:400px;"></div>
</body>
</html>