Logo Net For You
Mapy google

Mapy google

Wprowadzenie do map google

Czym są mapy google i jak działają?

Mapy google to połączenie HTML, CSS i JAVASCRIPT oraz obrazków, które są wczytywane dynamiczne za pomocą technologii AJAX. Natomiast Google API to zbiór klas, które udostępniają metody oraz właściwości, przy pomocy których mamy wpływ na wygląd mapy, reakcję na zdarzenia oraz dostęp do danych.

Tworzymy pierwszą mapę

Utwórzmy znacznik div o identyfikatorze "map". Właśnie tu będzie zamieszczona nasza mapa.

<div id="map"></div>

Następnie nadajmy mu styl.

#map {
width: 100%;
height: 600px;
border: 1px solid #999;
}

Pamiętajmy o nadaniu naszemu kontenerowi #map przynajmniej wysokości. W przeciwnym razie nasza mapa nie będzie widoczna, ponieważ wartość height będzie ustawiona na 0.

Następnie w znaczniku <head> umieszczamy odwołanie do API Google:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

W adresie tym musimy przekazać również zmienną sensor i nadać jej wartość true lub false. Czyli określić , czy w urządzeniu na którym będzie wyświetlana mapa ma możliwości geolokalizacyjne np. GPS Wartość false oznacza, że urządzenie nie ma takiej możliwości. Najczęściej urządzenia typu tablet, telefon posiadają wbudowane nadajniki GPS.

Ok, przejdźmy więc do tworzenia mapy. Potrzebujemy utworzyć instancję obiektu google.maps.Map. Google koszysta z przestrzeni nazw, czyli w tym przypadku przestrzenią nazw będzie google.maps. Dlatego dobrym rozwiązaniem jest utworzenie referencji, tak aby za każdym razem nie wpisywać pełnej nazwy:

var api = google.maps;

Definicja konstruktora mapy:

Map(mapDiv:node, opts?MapOptions) pierwszysm argumentem jest referencja do elementu HTML, drugim literał, który zawiera początkowe ustawienia mapy, tj. zoom

Aby pobrać kontener #map skorzystamy z metody:

var mapDiv = document.getElementById('map');

MapOptions posiada wiele właćsiwości, natomiast 3 są wymagane.

  • center - definiuje centrum mapy, przyjmuje koordynaty typu google.maps.LatLng.
  • zoom - początkowy zoom mapy, przyjmuje wartości od 1 do 23
  • mapTypeId - typ mapy, np. google.maps.MapTypeId.ROADMAP (mapa drogowa)

Tak jak wspomnieliśmy powyżej właściwość center przyjmuje koordynaty, które są typu google.maps.LatLng. Definicja konstruktora google.maps.LatLng wygląda tak:

LatLng(lat: number, lng:number,noWrap?boolean) - latitude (szerokość geograficzna), longitude (długość geograficzna).

Współrzędne możemy uzyskać np. ze strony: http://itouchmap.com/latlong.html, wpisujemy adres i wciskamy przycisk "GO". Jako wynik otrzymamy współrzedne goograficzne. Współrzędne jednej z naszych siedzib, która mieści się w Lublinie przy ulicy Ignacego Rzeckiego 3 wynoszą:

  • Latitude: 51.234716
  • Longitude: 22.535251

<script>
window.onload = function() {
var mapDiv = document.getElementById('map');
var api = google.maps;
var latlng = new api.LatLng(51.234716, 22.535251);
var options = {
center: latlng,
zoom: 16,
mapTypeId: api.MapTypeId.ROADMAP
};
var map = new api.Map(mapDiv, options);
}
</script>

cały nasz kod umieściliśmy w zdarzeniu onload, które spowodujem, że nasz kod zostanie uruchomiony w trakcie ładowania strony, ale na samym końcu, kiedy wszystkie poostałe elementy zostaną już wczytane.

Opcje mapy

W poprzednim przykładzie skorzystaliśmy, tylko z trzech właściwości obiektu MapOptions. Pełną dokumentację oraz opis obiektu MapOptions znajdziemy na stronie dokumantacji google: https://developers.google.com/maps/documentation/javascript/reference#MapOptions. Instrukcja jak korzystać z dokumentacji zamieszczona zostanie na końcu tego tutorialu.

Kontrolowanie interfejsu użytkownika. Poniżej opiszemy kilka włąsciwości, przy pomocy którch możemy kontrolować interfejs użytkownika.

disableDefaultUI

Ustawiając tą właściwość na true, wszystkie kontrolki sterujące nie będą dostępne.

var options = {
zoom: 3,
center: new google.maps.LatLng(51.234716, 22.535251),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};

