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, }; // 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, }); } </script> </head> <!-- load map --> <body onload="GFG()"> <center> <h1 style="color: green;"> neveropen</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> <!-- Loading map API --> <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> <!-- load map --> <body onload="GFG()"> <center> <h1 style="color: green;"> neveropen</h1> <h3>Google Maps</h3> <!-- Basic Container --> <div id="DivID" style="width: 400px; height: 300px;"> </div> </center> </body> </html> |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!