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!
