• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Dodanie dymka informacyjnego do markera w Google Maps

Object Storage Arubacloud
0 głosów
453 wizyt
pytanie zadane 20 lipca 2018 w JavaScript przez Michał Samolewski Bywalec (2,240 p.)

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! :)

1 odpowiedź

+1 głos
odpowiedź 20 lipca 2018 przez ScriptyChris Mędrzec (190,190 p.)

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.

komentarz 20 lipca 2018 przez Michał Samolewski Bywalec (2,240 p.)
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ć
komentarz 20 lipca 2018 przez ScriptyChris Mędrzec (190,190 p.)

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.

Podobne pytania

0 głosów
1 odpowiedź 760 wizyt
pytanie zadane 31 maja 2018 w Bezpieczeństwo, hacking przez seith Nowicjusz (160 p.)
0 głosów
1 odpowiedź 123 wizyt
pytanie zadane 8 grudnia 2019 w JavaScript przez antypop Mądrala (5,730 p.)
0 głosów
0 odpowiedzi 122 wizyt
pytanie zadane 14 lutego 2019 w JavaScript przez Grzegorz Mikina Dyskutant (8,060 p.)

92,684 zapytań

141,589 odpowiedzi

320,073 komentarzy

62,044 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...