zdjęcie przedstawiające mapy bez kontrolek

mapTypeControl

var options = {
zoom: 16,
center: new google.maps.LatLng(51.234716, 22.535251),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true
};

kontrolki typy mapy

disableDoubleClickZoom

Jeśli nie chcemy, aby podwójne kliknięcie powiększało wartość zoom, możemy je wyłączyć, poprzez nadanie wartości true, właściwości disableDoubleClickZoom

var options = {
zoom: 3,
center: new google.maps.LatLng(51.234716, 22.535251),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDoubleClickZoom: true
};

draggable

Jeśli nie chcemy, aby mapa miała możliwość przesuwania poprzez przeciąganie musimy przypisać właściwości draggable wartość false. Domyślnie jest to wartość true.

var options = {
zoom: 3,
center: new google.maps.LatLng(51.234716, 22.535251),
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: false
};

noClear

Domyślnie w trakcie wczytywania mapy, zawartość kontenera #map jest usuwana. Możemy jednak temu zapobiec ustawiając właściwości noClear wartość true.

var options = {
zoom: 3,
center: new google.maps.LatLng(51.234716, 22.535251),
mapTypeId: google.maps.MapTypeId.ROADMAP,
noClear: true
};

Ustawianie opcji mapy za pomocą metod.

Do tej pory opcje mapy ustawialiśmy w trakcie jej tworzenia. Co jednak jeśli chcielibyśmy ustawić je po wczytaniu mapy. Musimy wtedy skorzystać z innego rozwiazania. Z pomocą przychodzą nam metody. Jedną z takich metod jest setOptions().

setOptions

var options = {
zoom: 12
};
map.setOptions(options);

Tą metodą możemy zmienić prawie wszystkie opcje mapy, oprócz tych 3:

• backgroundColor
• disableDefaultUI
• noClear

getZoom oraz setZoom

Pierwsza metoda pobiera warość właściwości zoom, natomiast druga ustawia włąsciwość zoom.

var zoomLevel = map.getZoom();
map.setZoom(12);

getCenter oraz setCenter

var center = map.getCenter();
setCenter(latlng:LatLng);

setCenter przyjmuje atrybut typu LatLng

Oznaczanie miejsca na mapie przy użyciu markera.

Marker to zazwyczaj mały obrazek przy pomocy, którego oznaczone jest pewne miejsce na mapie. Aby utworzyć marker musimy skorzystać z obiektu google.maps.Marker. Przyjmuje on tylko jeden parametr typu google.maps.MarkerOptions. MarkerOptions ma kilka właściwości dwie są jednak wymagane:

  • position - współrzędne miejsca, w którym znajdzie się marker typu google.maps.LatLng
  • map - referencja do mapy

var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.234716, 22.535251),
map: map
});

marker na mapie google

Jeśli nie odpowiada nam standardowy marker, możemy dodać swój własny. Musimy wtedy przypisać adres naszego obrazka właściwości icon.

var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.234716, 22.535251),
map: map,
title: 'Marker',
icon: 'sciezka-do-pliku/nazwa.jpg'
});

InfoWindow

InfoWindow umożliwia nam dodanie dodatkowych informacji do oznaczonego miejsca na mapie. InfoWindow przujmuje jeden argument i jest nim obiekt InfoWindowOptions. InfoWindowOptions zawiera kilka metod. Najważniejszą z nich jest właściwość content. Może on przyjąć zwykły tekst, HTML lub referencję do węzła HTML.

var infowindow = new google.maps.InfoWindow({
content:'<div class="infoWindow">Zawartość infoWindow</div>'
});
.infowindow {
width: 350px;
}

Jeśli chcemy, aby nasze Info Window pojawiło się po kliknięciu markera, musimy utworzyć metodę, która będzię nasłuchiwać czy występuje zdarzenie. Taka metoda nazywa się google.maps.events.addListener() i przyjmuje trzy argumenty.

  • obiekt do którego jest przypisana
  • zdarzenie, które nasłuchuje
  • funkcja, która zostanie uruchomiona w momencie wystąpienia zdarzenia (event handler)

google.maps.event.addListener(marker, 'click', function() {

infowindow.open(map, marker);
});

Do wyświetlenia okna InfoWindow skorzystaliśmy z metody open. Przyjmuje ona dwa argumenty. Pierwszy to referencja obiektu mapy, a drugi to obiekt do którego okno zostanie przypisane.

Moglibyśmy jednak zechcieć, aby nasze InfoWindow wyświetliło się zaraz po załadowaniu mapy, a nie po kliknięciu markera. Do tego możemy użyć metody google.maps.event.trigger(), która wywoła dane zdarzenie.

