Mapa google z własnymi punktami krok po kroku

A więc chcesz mieć na swojej stronie mapę. Na mapie swoje punkty, np. lokalizacje sklepów Twojego klienta. Sprawa jest bardzo łatwa. W kilku krokach stworzymy naszą mapę.

Załóżmy, że mamy listę lokalizacji sklepów. Chcemy pokazać klientowi mapę. Dodatkowo klient powinien kliknąć w sklep i zobaczyć dymek, np. numer telefonu, godziny otwarcia itp. Listę sklepów trzymamy w bazie danych. Jak to wyświetlić na stronie?

Będziemy krok po kroku budować nasz Javascript. Na końcu artykułu będzie pełny kod HTML.

1. Podłączamy mapy google

W nagłówku strony dołączamy API do map google:

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

Musimy mieć miejsce, gdzie wyświetlimy mapę. W treści strony dodajmy:

<div id="mapa" style="width: 400px; height: 400px;">
   <!-- tu będzie mapka -->
</div>

Potrzebujemy jeszcze funkcji, która zainicjuje mapę. Dodamy jej wywołanie:

<script>
window.onload = function() {
   // tu stworzymy mapkę
}
</script>

2. Uruchamiamy mapę

Wewnątrz naszej funkcji musimy stworzyć obiekt mapy i podłączyć go do naszego DIV:

var div = document.getElementById("mapa");
var opcje = {
   zoom: 16,
   center: {lat: 51.504949,lng: -0.019501}
};
var naszaMapa = new google.maps.Map(div, opcje);

Zwróćmy uwagę na opcje. Można się domyślić, że zoom to stopień przybliżenia mapy. Opcja center mówi gdzie wyświetlić początkową mapę (w tym przypadku pośrodku mapy znajduje się Torchwood Tower).

Te dwie opcje są wymagane. Mamy też kilka dodatkowych. Pełną listę opcji znajdziemy tutaj. Najciekawsze to:

• mapTypeId – typ mapy, którą wyświetlamy (drogowa, satelitarna, mieszana). Jako wartość można podać stałe np: google.maps.MapTypeId.ROADMAP lub odpowiednio SATELLITE, HYBRID lub TERRAIN.
• maxZoom i minZoom – ograniczenia dla użytkownika jak bardzo może zbliżać i oddalać mapę.
• streetViewControl – możemy włączyć lub wyłączyć ludzika od street view.

Mamy już naszą mapę wyświetloną w przeglądarce. Czas na punkty.

3. Dodajemy punkty (markery) do mapy

Dodanie punktu (zwanego markerem) jest prawie tak łatwe jak całej mapy. Wystarczy stworzyć punkt:

var opcjePunktu = {
   position: {lat: 51.504949,lng: -0.019501},
   map: naszaMapa,
   title: "Torchwood Tower",
};
var marker = new google.maps.Marker(opcjePunktu);

Wszystkie dostępne opcje dla markerów opisano tutaj. Kilka ciekawszych opcji:

• animation – nasz punkt może podskakiwać (wartość google.maps.Animation.BOUNCE) lub zostać opuszczony (google.maps.Animation.DROP).
• icon – zamiast domyślnej ikony możemy wstawić własną. Podajemy tu url do obrazka lub obiekt icon.

4. Dymek czyli InfoWindow

Jeśli chcemy pokazać dymek po kliknięciu w marker skorzystamy z obiektu google.maps.InfoWindow. Jak poprzednio, najpierw tworzymy obiekt:

var infoWindow = new google.maps.InfoWindow({
   content: "<h3>InfoWindow</h3> <div>Jak widać możemy tu wstawiać dowolny HTML</div>"
});

Musimy teraz podpiąć nasz dymek do markera. Dokładniej, do zdarzenia (event) kliknięcia w marker:

google.maps.event.addListener(marker, 'click', function() {
    infoWindow.open(naszaMapa,marker);
});

Sam obiekt InfoWindow ma tylko kilka dostępnych opcji. Można je znaleźć tutaj.

5. Kilka punktów

Najczęściej chcemy wyświetlić mapę z kilkoma punktami. Punkty pobieramy z bazy lub z serwisu REST. Będziemy mieć listę pozycji, nazw i treści dymków. Po załadowaniu punktów będziemy chcieć wycentrować naszą mapę żeby pokazać wszystkie. Przyda się do tego obiekt google.maps.LatLngBounds. Na początku go zainicjujemy:

var bounds = new google.maps.LatLngBounds();

Potem będziemy dodawać pozycję kolejnych markerów do tego obiektu. Tu niestety trzeba utworzyć obiekt position (nie da się podać wprost szerokości i długości):

var position = new google.maps.LatLng(51.504949, -0.019501);
bounds.extend(position);

A na sam koniec każemy mapie ustawić się tak, aby pokazać wszystkie punkty:

naszaMapa.fitBounds(bounds);

Na koniec

Warto przeczytać ciekawy wpis o tworzeniu wielopunktowej mapy. Warto też zapoznać się z dokumentacją do JavaScript API dla Google Maps.

Czasem nie chcemy korzystać z google maps. Licencja jest dość restrykcyjna i kosztowna. W następnym wpisie zrobimy to samo przy użyciu OpenStreetMap.

Na koniec pełny kod naszego przykładu wyświetlającego punkt:

<!DOCTYPE html>
<html lang="pl">
<head>
   <meta charset="utf-8">
   <title>Google Maps Example</title>
   <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
<div id="mapa" style="width: 400px; height: 400px;">
   <!-- tu będzie mapka -->
</div>
<script type="text/javascript">
   window.onload = function() {

      // tworzymy obiekt mapy
      var div = document.getElementById("mapa");
      var opcje = {
         zoom: 16, // dość blisko
         center: {lat: 51.504949,lng: -0.019501},
         streetViewControl: false
      };
      var naszaMapa = new google.maps.Map(div, opcje);

      // dodajemy marker
      var opcjePunktu = {
         position: {lat: 51.504949,lng: -0.019501},
         map: naszaMapa,
         title: "Torchwood Tower",
         animation: google.maps.Animation.DROP
      };
      var marker = new google.maps.Marker(opcjePunktu);

      // tworzymy dymek czyli InfoWindow
      var infoWindow = new google.maps.InfoWindow({
         content: "<h3>InfoWindow</h3> <div>Tu wstawiamy dowolny HTML</div>"
      });


      // nasłuchujemy kliknięcia w marker i pokazujemy dymek
      google.maps.event.addListener(marker, 'click', function() {
         infoWindow.open(naszaMapa,marker);
      });
   };
</script>
</body>
</html>