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:

    window.setInterval(function() {
    //tutaj implementujemy swoją funkcje bądź wywołujemy już wcześniej zaimplementowaną
    }, 4000);
    //4000 to czas w milisekundach czyli w tym wypadku 4 sekundy.

    Za animację naszej mapy będzie odpowiadać:

    //dodajemy marker
    var marker = new GMarker(point);
    map.addOverlay(marker);
    //wyświetlamy dymek
    map.openInfoWindow(point, 'tekst o odzdziale');
    //przesuwamy mapę
    map.panTo(point);

    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 :)

Tags: , , , ,

piątek, Lipiec 11th, 2008 GoogleMaps, JavaScript, WordPress 5 komentarzy

Google maps Guru!

W firmie uzyskałem miano Guru Guielowych maps :) . Teraz każdy projekt który jest bliżej lub bardziej związany z Google Maps Najpierw jest konsultowany ze mną.

Prócz googlemaps.com guru pobiłem kolejny rekord w kodowaniu weekendowym. Motywowany kontrolą u klienta, który dostał dofinansowanie na sklep internetowy z urzędu miasta. Napisałem 80% silnika sklepu w drobne 48 h (może 30h pracy). Nowy rekord. Rekord już dostępny do oglądania na: zdrowietouroda.mmx3.pl (wersja robocza, css trzeba dokończyć, po dokładać zdjęcia do artykułów oraz napisać jeszcze logowanie, koszyk, rejestracje i panel admina).

Nie ma co narzekać na prace więc blog z EMO/mobber-blog stał się DEV-blog. Chyba zmiana na lepsze. A tak z planów na przyszłość. To znowu gonią mnie deadline. Mam kolejne zlecenia i w mojej dobie która ma z 25 godzin już zaczyna brakować czasu na 3 h snu.

Szykuje się sylwester w Zakopanem na desce. Rezerwacja jest. Więc będą nowe foty na plfoto.com. Bo nie mam  teraz nawet czasu na obrobienie, wykadrowanie zdjęć co już leżą na dysku i wrzucenie ich do profilu. Kiedyś to były czasy… Czekało się te 24 h żeby dodać nowe zdjęcie.

wtorek, Październik 30th, 2007 czas wolny, GoogleMaps, php, praca, projekty Brak komentarzy

geolokalizacja by googlemaps

Były już mapy googla i kożystanie z API googlemaps. Teraz nadszedł czas na geolokalizacje. Google oferuje bardzo dokładny skrypt geolokalizacji. A korzystanie z niego wygląda mniej więcej tak:

$szukana_lokalizacja = "Poznań, Plac Andersa";
$fd = fopen("http://maps.google.com/maps/geo?q=".urlencode($szukana_lokalizacja)."&output=csv&key=TWÓJAPIKEY", "r");
$data = fread($fd, 5000); // od filesize($fd) nie działa
$data = explode(",", $data);
//print_r($data);
//$data[0] to odpowiedź http jeśli 200 to jest ok
if($data[0] == 200) {
 $y = $data[2]; // szerokość
 $x = $data[3]; // długość
}
fclose($fd);

Można oczywiście prasować wielkiego XML’a w którym jest dokładna lokalizacja po stan/województwo itp. wystarczy zmienić output na xml.

Więcej do poczytania na:

Tags: , ,

czwartek, Październik 25th, 2007 AJAX, GoogleMaps, php, projekty Brak komentarzy

google maps

Zatem stałem się specjalistą od AJAX’a i Google Maps. Do portalu muzhi.com(domena jeszcze nie podpięta) Dopisałem kolejny klon twittera znany pod nazwą twittervision.com

Wersja jeszcze jest rozwojowa. Więc nie czepiajcie się o drobiazgi. Działa poprawnie. Ajax napisany z ręki, do pharse’owania xml’a użyłem zintegrowanej biblioteki googla GXml. Wszystko to dostępne pod adresem:

map.logbox.cn

Zapraszam i Pozdrawiam,

Tags: , ,

czwartek, Październik 18th, 2007 AJAX, bez kategorii, GoogleMaps, php, praca, projekty Brak komentarzy

Search

 

Archiwa