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

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

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.

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:

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,