How to add markers in Google Maps

      No Comments on How to add markers in Google Maps

Introduction

Here, I will explain how to add Markers to a Google Maps using Google Maps JavaScript API v3

Google Maps Markers - Google Chrome_2013-06-16_02-20-19

Description

Marker is a type of object that is used to mark a location on the Google map. A marker displays an icon on the given latitude/longitude. google.maps.Marker class is used to create a marker. It’s a type of Overlays in Google Maps API. Any object that is shown on the map is called Overlays in the Google Maps. It is very simple to draw markers on a map

Here, we will create a map and add a simple marker to it. Write following in an html file or html source of an ASP.NET page

<html xmlns="http://www.w3.org/1999/xhtml" >
     <head runat="server">
     <title>Google Maps Markers</title>
     <script type="text/javascript"
          src="https://maps.googleapis.com/maps/api/js?key=Your_API_KEY&sensor=false">
     </script>

     <script type="text/javascript">
          function initialize() {
               // Set map properties
               var mapOptions = {
                    center: new google.maps.LatLng(28.3213, 77.5435),
                    zoom: 4,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
               };

               // Create map
               var myMap = new google.maps.Map(document.getElementById("mapArea"),
                           mapOptions);

               // Create marker
               var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(28.3213, 77.5435),
                    map: myMap,  // Specify the map to add this marker to
                    title:"I am here"
               });
          }
     </script>
</head>
<body onload="initialize()">
     <form id="form1" runat="server">
          <div id="mapArea" style="width: 500px; height: 500px;">
          </div>
     </form>
</body>
</html>

Here, first a simple map is created with given “mapOptions” as in my last article “Adding Google Maps to your website” and then a marker object is created using google.maps.Marker class. Marker’s position is set to a LatLng object using “position” property, then its “map” property is set to “myMap” and its title is set using “title” property which is shown on mouse over of the marker.

Leave a Reply

Your email address will not be published. Required fields are marked *