Archiwa tagu: GoogleMaps

GoogleMaps + WordPress Szybki Kurs

  1. Wst?p

    Dawno nic o google maps nie pisa??em zatem przedstawie wam kurs jak do statycznej strony np z kontaktem doda? map? googla z kilkoma efektami. Kto?? pewnie zapyta: „po co? Przecie?? jest dokumentacja na googlemaps.com” Ja poka??? krok po kroku co i jak. Nie obra??cie si? je??li ten tutorial b?dzie wygl?da?? jak artyku?? z „Komputer ??wiata”.

  2. Pobieramy GoogleMaps API key

    1. Rozpoczynamy prac? od wej??cia na stron?: http://code.google.com/apis/maps/
    2. Zgadzamy si? z warunkami umowy licencyjnej i podajemy adres naszej strony:
    3. Gdy strona jest ju?? zarejestrowana mamy dost?p do API key’a oraz do przyk??adowego skryptu.
  3. Piszemy Skrypt

    1. Tworzymy dwie rzeczy najpierw katalog js/ w katalogu wp-content/themes/nasztheme/ plik gmaps.js
    2. Kodujemy zdarzenie document.ready by za??adowa? map?.
      window.onload = function() {
      if (GBrowserIsCompatible()) {
      //Inicjalizacja mapy poprzez tworzenie obiektu
      var map = new GMap2(document.getElementById("map"));
      }else{
      alert("sorry but your browser sux hard. update it and come again!");
      }
      });
    3. Ustawiamy ??rodek mapy i zoom
      map.setCenter(new GLatLng(35.083956, 103.710938), 4);
    4. Dodajemy kontrolki do mapy:
      map.addControl(new GSmallMapControl());
      map.addControl(new GMapTypeControl());
    5. Dodajemy punkt na mapie
      var lat = 0;
      var lng = 0;
      var point = new GLatLng(lat, lng);
      var marker = new GMarker(point);
      map.addOverlay(marker);
    6. Mo??emy jeszcze doda? dymek z opisem punktu lub adresem
      map.openInfoWindow(point, 'To jest nasz punkt!');
    7. Czyszczenie mapy z wszystkich marker??w i InfoWindow odbywa si? za pomoc? polecenia:
      map.clearOverlays();
  4. Modyfikujemy Template

    Modyfikacja template polega na edycji pliku header.php plus ewentualnie mo??na doda? kilka linii css w style.css
    Najpierw zostawmy wszystkie style i temu podobne
    Musimy w sekcji head dwie linie:

    <head>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=TUTAJ_WSTAWIAMY_API_KEY" type="text/javascript"></script>
     <script src="<?php bloginfo('template_directory'); ?>/js/gmaps.js.php" type="text/javascript">
    </script>
    </head>
    
  5. Umieszczamy Mapk? w kontakcie

    Sprawa prosta. Publikujemy now? stron?. Nazywamy j? kontakt.

    I dodajemy do niej nasz? mapk?:
    <div id="map"></div>
    Mo??na przy okazji j? r??wnie?? ostylowa?.
    <div id="map" style="width: 100%; height: 400px;"></div>

  6. First Run

    Nim odpalimy po raz pierwszy nasz? mapk?. To najpierw pami?tajmy o wrzuceniu na serwer wszystkich plik??w. Nie wiem czy zbyt wiele wymagam ale bior? za pewnik to ??e potraficie obs??ugiwa? jakiegokolwiek klienta FTP.
    Zatem wrzucamy pliki:
    wp-content/themes/nasztheme/js/gmaps.js
    wp-content/themes/nasztheme/header.php

  7. Efekty

    Wszyscy doskonale zdaj? sobie z tego spraw? ??e strona musi by? efektowna. Mo??na te?? u??y? cytatu:

    – Aplikacja?
    – Ma by? droga i robi? biiip

    No to sprawa prosta ??eby zadba? o tzw. „Wow Effect” (nie myli? z Word Of Warcraft) mo??emy zastosowa? ma??? animacj?. Dla du??ego odsetka klient??w ten cytat jest

    Np. Je??eli Firma ma trzy oddzia??y w mie??cie to mo??emy zrobi? takie co??:

    1. Na starcie ??adujemy logo firmy
    2. Pokazujemy siedzib? g????wn?, wy??wietlamy dymek
    3. Pokazujemy pozosta??e siedziby w odst?pach czasowych i wy??wietlamy dymek z adresem i telefonem

    By zaimplementowa? taki skrypt nie potrzebujemy du??o dodatkowej wiedzy z dziedziny javascript’u. Po pierwsze musimy wiedzie? jak u??ywa? funkcji:

    Za animacj? naszej mapy b?dzie odpowiada?:

    Gdzie point to element z tablicy gdzie zdefiniowali??my oddzia??y firmy.

    Po wy??wietleniu trzeba wyczy??ci? map? za pomoc?:

    map.clearOverlays();

  8. Podsumowanie

    W sumie zastanawiam si? czemu pisz? taki tutorial, poniewa?? jest gotowy plugin do wordpress’a kt??ry rozwi?zuje problemy z googlemaps. Konfigurowalny z wp-admin z ??adnego formularza.

    Mo??e tylko po to by nauczy? si? korzysta? z narz?dzi, kt??re u??atwi? nam prac? i naucz? pisa? dobre javascripty. Zach?cam do pr??b z kodowaniem map by Googlemaps. I zapewniam ??e GoogleMaps API nie gryzie :)