Zmiana wyglądu ikon znaczników na mapie google

Tworzone na mapie google znaczniki – markery mogą mieć dowolny wygląd.
Google oferuje spory zestaw ikon za pomocą których możemy bardzo dokładnie zdefiniować właściwości danego punktu.
W tym ćwiczeniu przedstawiam sposób w jaki można tego dokonać.

Podobnie jak w poprzednim ćwiczeniu, nowe elementy podświetlam na czerwono.

<!DOCTYPE html>
<html>
 <head>
 <title>Zmiana ikon znaczników na mapie google - gmaps_podstawy_0003.html</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
 </head>
 <body onload="uruchomGmaps()">
 <script type="text/javascript">
 
 <span style="color: #ff0000;">//stworzenie globalnego obiektu mapy</span>
<span style="color: #ff0000;"> var mapa;</span>
 
<span style="color: #ff0000;"> //funkcja odpowiedzialna za umieszczenie znacznika</span>
<span style="color: #ff0000;"> function umiescZnacznik(wlasciwosciZnacznika){</span>
<span style="color: #ff0000;"> wlasciwosciZnacznika.map = mapa;</span>
<span style="color: #ff0000;"> var znacznik = new google.maps.Marker(wlasciwosciZnacznika);</span>
<span style="color: #ff0000;"> }</span>
 
 function uruchomGmaps(){
 var wspolrzednePoczatkowe = new google.maps.LatLng(59.11, 19.7);
 var startoweOpcjeMapy = {
 zoom:10,
 center: wspolrzednePoczatkowe,
 mapTypeId: google.maps.MapTypeId.SATELLITE
 };
 
 mapa = new google.maps.Map(document.getElementById("googleMapa"), startoweOpcjeMapy);
 
 <span style="color: #ff0000;">//określenie podstawowych właściwości ikon</span>
<span style="color: #ff0000;"> var wielkosc = new google.maps.Size(32,32);</span>
<span style="color: #ff0000;"> var wielkosc_cienia = new google.maps.Size(59,32);</span>
<span style="color: #ff0000;"> var punkt_tworzenia = new google.maps.Point(0,0);</span>
<span style="color: #ff0000;"> var punkt_zaczepienia = new google.maps.Point(16,16);</span>
 
<span style="color: #ff0000;"> //ustalenie zestawu ikon</span>
<span style="color: #ff0000;"> ikonaA = new google.maps.MarkerImage(</span>
<span style="color: #ff0000;"> "http://maps.google.com/mapfiles/kml/pal2/icon38.png", wielkosc, punkt_tworzenia, punkt_zaczepienia</span>
<span style="color: #ff0000;"> );</span>
<span style="color: #ff0000;"> ikonaB = new google.maps.MarkerImage(</span>
<span style="color: #ff0000;"> "http://maps.google.com/mapfiles/kml/pal4/icon23.png", wielkosc, punkt_tworzenia, punkt_zaczepienia</span>
<span style="color: #ff0000;"> );</span>
<span style="color: #ff0000;"> ikonaC = new google.maps.MarkerImage(</span>
<span style="color: #ff0000;"> "http://maps.google.com/mapfiles/kml/pal3/icon13.png", wielkosc, punkt_tworzenia, punkt_zaczepienia</span>
<span style="color: #ff0000;"> );</span>
 
<span style="color: #ff0000;"> var cienA = new google.maps.MarkerImage(</span>
<span style="color: #ff0000;"> "http://maps.google.com/mapfiles/kml/pal2/icon38s.png", wielkosc_cienia, punkt_tworzenia, punkt_zaczepienia</span>
<span style="color: #ff0000;"> );</span>
<span style="color: #ff0000;"> var cienB = new google.maps.MarkerImage(</span>
<span style="color: #ff0000;"> "http://maps.google.com/mapfiles/kml/pal4/icon23s.png", wielkosc_cienia, punkt_tworzenia, punkt_zaczepienia</span>
<span style="color: #ff0000;"> );</span>
<span style="color: #ff0000;"> var cienC = new google.maps.MarkerImage(</span>
<span style="color: #ff0000;"> "http://maps.google.com/mapfiles/kml/pal3/icon13s.png", wielkosc_cienia, punkt_tworzenia, punkt_zaczepienia</span>
<span style="color: #ff0000;"> );</span>
 
<span style="color: #ff0000;"> //dodawanie nowych markerów do mapy</span>
<span style="color: #ff0000;"> umiescZnacznik({ </span>
<span style="color: #ff0000;"> position: new google.maps.LatLng(59.12, 19.81), </span>
<span style="color: #ff0000;"> title: 'Miejsce A', </span>
<span style="color: #ff0000;"> icon: ikonaA, </span>
<span style="color: #ff0000;"> shadow: cienA })</span>
<span style="color: #ff0000;"> umiescZnacznik({ </span>
<span style="color: #ff0000;"> position: new google.maps.LatLng(59.11, 19.7), </span>
<span style="color: #ff0000;"> title: 'Miejsce B', </span>
<span style="color: #ff0000;"> icon: ikonaB, </span>
<span style="color: #ff0000;"> shadow: cienB })</span>
<span style="color: #ff0000;"> }</span>
 
 &lt;/script&gt;
 &lt;div&gt;Zmiana ikon znaczników na mapie google - gmaps_podstawy_0003.html&lt;/div&gt;
 &lt;div id="googleMapa" style="width:700px; height: 500px; border: 1px solid #000; background: #efefef;"&gt;
 &lt;!-- miejsce na google maps --&gt;
 &lt;/div&gt;
 &lt;/body&gt;
&lt;/html&gt;

 

Leave a Reply