How to use infowindow in google maps javascript api with example


          In the last blog we went through an in depth discussion about how to add markers to a Google map, which we built in to our website as per our requirements,
this article is the continuation of the previous article (How to place markers on Google maps using google maps JavaScript API with example) , please make sure you read the previous article before reading this.

What is an InfoWindow?
        An InfoWindow displays information, generally text or images in a popup window above the map, at a given location. The infowindow has a content area and a tapered stem. The tip of the stem is attached to a specified location on the map.

Why to use InfoWindow?
          If you go through our previous article about markers, it says that markers are used to Intuitively display location to our users, but it doesn't display any information, it can show either title, location but nothing else, Ask yourselves what if you want to display information like open and closing timings, phone number etc., Infowindow comes to our rescue.

How to add Infowindow?
          InfoWindow is added by creating an InfoWindow object and adding it to the map, InfoWindow object can be created by using google.maps.InfoWindow constructor, an object giving the properties of the InfoWindow is passed to google.maps.InfoWindow object.

Let us create an infowindow object with string as "Hello, Internet!!"

var infowindow;
//declare infowindow as global variable.
var contentString = '<h1>' + 'Hello,Internet!!' + '</h1>' + '<img src = http://i.onionstatic.com/avclub/5329/27/16x9/640.jpg>';
infowindow = new google.maps.InfoWindow({
      content: contentString
 });

Declare the above code inside initMap function because we want infowindow object to be available all through our javascript code, I told you in the very first article that initMap() function is like the main function of the C program, so declaring here will ensure that infowindow object is created at the start of the program and it is available to the rest of the javascript program.

Inside the showmarker() function add the following code.

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

Finally javascript part of our webapp looks like this !!!

<script>
// javascript program starts from here
var location_1;
var map;
var markerpos;
var marker;
var infowindow;

function initMap()
{
location_1 = new google.maps.LatLng(16.5062, 80.6480);
       map = new google.maps.Map(document.getElementById('mapdivid'), {
        center: location_1,
        zoom: 13
    });
var contentString = '<h1>' + 'Hello,Internet!!' + '</h1>' + '<img src = http://i.onionstatic.com/avclub/5329/27/16x9/640.jpg>';


    infowindow = new google.maps.InfoWindow({
      content: contentString
    });
}
function checkclick(){
if(document.getElementById('showmarker').checked)
{
showmarker();
}
else
{
clearmarker();
}
}
function showmarker()
{
markerpos = new google.maps.LatLng(16.5062, 80.6480);
marker = new google.maps.Marker({
    position: markerpos,
    map: map,
    title: 'center of map'
  });
  //markerpos is set to the same coordinates as that of map options position
  //position takes position of the marker
  //map is the Map onto which marker should be displayed
  //title is the title of the marker
  marker.addListener('click', function() {
    infowindow.open(map, marker);
});
}
function clearmarker()
{
marker.setMap(null);
//this clears marker by telling it to display on "null"
}
//End of the JavaScript program

Why did you declare Infowindow variable globally rather than locally?
          If you go through showmarker() function then you can see that we are using infowindow, so if you declared it locally then it would be created and destroyed in the function.

What does addListener() method of the marker object do?
         Let me tell you with an example, imagine you are in your home and your father told you, that your relative is coming, please keep an eye on the door as he is busy with his office work, so essentially you are the listener to the door bell, if the relative is at the door you're the one that will respond.
        This example might be too cheesy but I hope you got the point. so essentially what we are doing is we are adding a listener to the marker, so whenever our user clicks on the marker, the listener calls the function that we specified as a parameter to the addListener() function, inside the function it tells infowindow to show up on the map at position of the marker, overall it appears as if infowindow pops up from the marker.

The final result of the above code will look like this. Hope this tutorial explains how to place info Window in google map along with image..



Reactions:

0 comments :

Post a Comment