Archiwa kategorii: GoogleMaps

GoogleMaps API potÄ???ne narzÄ?dzie dla webdevelopera. Od mapki z dojazdem do firmy a?? po zaawansowane aplikacje biznesowe.

GoogleMaps + WordPress Szybki Kurs

5 odpowiedzi
Twitt

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

Twitt

Google maps Guru!

Napisz odpowiedź
Twitt

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.

Twitt

geolokalizacja by googlemaps

Napisz odpowiedź
Twitt

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:

Twitt

google maps

Napisz odpowiedź
Twitt

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,

Twitt