Niestandardowy infoWindow w google maps

Pewnie nie raz chcieliście zmienić standardowy dymek infoWindow na coś ładniejszego własnego pomysłu. Opiszę jak to zrobić korzystając z dodatkowej biblioteki infobox. Użycie jej jest bardzo proste. Wystarczy załączyć plik javascript z biblioteką na swojej stronie. Nie zapomnijmy również o załączaniu api googla.

var lat = 52.229676, lon = 21.012229;
//opcje mapy
var mapOptions = {
	center: new google.maps.LatLng(lat, lon),
	zoom: 4,
	mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
//marker
var marker = new google.maps.Marker({
	position: new google.maps.LatLng(lat, lon)
});
marker.setMap(map);

//obsługa zdarzenia kliknięcia na marker
google.maps.event.addListener(marker,"click",function()
{
	var boxText = document.createElement("div");
	//style css infoboxa
	boxText.style.cssText = "margin-top: 5px; padding: 5px;text-align: center;";
	//zawartość dymka
	boxText.innerHTML = '<div style="height:30px;margin-left: 7px;width: 230px;font-size: 12px; font-weight:bold;">City Hall, Sechelt - British Columbia</div><img style="width:130px;" src="img/photo.jpg">';
	//opcje
	var myOptions = {
		content: boxText
	   ,disableAutoPan: false
	   ,maxWidth: 0
	   ,pixelOffset: new google.maps.Size(-130, -170)
	   ,zIndex: null
	   ,boxStyle: {
		 background: "url('img/tooltip.png') no-repeat"
		 ,opacity: 1
		 ,width: "257px"
		 ,height: "160px"
		}
	   ,closeBoxMargin: "-7px -7px 0 0"
	   ,closeBoxURL: "img/close.png"
	   ,infoBoxClearance: new google.maps.Size(1, 1)
	   ,isHidden: false
	   ,pane: "floatPane"
	   ,enableEventPropagation: false
	};

	var ib = new InfoBox(myOptions);
	ib.open(map, marker);
});

<div id="map" style="width:500px; height:350px;"></div>

• Powyższy przykład
• Przykłady wykorzystania
• API Reference