Skip to content
Related Articles

Related Articles

Google Maps Markers

View Discussion
Improve Article
Save Article
  • Last Updated : 18 Aug, 2020

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=
           "https://maps.googleapis.com/maps/api/js">
      </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;">
              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>
        <!-- Loading map API -->
        <script src=
           "https://maps.googleapis.com/maps/api/js">
      </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;">
              GeeksforGeeks</h1>
            <h3>Google Maps</h3>
            <!-- Basic Container -->
            <div id="DivID" 
                 style="width: 400px;
                        height: 300px;">
          </div>
        </center>
    </body>
</html>


Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!