Dodanie dymka informacyjnego do markera w Google Maps

Question

Witam, 

posiadam na stronie skrypt JS wstawiający mapę z Google Maps oraz dodający na tę mapę markery. Jest to gotowy skrypt skopiowany z internetu, gdyż w JS jestem kompletnie zielony. Moje pytanie brzmi: jak zmodyfikować podany kod, żeby po kliknięciu na te markery pojawiały się obok nich dymki informacyjne takie jak tu:

Kod JS:

<script type="text/javascript">
    		<!--
    			var mapa; // obiekt globalny

    			function dodajMarker(opcjeMarkera)
    			{
    				opcjeMarkera.map = mapa;
    				var marker = new google.maps.Marker(opcjeMarkera);
    			}

    			function mapaStart()
    			{
    				var wspolrzedne = new google.maps.LatLng(51.279332,17.987423);
    				var opcjeMapy = {
    					zoom: 16,
    					center: wspolrzedne,
    					mapTypeId: google.maps.MapTypeId.MAP
    				};
    				mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy);

    				// wspólne cechy ikon
    				var rozmiar = new google.maps.Size(32,32);
    				var rozmiar_cien = new google.maps.Size(59,32);
    				var punkt_startowy = new google.maps.Point(0,0);
    				var punkt_zaczepienia = new google.maps.Point(16,16);

    				// ikonki
    				var ikona1 = new google.maps.MarkerImage("https://maps.google.com/mapfiles/kml/pal2/icon38.png", rozmiar, punkt_startowy, punkt_zaczepienia);
    				var ikona2 = new google.maps.MarkerImage("https://maps.google.com/mapfiles/kml/pal4/icon23.png", rozmiar, punkt_startowy, punkt_zaczepienia);
    				var ikona3 = new google.maps.MarkerImage("https://maps.google.com/mapfiles/kml/pal3/icon13.png", rozmiar, punkt_startowy, punkt_zaczepienia);

    				var cien1 = new google.maps.MarkerImage("https://maps.google.com/mapfiles/kml/pal2/icon38s.png", rozmiar_cien, punkt_startowy, punkt_zaczepienia);
    				var cien2 = new google.maps.MarkerImage("https://maps.google.com/mapfiles/kml/pal4/icon23s.png", rozmiar_cien, punkt_startowy, punkt_zaczepienia);
    				var cien3 = new google.maps.MarkerImage("https://maps.google.com/mapfiles/kml/pal3/icon13s.png", rozmiar_cien, punkt_startowy, punkt_zaczepienia);

    				dodajMarker({position: new google.maps.LatLng(lat,lng), title: 'Restauracja #1', icon: ikona1, shadow: cien1});
    				dodajMarker({position: new google.maps.LatLng(53.3902,14.7202), title: 'Restauracja #2', icon: ikona1, shadow: cien1});
    	      dodajMarker({position: new google.maps.LatLng(53.4101,14.6033), title: 'Myjnia', icon: ikona2, shadow: cien2});
    	      dodajMarker({position: new google.maps.LatLng(53.4014,14.5104), title: 'Tu byłem 6 razy', icon: ikona3, shadow: cien3});

    			}
          </script>

Proszę o pomoc i pozdrawiam forumowiczów! :)

Answer 1

W dokumentacji Google Maps API jest przykład: https://developers.google.com/maps/documentation/javascript/examples/place-details

Konkretnie, interesuje Cię metoda google.maps.event.addListener.

Comments

Właśnie znalazłem już tę metodę, ale siedzę od pół godziny i kompletnie nie umiem ogarnąć gdzie tę metodę umieścić i jak ją potem wywołać

---

Zapoznałeś się z podlinkowanym przykładem? Pierwszy argument listenera to referencja do markera - tworzysz taki w funkcji dodajMarker. Następnie nazwa zdarzenia, na które wywołany zostanie callback oraz (jako trzeci parametr) sam callback. W funkcji możesz utworzyć okienko informacyjne lub skorzystać z już wcześniej przygotowanego (tak jest w przykładzie), następnie ustalasz sobie treść dla tego okienka i je pokazujesz.