How to show InfoWindow on Marker’s click in Google Maps

Introduction

Here, I will explain how to display an InfoWindow after clicking on a Marker in Google Maps

Google Maps Info Window - Mozilla Firefox_2013-06-30_13-54-05
Description

Using InfoWindow we can display some content on the map pointing to a place. Content of InfoWindow can be simple text, HTML or DOM element. google.maps.InfoWindow class is used to create an InfoWindow. An InfoWindow can be attached to a Marker that will be displayed on clicking on the Marker or it can be displayed at a specified location.

Here, first we will add a Marker on the map and then we will attach click event to the Marker to open an InfoWindow with some HTML contents.

Example

var infotext="InfoWindow contents";

var infowindow = new google.maps.InfoWindow();
infowindow.setContent(infotext);

google.maps.event.addListener(marker, 'click', function() {
     infowindow.open(map, marker);
});

Here, first we declared a variable infotext that contains contents to be displayed in the InfoWindow. Then we created an InfoWindow object using google.maps.InfoWindow class. Then we set content of the InfoWindow using setContent method of the InfoWindow class. Finally we added ‘click’ event to a previously created marker object and called open method of the InfoWindow class to display the InfoWindow. open method takes two parameters, map object and marker object. InfoWindow can also be displayed at a specified location using setPosition method of the InfoWindow class.

Compelete Code

<!DOCTYPE html>
<html>
<head runat="server">
     <title>Google Maps Info Window</title>

     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=Your_Map_Key&sensor=false">
     </script>

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

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

               var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(28.3213, 77.5435),
                    title: "New Delhi"
               });

               marker.setMap(map);

               var infotext = "<div><div style='float:left;'>" +
                    "<span style='font-size:18px;font-weight:bold;'>New Delhi</span><hr>" +
                    "New Delhi is the capital of the Republic of India, <br>" +
                    "and the seat of executive, legislative, and judiciary <br>" +
                    "branches of the Government of India. It also serves <br>" +
                    "as the centre of the Government of the National <br>" +
                    "Capital Territory of Delhi.<a href='http://en.wikipedia.org/wiki/New_Delhi' " +
                    "style='text-decoration:none;color:#cccccc;font-size:10px;'> Wikipedia</a>" +
                    "</div><div style='float:right; padding:5px;'><img src='" +
                    "http://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/" +
                    "India_Gate_clean.jpg/100px-India_Gate_clean.jpg'>" +
                    "</img></div></div>";

               var infowindow = new google.maps.InfoWindow();
               infowindow.setContent(infotext);

               google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map, marker);
               });
          }
     </script>
</head>
<body onload="initialize()">
     <div id="myMap" style="width: 600px; height: 500px; margin-top: 20px;">
     </div>
</body>
</html>

Leave a Reply

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