jQuery plugins - Google Maps plugin
marc 28

Google Maps plugin

Google Maps könnyedén

Verzió: 1.01
Kiadás dátuma: 2010/01/14
Fejlesztő: Shawn Mayzes
Liszensz: MIT, GPL
  • 1864
  • 8988
  • 0
  • -

Bevezető

A Google Maps szolgáltatás napjainkra már annyira hétköznapinak mondható, hogy az olyan (pl. céges) oldalak, amelyeken az elérhetőségeknél nem szerepel a Google Maps, elavultnak és ósdinak mondhatók.

Maga a szolgáltatás mindenképp hasznos és felhasználóbarát, viszont ugyanez már kevésbé mondható el a térkép API-járól: terjedelmes és igen összetett. Ebből következik, hogy az oldalba integrálása sem nevezhető túl egyszerűnek. Szerencsére több jQuery plugin is íródott azzal a céllal, hogy ezt a műveletet lényegesen leegyszerűsítsék...

Implementálás

A szolgáltatás használatához igényelnünk kell a Google oldalán egy kódot (API key), amelyet az implementálás során az XXX helyére kell bemásolni:

JavaScript

            <script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=XXX"></script>
            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery.googlemaps1.01.js"></script>
          

Deklaráció

            $(document).ready(function(){ 
              $('#pelda').googleMaps();
            }); 
          

Teljes paraméterlista

  • latitude: szélességi fok (alapértelmezett: 37.4419)
  • longitude: hosszúsági fok, (alapértelmezett: -122.1419)
  • depth: a nézőpont magassága [0..22] (alapértelmezett: 13)
  • scroll: egérgörgő használatának engedélyezése/tiltása nagyításhoz/kicsinyítéshez (true | false) (alapértelmezett: true)
  • markers: jelölők használata a térképen
    Paraméterek:
    - latitude: szélességi fok
    - longitude: hosszúsági fok
    - info: információs buborék(ok) megjelenítése (paraméterei: layer | popup)
    - icon: a jelölő képének testreszabása (paraméterei: image | shadow | iconSize | shadowSize)
    - draggable: "drag and drop" funkció engedélyezése/tiltása (true | false) (alapértelmezett: false)
    Példa:
                    $(document).ready(function(){
                      $('#map').googleMaps({
                        markers: {
                          latitude: 37.4419,
                          longitude: -122.1419,
                          draggable: true,
                          icon: {
                            image: 'http://www.domain.com/kep.png',
                            shadow: 'http://www.domain.com/arnyek.png',
                            iconSize: '12, 20',
                            shadowSize: '22, 20'
                          },
                          info: {
                            layer: '#info', // buborék tartalmának azonosítója
                            popup: true // a buborék egyből, klikkelés nélkül jelenik meg
                          }
                        }
                      })
                    });
                  
    Az információs buborékhoz tartozó HTML kód:
                    <div id="info">
                      A buborék szövege...
                    </div>
                  
  • pan: térkép animált mozgatása egy megadott pontra
    (paraméterei: panLatitude | panLongitude | timeout)
  • controls: a térkép vezérlőelemeinek testreszabása:
    - type: térképnézet-mód állító gombok
    - zoom: nagyító/kicsinyítő gombok
    - localSearch: keresési funkció a térképen (true | false) (alapértelmezett: false)
    Példa:
                    $(document).ready(function(){
                      $('#map').googleMaps({
                        controls: {
                          type: {
                            control: 'GScaleControl', // típus
                            location: 'G_ANCHOR_TOP_LEFT' // pozíció a térképen
                          },
                          zoom: {
                            control: 'GSmallZoomControl', // típus
                            location: 'G_ANCHOR_TOP_RIGHT' // pozíció a térképen
                          },
                          localSearch: true
                        }
                      })
                    });
                  
  • polyline: egyenes vonal rajzolása a térképre
    Lehetséges paraméterek:
    - startLatitude: kezdőpont szélességi foka
    - startLongitude: kezdőpont hosszúsági foka
    - endLatitude: végpont szélességi foka
    - endLongitude: végpont hosszúsági foka
    - color: a vonal színe (hexadecimális színkód)
    - pixels: a vonal vastagsága pixel-ben
    - opacity: a vonal áttetszősége [0..100]
  • geodesic: görbe vonal rajzolása a térképre (a paraméterek megegyeznek a polyLine-nál leírtakkal)
  • layer: különböző jelölők helyezése a térképre (pl. Wikipédia bejegyzések).
    A lehetséges paraméterek listája itt található.
  • trafficInfo: közlekedési információk megjelenítése (true | false) (alapértelmezett: false)
  • feed: RSS hírek, illetve KML információk megjelenítése
    Példa:
    RSS
                    $(document).ready(function(){
                      $('#map').googleMaps({
                        feed: 'http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss'
                      })
                    });
                  
    KML (bővebb információk a KML-ről: wikipédia)
                    $(document).ready(function(){
                      $('#map').googleMaps({
                        feed: 'http://mapgadgets.googlepages.com/cta.kml'
                      })
                    });
                  
  • geocode: a szélességi és hosszúsági fokokat elhagyva konkrét cím megadása
                    $(document).ready(function(){
                      $('#map').googleMaps({
                        geocode: 'Eiffel tower Paris, 75007' // cím, város, irányítószám
                      })
                    });