Artykuły:

  • data publikacji: 08.02.2009

    Google Maps API – pierwsze starcie

    kategoria: Skrypty client-side autor: kamilgeneral

    Google Maps API – pierwsze starcie

    W moim kolejnym tutorialu przedstawię jak wstawić mapę od Google i ją zmodyfikować.

    demo

    Pobranie klucza

    Na stronie http://code.google.com/intl/pl/apis/maps/signup.html akceptujemy regulamin i wpisujemy adres strony.
    Po naciśnięciu na Generale API Key pojawi nam się długi klucz, kopiujemy go – zaraz nam się przyda.

    Kod mapy

    W sekcji head dajemy tylko, że zamiast NASZ_KLUCZ wpisujemy ten wygenerowany wcześniej

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=NASZ_KLUCZ" type="text/javascript"></script>

    Cały kod powinien być w

    function initialize() {
                      if (GBrowserIsCompatible()) {
    // Nasz kod
            }
    }

    Dzięki temu mamy pewność, że mapy będzie można oglądać tylko w przeglądarkach w których Google Maps są wyświetlane poprawnie.

    Teraz pora dodać naszą mapę.
    Pierwszy wiersz mówi gdzie ma być wyświetlona mapa (w tym przypadku w divie o id map_canvas). Drugi jakie współrzędne ma wyświetlić, a trzeci przybliżenie

    var map = new GMap2(document.getElementById("map_canvas"));
    var center = new GLatLng(51.76869, 19.47155);
    map.setCenter(center, 12);

    Warto dodać sterowanie mapą. Pierwsza linijka kodu ładuję funkcje, druga daje możliwość przełączanie pomiędzy mapa/satelita/hybrydowa, a ostatnie linijka dodaje sterowanie mapą

    var mapControl = new GMapTypeControl();
    map.addControl(mapControl);
    map.addControl(new GLargeMapControl());

    Warto by było coś na tej mapie zaznaczyć, więc dodajemy marker. Jeśli wpiszemy true marker będzie przesuwalny, a przy false zostanie nieruchomy

    var marker = new GMarker(center, {draggable: true});

    Jeśli zaznaczyliśmy, że marker da się przesuwać warto dodać ten kod by podczas przesuwanie go chmurka znikła

    GEvent.addListener(marker, "dragstart", function() {
    map.closeInfoWindow();  
    });

    A teraz dodajemy co ma się wyświetlić nad znaczkiem gdy na niego klikniemy

    GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml("Testowy tekst!");
    });

    I teraz wyświetlenie markerów na mapie

    map.addOverlay(marker);

    Zamiast zwykłego powinno być

    <body onload="initialize()" onunload="GUnload()">

    A przykładowy div, w którym wyświetla się mapa to np.

    <div id="map_canvas" style="width: 500px; height: 350px"></div>

    Współrzędne

    By pobrać współrzędne wchodzimy na http://maps.google.pl, ustawiamy tak mapę jak nam odpowiada i naciskamy na Link.
    Pojawi nam się np. coś takiego http://maps.google.pl/?ie=UTF8&ll=52.025459,19.204102&spn=6.112899,14.150391&z=6
    52.025459,19.204102     to nasze współrzędne, a 6 na końcu to przybliżenie.

    Cały kod

    <html>
      <head>
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=NASZ_KOD" type="text/javascript"></script>
        <script type="text/javascript">

                    function initialize() {
                      if (GBrowserIsCompatible()) {
                      var map = new GMap2(document.getElementById("map_canvas"));
                      var center = new GLatLng(51.76869, 19.47155);
                      map.setCenter(center, 12);
                      var mapControl = new GMapTypeControl();
                      map.addControl(mapControl);
                      map.addControl(new GLargeMapControl());

                    var marker = new GMarker(center, {draggable: true});
                   
                    GEvent.addListener(marker, "dragstart", function() {
                      map.closeInfoWindow();  
                      });
                     
                    GEvent.addListener(marker, "click", function() {
                      marker.openInfoWindowHtml("Testowy tekst!");
                      });

                    map.addOverlay(marker);
            }
    }

        </script>
      </head>
      <body onload="initialize()" onunload="GUnload()">
        <div id="map_canvas" style="width: 500px; height: 350px"></div>
      </body>
    </html>

    Podsumowanie

    Po raz kolejny widać, że stosowanie googlowych wynalazków jest banalne. Z drugiej strony to co przedstawiłem powyżej jest tylko niewielką cząstką tego co z tym można zrobić. Wystarczy rozejrzeć się po stronach internetowych by zobaczyć wiele sposobów zastosowania Google Maps. Jednak taka integracja wymaga już od nas czegoś więcej niż przeczytanie dokumentacji API.

    Udostępnij ten artykuł:
    • Print
    • Digg
    • del.icio.us
    • Facebook
    • Mixx
    • Google Bookmarks
    • Gwar
    • RSS
    • Technorati
    • Twitter
    • Wykop

  • Podobne wpisy - Vivee blog o webmasteringu, grafice i fotografii

    Zobacz podobne wpisy:

  • This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

    7 Responses to “Google Maps API – pierwsze starcie”

    1. SpeX pisze:
      8 02 2009 o 23:30

      A czy da się dodać kreskę ale z jakimś deserem, a nie jedno kolorową? Chodzi mi dokładnie o coś ala strzałki.

      Odpowiedz
    2. kamilgeneral pisze:
      9 02 2009 o 19:54

      Jeśli chodzi o kreskę, gdzie można wyznaczyć np. trasę to nie widziałem czegoś takiego.

      Odpowiedz
    3. qsy pisze:
      23 03 2009 o 13:26

      Cześć
      Podając adres strony przy generatorze kodu wpisujemy:
      http://www.domena.pl
      czy
      http://www.domena.pl/kontakt.php

      Chodzi mi o to czy podajemy konkretne namiary na podstronę gdzie ma się znaleźć mapa czy wystarczy tylko domena strony?
      Pozdrawiam

      Odpowiedz
    4. kamilgeneral pisze:
      25 03 2009 o 10:58

      Wystarczy domena

      Odpowiedz
    5. awatar pisze:
      23 05 2009 o 23:58

      a jak dodac w map google informacje nad znacznikiem jakiegos wskazanego punktu ??

      Odpowiedz
    6. kamilgeneral pisze:
      24 05 2009 o 17:23

      Napisałem o tym. Przeczytaj dokładnie…
      A teraz dodajemy co ma się wyświetlić nad znaczkiem gdy na niego klikniemy:
      GEvent.addListener(marker, “click”, function() {
      marker.openInfoWindowHtml(“Testowy tekst!”);
      });

      Odpowiedz
    7. Sasni pisze:
      18 06 2009 o 22:05

      A możesz jeszcze napisać jak pobrać marker z bazy danych np. Mysql ?

      Odpowiedz

    Leave a Reply

