T&R splet blog o spletnih storitvah. Razgaljamo tehnologijo!

reference spletnih strani
« Windows 7 so zunaj
Select – dropdown – width – internet explorer »
22nd October

Implementacija Google maps v spletno stran

Google podjetje za svoj Google maps projekt ponuja tudi API s katerim lahko s pomočjo javascripta vključimo Google maps na našo spletno stran. API v svoji drugi oz. tretji verziji ponuja ogromna funkcij, ki jih lahko uporabimo za prikaz določenih lokacij ter podatkov na Google mapi.

Primer uporabe Google maps v mojem primeru je bil pri iskanju določenih lokacij, kjer imamo lahko sestanek. Prikazane lokacije v iskalnih rezultatih prikažemo tudi standardni Google mapi in tako stranki lažje predstavimo, kje se določena lokacija nahaja.

Kaj potrebujem za implementacijo ter prednosti Google maps projekta

Potrebujete API key za vašo domeno ter Google maps javascript knjižnico. Prednosti Google maps projekta je enostavnost uporabe API-ja in kvaliteten ter hiter rezultat. Dodatno prednost vidim v tem, da na enostaven način dobimo večino funkcionalnosti, ki jo ponuja polno funkcionalni Google maps servis. Vsekakor je uporaba Google maps lažja za vse obiskovalce, saj so te storitve že navajeni in z njo večinoma že znajo delati, kar ne moremo trditi za nek tretji, ne toliko znan projekt.

Primer implementacije

PLAIN TEXT
JAVASCRIPT:
  1. <script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=API_KEY_CODE"></script>
  2. <script type="text/javascript">
  3.     function initialize() {
  4.         // Inicializacija google maps
  5.         var map = new GMap2(document.getElementById("map"));
  6.         map.setCenter(new GLatLng(''52.3582089'', ''5.1828498''), 8);
  7.         map.setUIToDefault();
  8.  
  9.         var point = new GLatLng(''52.3704407'', ''5.1939162'');
  10.         var gmarker = new GMarker(point, {title:"Prva lokacija"});
  11.         GEvent.addListener(gmarker, "click", function() { window.location.href = "/link/kamor/zelimo/ko/kliknemo/na/lokacijo/1/"; });
  12.         map.addOverlay(gmarker);
  13.  
  14.         var point = new GLatLng(''52.3952726'', ''5.2137103'');
  15.         var gmarker = new GMarker(point, {title:"Druga lokacija"});
  16.         GEvent.addListener(gmarker, "click", function() { window.location.href = "/link/kamor/zelimo/ko/kliknemo/na/lokacijo/1/"; });
  17.         map.addOverlay(gmarker);
  18.        
  19.         jQuery(document).ready(function() {
  20.             initialize();
  21.             window.onunload = GUnload;
  22.         });
  23.     }   
  24. </script>

PLAIN TEXT
HTML:
  1. <div id="map" style="width: 680px; height: 350px" class="bigmap"></div>

Opis skripte

Najprej dodamo Google maps javascript knjižnico, nato inicializiramo Google maps, določimo v katerem HTML elementu jo bomo prikazali, nastavimo center in dodamo standardne gumbe za kontrolo nad mapo. Zatem dodajamo posamezne lokacijo na to mapo. Na koncu dodamo še event onunload za preprečevanje memory leaks težav.

Kako dobim koordinate posamezne lokacije?

Koordinate lahko dobimo tako, da pokličemo http://maps.google.com/maps/geo?q, ki nam v primeru uspešnega iskanja vrne koordinate. Primer iskanja koordinate za nizozemsko lokacijo v PHP-ju:

PLAIN TEXT
PHP:
  1. $googleQuery = str_replace('' '', ''+'', "{$location[''street'']} {$location[''housenumber'']},{$location[''postcode'']} {$location[''city'']}");
  2. $googleCoordinates = file_get_contents(''http://maps.google.com/maps/geo?q=''.$googleQuery.''&output=csv&oe=utf8&API_KEY_CODE&hl=nl'');
  3. $googleCoordinates = explode('','', $googleCoordinates);
  4.                        
  5. // V primeru neuspešnega iskanja vstavi prazno koordinato
  6. if (!isset($googleCoordinates[3]) || !isset($googleCoordinates[2])) {
  7.     $googleCoordinates = array(2 => '''', 3 => '''');
  8. }

Rezultat

Primer Google maps storitve na spletni strani

Opombe

Pri iskanju koordinat vam priporočam, da to naredite enkrat pri na primer vnosu lokacije in ne pri vsakem iskanju, saj iskanje koordinat zahteva nekaj časa že zaradi samega http klica na google strežnik. Dodatno naj opozorim, da je prikazan vodič zelo enostaven in skuša le prikazati osnovno implementacijo google storitve v vašo spletno stran. Vedite, da obstaja še veliko nastavitev ter možnosti, kako lahko vašo implementacijo dodelate oz. spremenite.

Dodatne informacije

Deli s skupnostjo:

  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Podobni članki:

  1. Google maps – kako pridobiti latitude ter longitude podatke za določeno lokacijo
  2. Velikost slik pri vnosu v Google maps
  3. Magento internetna trgovina – kako dodati Google analytics preko admin
  4. Spletni plačilni modul – plačevanje preko spleta – implementacija v spletno stran – spletno trgovino – FAQ
  5. Implementacija plačilnega sistema v spletno stran – spletno trgovino
  6. Javascript koledar – izbira datuma – jQuery date picker
  7. Google AJAX Suggest kopija
  8. Select – dropdown – width – internet explorer
  9. Avtomatska preusmeritev pri uporabniku prijaznem sporočilu o napaki
  10. Javascript – avtomatsko osveževanje strani – refresh page – reload page

Roky || Thursday, October 22nd, 2009 ob 11:33 pm || Splet, Splet (PHP & MySQL) || RSS 2.0 | Dodaj komentar || Trackback


Dodaj komentar