Tuesday, October 17, 2006

Using Google Maps API - Part.4: Info Window

Let's add more functions on the SFO map example.

Opening a Info Window

To create a basic baloon-like floating "info window", call the openInfoWindow(htmlElement) method, passing it a location and a DOM element as an argument to create a text node.

map.openInfoWindow(new GLatLng(37.622934, -122.392159),
                   document.createTextNode("SFO"));

or, use similar method openInfoWindowHtml(htmlString) which takes an HTML string as its argument rather than a DOM element.

map.openInfoWindowHtml(
 new GLatLng(37.622934, -122.392159), "SFO");

Opening a Info Window on Click

Simply calling these methods above just display the info windows upon loading the map. If you want the info window opened by clicking a marker, you need to use event listeners. The static method, GEvent.addListener takes a marker as the 1st argument, the event as the 2nd argument, and a function as the 3rd argument. The events provided by GMap2 Class include; click, infowindowopen and infowindowclose. To open a info window on click, write:

GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml("SFO<br/>CA 94128");
    });

Finally, to give the event to the custom icon previously made, create a new function to combine both displaying the icon and call the click event. The function createMarker takes four arguments, latitude, longitude, icon image URL, and description (html).

In addition to the GIcon properties previously set, define infoWindowAnchor and infoShadowAnchor as well.
var desc_sfo ="SFO - San Francisco Intl Airport<br/>CA 94128";
var marker_sfo = createMarker(37.622934, -122.392159, "icons/sfo.png", desc_sfo);
map.addOverlay(marker_sfo);

function createMarker(lat, lng, ico, html) {
 var point = new GLatLng(lat, lng);
 
 if (ico!=null) {
  var icon = new GIcon();
  icon.image = ico;
  icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
  icon.iconSize = new GSize(26, 44);
  icon.shadowSize = new GSize(50, 44);
  icon.iconAnchor = new GPoint(13, 44);
  icon.infoWindowAnchor = new GPoint(9, 2);
  icon.infoShadowAnchor = new GPoint(18, 25);
 }
 var marker = new GMarker(point, icon);
 GEvent.addListener(marker, 'click', function() {
  marker.openInfoWindowHtml(html);
  });
  return marker;
}

See also: Google Maps API Version 2 Reference

5 comments:

Anonymous said...

...please where can I buy a unicorn?

Anonymous said...

Absolutamente con Ud es conforme. Me gusta esta idea, por completo con Ud soy conforme. http://nuevascarreras.com/comprar-cialis-es/ cialis y alcohol Non sprecare parole superflue. cialis dosis recomendada dbvtytekac [url=http://www.mister-wong.es/user/COMPRARCIALIS/comprar-viagra/]comprar cialis[/url]

Anonymous said...

torebki skórzane
to torebki zamszowe , torebki damskie skórzane , david jones torebki . torebki online , torebki david jones ?

Anonymous said...

Wrcgbortg [url=http://is.gd/0Js4N7]old navy coupons[/url] pSooorboppspp

Anonymous said...

I am extгemely impressеd with youг wгiting talents anԁ
also with the structure οn your blog. Is that this а paid subject matter οr did уоu customize it your sеlf?
Еither wаy ѕtау up thе nice high quality writing, it's uncommon to look a nice weblog like this one these days..

Feel free to visit my weblog :: tens pain relief