Komentarze

Kategorie

Top 10

  • CMSy Artykuły dotyczące różnego rodzaju systemów zarządzania treścią CMS.
  • Flash Podstawowe informacje pomocne przy tworzeniu animacji w Adobe Flash.
  • Fotografia Samouczki dotyczące nie tylko robienia zdjęć ale też ich cyfrowej obróbki.
  • Grafika Ogólnie pojęta grafika komputerowa, od inspiracji, po tworzenie layoutów oraz mniejszych form graficznych.
  • Inne tutoriale wordpressowe Wszystkie inne zagadnienia dotyczące WordPressa.
  • Inspiracje Inspirujące materiały graficzne z dziedziny projektowania stron www, projektów DTP, digital painting, itp.
  • Obróbka zdjęć Techniki retuszu fotografii cyfrowych.
  • Rysunek Tworzenie rysowanych ilustracji w Adobe Photoshop.
  • Skóry do Wordpressa Darmowe oraz płatne – najlepsze skóry do WordPressa.
  • Skrypty client-side
  • Skrypty server-side
  • Tutoriale
  • Webdesign Tutoriale z zakresu projektowania stron www i grafiki użytkowej na rzecz internetu.
  • Wieczór z Open Source
  • Wordpress Ulubieniec naszej publiczności CMS WordPress: nowości, tricki, wtyczki, skóry i wszystko to co może przydać się przy korzystaniu z tego systemu.
  • Wtyczki do Wordpressa Recenzje oraz instrukcje najbardziej popularnych i najbardziej niezbędnych pluginów do WordPressa.
  • XHTML/CSS Ciekawostki z dziedziny kodowania stron www: XHTML, CSS, jQuery.

Najnowsze newsy

Wieczór z Open Source 2010

Jak co roku WSINF organizuje konferencję Wieczór z Open Source.
Chciałbym zaprosić was na tegoroczna konferencję Wieczór z Open Source 2010! Czytaj dalej

Grafart.org i WACOM zapraszają na konkursy!

Witam!

Myślę, że czas najwyższy nadmienić, że za niedługi czas zostanie zorganizowany pierwszy z trzech konkursów, w których główną nagrodą będą tablety firmy WACOM!
Za miejsca drugie oraz trzecie nagrodami będą kubki i koszulki firmy WACOM oraz magazyny graficzne PSD PHOTOSHOP oraz COMPUTERARTS.
Czytaj dalej

Zapraszamy na forum graficzne Graffika.pl

Każda osoba interesująca się grafiką komputerową ma czasami ochotę porozmawiać o swoich pracach, posłuchać rad, krytyki i pochwał innych osób. Idealnym miejscem na realizowanie takich potrzeb jest forum graficzne Graffika.pl.
Czytaj dalej

Polecane strony

copyright vivee.info      |       all rights reserved      |       design by water design