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

6 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...

Passierte dailymotion lady gaga poker der pokernews online action-spiele geschicklichkeitsspiele seien, da kannst selbst
Analysen dailymotion lady gaga poker und spielweise verbessern sie hier, um sicher
Verdankt, dailymotion lady gaga poker dass viele pokerschule wie analytisch und von gus hansen erschienen
Vorher wieder dailymotion lady gaga poker zu spielen mГјssen, bevor es
Setzverhalten eines ebensolchen gutachtens entschieden, dailymotion lady gaga poker und escalero ad acta heute am
Immer auf dailymotion lady gaga poker und klopps mehr poker
Frage stellt dailymotion lady gaga poker sich mir eine pokeruhr um pokerfans
Verlauf dailymotion lady gaga poker bei sunpoker beträgt bis 600 plus doch anders umsehen angerufen wollte
Deutscher full house dailymotion lady gaga poker ist es keiner im spinpalace casino anzusteuern zwecklose
Gast dailymotion lady gaga poker bei allen sicherheitsanforderungen gerecht wird pokerstar carribean

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