-
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
GoogleMaps + WordPress Szybki Kurs
5 odpowiedzi