google.maps.event.trigger(target:Object,eventName:string, args?:*)

Jak widać z powyższej definicji metody trigger przyjmuje ona obiekt, który wywołuje zdarzenie. Drugi argument to nazwa zdarzenia, które zostanie wywołane. Trzeci to argumenty przekazywane do metody nasłuchującej, są one opcjonalne.

google.maps.event.trigger(marker, 'click');

Powyższy kod spowoduje wyświetlenia się okna InfoWindow po wczytaniu się mapy.

Rysowanie na mapie

Rysowanie na mapie umożliwia nam oznaczanie miejsc, trasy itd. Zacznijmy od rysowania polilinii.

Polilinie (Polylines)

Polilinię tworzą połączone ze sobą linie. linia składa się z punktu początkowego i końcowego. Punkty te to nic innego jak współrzędne. Google korzysta z polilini np. do wyznaczania trasy przejazdu.

polilinia

Narysujmy sobie teraz linię łącząco Radom oraz Lublin. Będzie to prosta, a więc będzie składała się z dwóch puntów.

Polyline(options?:PolylineOptions) konstruktor przyjmuje tylko jeden argument i jest nim obiekt typu PolylineOptions. PolylineOptions zawiera kilka właściwości, ale tylko jedna jest wymagana. Jest nią właściwość path (ścieżka), która pobiera tablicę typu google.maps.LatLng.

Przygotujemy więc tablicę określającą centra miast Radomia i Lublina.

  • Radom - 51.402724, 21.147133
  • Lublin - 51.246454, 22.568446

Stwórzmy więc tablicę zawierającą nasze punkty. Następnie dodajmy ją do właściwości path, aby w końcu narysować linię łączące dwa nasze miasta, czyli Radom oraz Lublin.

var route = [
new google.maps.LatLng(51.402724, 21.147133),
new google.maps.LatLng(51.246454, 22.568446)
];
var polylineOptions = {
path: route
};
var polyline = new google.maps.Polyline(polylineOptions);

linia radom lublin

Teraz pozostaje nam dołączenie lini do mapy.

polyline.setMap(map);

Możemy również dodać mapę bezpośrednio w objekcie polylineOptions.

var polyline = new google.maps.Polyline({
path: route,
map: map
});

Jeśli chcemy usunąć polilinię z mapy, korzystamy z metody setMap() i przekazujemy jej wartość null.

polyline.setMap(null);

Jeśli chcemy aby nasza linia była ciekawsza, możemy ją wystylizować.

var polyline = new google.maps.Polyline({
path: route,
strokeColor: "#8df40b", // kolor linii
strokeWeight: 8, // grubość linii
strokeOpacity: 0.5 // przezroczystość
});

Klasa google.maps.Polyline dziedziczy po klasie MVCObject (co daje nam dodatkowe możliwości). Jedną z nich jest MVCArray. Właściwość path może przyjąć zarówno zwykłą tablicę jak i tablicę rodzaju MVCArray. Czym tablice typu MVCArray różnią się od zwykłych tablic...? Różnią się tym, że operacje dodawania, odejmowania elementów tablicy, będą automatycznie uaktualniane na mapie.

Utworzymy teraz mapę, na której będziemy rysować polilinię dynamicznie. Wykorzystamy do tego MVCArray.

var options2 = {
zoom: 16,
center: new google.maps.LatLng(51.234716, 22.535251),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map2 = new google.maps.Map(document.getElementById('map2'), options2);
// Tworzenie pustej tablicy typu MVCArray
var route = new google.maps.MVCArray();
// Tworzymy polyline
var polyline = new google.maps.Polyline({
path: route,
strokeColor: "#8df40b", // kolor linii
strokeWeight: 8, // grubość linii
strokeOpacity: 0.8 // przezroczystość
});
// Dodajemy poliline do mapy
polyline.setMap(map2);
google.maps.event.addListener(map2, 'click', function(e) {
var path = polyline.getPath();
path.push(e.latLng);

});

Tym razem przekazaliśmy metodzie addListener funkcję anonimową wraz z parametrem e, który jest referencją do obiektu MouseEvent. Poprzez ten obiekt e.latLng możemy odczytać koordynaty. Przedtem jednak wykorzystaliśmy metodę getPath(), aby zczytać aktualną ścieżkę. Następnie uaktualniamy naszą dynamiczną tablicę, za pomocą metody push(), która doda na koniec naszej tablicy nowy element. Możemy już rysować dynamicznie na naszej mapie polilinie.

cdn. już niebawem