The process of drawing objects on the map and bind them to a desired latitude and longitude is called overlays.
Various overlays Google Maps provides.
- Markers
- Polylines
- Polygons
- Circle and rectangle
- Info window
- Symbols
Google Maps markers are provided to mark a single location on the map. These markers use a standard symbol that is customizable.
Syntax:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(19.373341, 78.662109),
map: map,
});
Example 1:
<!DOCTYPE html>
<html>
<head>
<!-- Loading map API -->
<script src=
</script>
<script>
function GFG() {
var CustomOp = {
center:
new google.maps.LatLng(28.502212, 77.405603),
zoom: 17,
};
var map =
new google.maps.Map(document.getElementById( "DivID" ), CustomOp);
var marker = new google.maps.Marker({
position:
new google.maps.LatLng(28.502211, 77.405512),
map: map,
});
}
</script>
</head>
<!-- load map -->
<body onload= "GFG()" >
<center>
<h1 style= "color: green;" >
GeeksforGeeks</h1>
<h3>Google Maps</h3>
<!-- Basic Container -->
<div id= "DivID"
style= "width: 400px;
height: 300px;" >
</div>
</center>
</body>
</html>
|
Output:
Example 2: To customize the marker.
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
< script >
function GFG() {
var CustomOp = {
center:
new google.maps.LatLng(28.502212, 77.405603),
zoom: 17,
};
// Map object
var map =
new google.maps.Map(document.getElementById("DivID"), CustomOp);
var marker = new google.maps.Marker({
position:
new google.maps.LatLng(28.502211, 77.405512),
map: map,
animation:google.maps.Animation.BOUNCE
});
}
</ script >
</ head >
< body onload = "GFG()" >
< center >
< h1 style = "color: green;" >
GeeksforGeeks</ h1 >
< h3 >Google Maps</ h3 >
< div id = "DivID"
style="width: 400px;
height: 300px;">
</ div >
</ center >
</ body >
</ html >
|
Output:
Last Updated :
18 Aug, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...