-
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”.
-
Pobieramy GoogleMaps API key
- Rozpoczynamy pracÄ? od wej??cia na stronÄ?: http://code.google.com/apis/maps/
- Zgadzamy siÄ? z warunkami umowy licencyjnej i podajemy adres naszej strony:
- Gdy strona jest ju?? zarejestrowana mamy dostÄ?p do API key’a oraz do przyk??adowego skryptu.
- Rozpoczynamy pracÄ? od wej??cia na stronÄ?: http://code.google.com/apis/maps/
-
Piszemy Skrypt
- Tworzymy dwie rzeczy najpierw katalog js/ w katalogu wp-content/themes/nasztheme/ plik gmaps.js
- 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!");
}
}); - Ustawiamy ??rodek mapy i zoom
map.setCenter(new GLatLng(35.083956, 103.710938), 4);
- Dodajemy kontrolki do mapy:
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl()); - Dodajemy punkt na mapie
var lat = 0;
var lng = 0;
var point = new GLatLng(lat, lng);
var marker = new GMarker(point);
map.addOverlay(marker); - Mo??emy jeszcze dodaÄ? dymek z opisem punktu lub adresem
map.openInfoWindow(point, 'To jest nasz punkt!');
- Czyszczenie mapy z wszystkich marker??w i InfoWindow odbywa siÄ? za pomocÄ? polecenia:
map.clearOverlays();
-
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&v=2&key=TUTAJ_WSTAWIAMY_API_KEY" type="text/javascript"></script> <script src="<?php bloginfo('template_directory'); ?>/js/gmaps.js.php" type="text/javascript"> </script> </head>
-
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>
-
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 -
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Ä? biiipNo 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??:
- Na starcie ??adujemy logo firmy
- Pokazujemy siedzibÄ? g????wnÄ?, wy??wietlamy dymek
- 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();
-
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
Archiwa kategorii: GoogleMaps
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:
Zapraszam i Pozdrawiam,