How to add markers in Google Maps

By | June 16, 2013


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


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="" >
<head runat="server">
    <title>Google Maps Markers From Database</title>
      <script type="text/javascript"
      <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"),

              // 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"
<body onload="initialize()">
    <form id="form1" runat="server">
         <div id="mapArea" style="width: 500px; height: 500px;">

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 *