Infowindows and google maps.
-
When we place markers on google maps we have the ability to publish more information about the location what the markers represent.
We can publish quite a lot of information in infowindows. Data and description about the actual location is the basic but apart from that we can place images videos ,reduced size maps or streetview images about the location. -
Infowindows are assigned to markers not to the map itself. If we want to us ein fowindows first of all we have to create an infowindow object like this: var infowindow = new google.maps.InfoWindow({ content:html });
We have to define the content of the infowindow. If we have a look at the code above we can see the content:html where html is a variable which is set as : var html = ‘this is an infowindow’;
If we click on the marker ‘this is an infowindow ‘ will be displayed. -
As we can see the infowindow opens if we click on the marker.The code responsibile for this action is the following: google.maps.event.addListener(marker, ‘click’, function() { infowindow.open(map,marker)});. If we analize this statement we can find the ‘click’ event defined. If we want the infowindow to open on a different event allwe have to do is to replace ‘click’ with one of the following:dblclick, mousedown, mousemove, mouseout ,mouseover, mouseup, rightclick
-
The variable ‘html‘ which is the contend of th infowindow can be customized as a html element. We can place a ‘div’ or other element like headings, paragraphs links images in it.
