Dodawanie znaczników na mapę
API Google Maps umożliwia dodania do mapy w teorii* nieograniczonej liczby obiektów punktowych - znaczników. Umożliwiwają one oznaczenie na mapie pewnych miejsc. Na co będą wskazywać jest zależne jedynie od Twojej wyobraźni. Znaczniki - zwane inaczej markerami - posiadają wiele cech, które czynią je bardzo użytecznymi. W tej części pokazany zostanie sposób tworzenia i wstawiania ich na mapę.
* - ich liczba ograniczona jest co najwyżej zasobami pamięci komputera
Stworzenie markera
Do stworzenia markera używamy klasy Marker. Ogólna składnia wygląda następująco:
var marker = new google.maps.Marker(opcje);
gdzie opcje to obiekt, w notacji o składni {nazwa_opcji_1: wartość_opcji_1, nazwa_opcji_2: wartość_opcji_2 .... , nazwa_opcji_n: wartość_opcji_n}, o następującej strukturze:
var opcje =
{
position: pozycja_markera,
map: odwolanie_do_mapy,
title: tytul_markera
}
gdzie pozycja_markera to pewien punkt LatLng, odwolanie_do_mapy to jak sama nazwa mówi odwołanie do mapy Map, a tytul_markera to zwykły string.
Umieszczenie markera na mapie
W APIv2 marker trzeba było wstawić "ręcznie" na mapę, w APIv3 proces ten jest zautomatyzowany. Fragment działającego kodu, dodający znacznik na mapę wyglądać może następująco:
var punkt = new google.maps.LatLng(53.400,14.400); // definiujemy punkt o współrzędnych 53.400,14.400
var opcjeMarkera =
{
position: punkt,
map: mapa,
title: 'Pierwszy marker!'
}
var marker = new google.maps.Marker(opcjeMarkera);
Niektóre przydatne opcje markerów
Oprócz standardowych ustawień, w obiekcie opcjeMarkera można ustawić kilka właściwości, które spowodują interesujące działanie markera. Najważniejsze cztery to:
- clickable - jeśli false, to markera nie można kliknąć (domyślnie true)
- draggable - jeśli true, to marker może być przeciągany za pomocą myszy (domyślnie false)
- visible - jeśli false, to marker nie jest widoczny
- icon - określa ikonę, która zostanie użyta dla markera (zostanie to wyjaśnione później)
Przykład 1
Stwórzmy nasz pierwszy marker. Pełny kod wygląda następująco:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">@import "/style/Przyklad.css";</style>
<title>Przykład</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body onload="mapaStart()">
<script type="text/javascript">
<!--
var mapa; // obiekt globalny
function mapaStart()
{
// tworzymy mapę satelitarną i centrujemy w okolicy Szczecina na poziomie zoom = 10
var wspolrzedne = new google.maps.LatLng(53.41935400090768,14.58160400390625);
var opcjeMapy = {
zoom: 10,
center: wspolrzedne,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy);
// stworzenie markera
var punkt = new google.maps.LatLng(53.400,14.600);
var opcjeMarkera =
{
position: punkt,
map: mapa,
title: "Pierwszy marker!"
}
var marker = new google.maps.Marker(opcjeMarkera);
}
-->
</script>
<div id="mapka" style="width: 700px; height: 500px; border: 1px solid black; background: gray;">
<!-- tu będzie mapa -->
</div>
<p id="info">
Pierwszy marker, stworzony w Google Maps API v3
</p>
</body>
</html>
Zobacz efekt działania w przykładzie 1: przykład 1pokaż kod przykładu
Przykład 2
W przykładzie 2 na mapę wstawimy 4 markery. Napisana zostanie też funkcja do dodawania markerów - w kolejnych lekcjach zobaczysz, że upraszcza to kod oraz ułatwia implementację pozostałych rzeczy.
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">@import "/style/Przyklad.css";</style>
<title>Przykład</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body onload="mapaStart()">
<script type="text/javascript">
<!--
var mapa; // obiekt globalny
function dodajMarker(lat,lon,opcjeMarkera)
{
// tworzymy marker z współrzędnymi i opcjami z argumentów funkcji dodajMarker
opcjeMarkera.position = new google.maps.LatLng(lat,lon);
opcjeMarkera.map = mapa; // obiekt mapa jest obiektem globalnym!
var marker = new google.maps.Marker(opcjeMarkera);
}
function mapaStart()
{
var opcjeMapy =
{
center: new google.maps.LatLng(53.41935400090768,14.58160400390625),
zoom: 10,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy);
// ten marker będzie przesuwalny
dodajMarker(53.400,14.700,{title: 'Przeciągnij mnie', draggable: true});
// ten marker nie będzie klikalny
dodajMarker(53.400,14.600,{title: 'Jestem nieklikalny', clickable: false});
// to będzie zwykły marker z tooltipem
dodajMarker(53.400,14.500,{title: 'Jestem zwykłym markerem'});
// ...a to zwykły bez tooltipa
dodajMarker(53.400,14.400,{});
}
-->
</script>
<div id="mapka" style="width: 700px; height: 500px; border: 1px solid black; background: gray;">
<!-- tu będzie mapa -->
</div>
<p id="info">
Na mapę wstawiono cztery markery o różnych cechach. Pierwszy od lewej to marker zwykły, bez żadnego opisu. Drugi marker posiada opis (po najechaniu myszą). Trzeci marker jest nieklikalny - aplikacja nie przechwytuje kliknięć na nim. Ostatni marker jest przesuwalny - wciśnij i przytrzymaj lewy przycisk myszy na nim, a następnie przeciągnij i upuść w dowolnym miejscu.
</p>
</body>
</html>
Powyższy przykład dostępny jest jako przykład 2
przykład 2pokaż kod przykładu
Na mapie pojawiły się cztery markery z czerwoną, domyślną ikonką. Marker:
- pierwszy od lewej to zwykły marker, bez ustawionych żadnych opcji
- drugi od lewej to zwykły marker, z ustawionym tytułem (przytrzymaj nad nim mysz, aby zobaczyć efekt)
- trzeci od lewej to marker, który jest nieklikalny. Kursor nad nim nie przybiera postaci tzw. "łapki", kliknięcie nie generuje żadnych zdarzeń (więcej w kolejnych działach)
- ostatni marker to marker przesuwalny - kliknij i przytrzymaj lewy klawisz myszy nad markerem a następnie przeciągnij go w dowolne miejsce mapy
Uwagi
- W powyższym przykładzie dodana została funkcja dodajMarker, w celu uproszczenia zapisu dodawania pojedynczego markera.
- Jak dotąd, nie została użyta opcja icon. Użycie ikon będzie tematem trzeciej części kursu.
Z lekcji trzeciej dowiesz się, jak tworzyć markery o innych ikonkach niż ta standardowa
Przejdź do kolejnej części kursu
Tytuł następnej części kursu to Zmiana domyślnej ikony znacznika