eKloe.com - Kubuntu User

Vložení Google Maps API na stránku

by LucaS on Jun.16, 2009, under JavaScript

Google Maps API je rozhraní, které Vám umožňuje zdarma jednoduché vložení mapy na web nebo do programů. Nedávno jsem tvořil web o Bed And Breakfast v Irsku a potřeboval jsem zobrazit umístění jednotlivých penzionů na mapě. Šáhl jsem po Google Maps API. Alternativou jsou mapy od seznamu nebo atlasu. Dnes pouze pro Evropu.

Následující skript umí zobrazit jedno umístění podle textové adresy pokud nemáte přesné umístění GPS souřadnic. Jelikož jsem měl v databázi (postgreSQL) cca 1500 adres bez GPS umístění, musel jsem si ukázkové skripty trochu poupravit.

V první řadě co musíte udělat, je si zaregistrovat svůj vlastní API KEY pro web, na kterém poběží ono zobrazování map. Registraci můžete provést zde (Sign Up for the Google Maps API). Nezapomeňte, že musíte mít nejprve založen účet u Google (čti gmail).

Nejlépe do hlavičky domukentu vložte následující kód. Nahraje API rozhraní s Vašim vygenerovaným klíčem. Striktně nemusí být umístěno přímo v hlavičce.

  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false
    &amp;key=VAS_VYGENEROVANY_API_KEY"
    type="text/javascript">
  </script>

Následující kód volá mapu až po načítání stránky. Může se stát, že google vypadne ;-) a stránka se Vám nenačte a bude čekat na odezvu. Proto až nakonec.

  <script type="text/javascript">
 
    onload = function() {
        loadMap();
    }
 
  </script>

Funkce loadMap() načte samotnou mapu. Můžete ji mít uloženou kdekoli (externě v souboru, v knihovně) a pak ji pouze stačí zavolat.

 
    <script type='text/javascript'>
 
      google.load("maps", "2");
      google.load("search", "1");
 
      var geo;
      var map;
 
      function loadMap() {
        if(GBrowserIsCompatible()) {
          // muze se stat, ze google nenajde misto z textove adresy, ktere hledate
          // proto pred zobrazenim hledaneho mista, zobraz nejake defaultni
          var map = new GMap2(document.getElementById("map"),{mapTypes: [G_NORMAL_MAP,G_SATELLITE_MAP,G_HYBRID_MAP]});
 
          // momentalne nastaveny souradnice irska
          map.setCenter(new GLatLng(53.41291, -8.24389), 7);
 
          // nastaveni ovladani
          map.addControl(new GLargeMapControl());
          var typeMap = map.getMapTypes();
 
          // prepinani mezi typem mapy NORMAL/SATELIT/HYBRID
          typeMap[0].getName= function() { return "NORMAL";}
          typeMap[1].getName = function() { return "SATELLITE";}
          typeMap[2].getName = function() { return "HYBRID";}
          map.addControl(new GMapTypeControl());
          map.addControl(new GOverviewMapControl()); 
          map.addControl(new GScaleControl());
 
          geo = new GClientGeocoder();
 
          // nastaveni textu, hledane adresy
          // adresa pro vyhledani mista na mape, google radeji GPS souradnice ;-) pouzijeme textove vyhledavani
          // osetrena data nacitam primo z databaze, mozno i parsovat z XML
          var address='<?php echo $db_business_address.", Republic of Ireland"; ?>';
 
          // adresa pro zobrazeni v bubline
          var address2='<?php echo $db_business_name."<br />".$db_business_address."<br />Republic of Ireland"; ?>';
          geo.getLatLng(address,function(punkt) {
            if (punkt) {
              // nastaveni jak moc ma byt mapa priblizena
              map.setCenter(punkt, 15);
 
              var icon = new GIcon();
              // zobrazeni obrazku v miste, kde je hledane misto
              icon.image='http://bed-and-breakfast.ekloe.com/images/accept.png';
              icon.shadow='';
 
              // nastaveni vlastnosti obrazku (sirka, vyska v px)
              icon.iconSize=new GSize(16,16);
              icon.iconAnchor=new GPoint(16,16);
              icon.infoWindowAnchor=new GPoint(16,16);
 
              // zobrazeni nalezene adresy
              var bubble = new GMarker(punkt,{icon: icon, title: address});
              map.addOverlay(bubble);
 
              // vepsani textu do bubliny
              bubble.openInfoWindowHtml('<strong>' + address2 + '</strong>');
            }
          });
        }
      }
    -->
    </script>

Na závěr umístěte následující DIV na místo, kde chcete, aby se mapa zobrazovala.

  <div id="map" style="width: 280px; height: 450px"></div>
  <div id="searchcontrol"></div>

Ukázka použití na bed-and-breakfast.ekloe.com. Vždy si zaregistrujte API KEY na doménu, na které mapa bude bežet a tam testujte. Jinak Vám nebude fungovat. Zkoušel jsem rozchodit na localhost, ale chvíli fungovalo a chvíli ne…

Ještě je dobré podotknout, že se google nelíbí, pokud jsou mapy používány v částech stránek, kde je přístup pouze pod heslem. Administrátoři se údajně sem tam mrknou, jestli někdo neporušuje pravidla, a když se k mapě nedostanou, smažou Vám API KEY (mapa přestane fungovat) nebo přímo vloží Váš web na černou listunu (mapy Vám tam delší dobu nebudou fungovat).


Sdílej:
  • Linkuj.cz!
  • Jaggni to!
  • MediaBlog.cz
  • TOPodkazy.cz
  • Bookmarky.cz
  • MojeLinky.sk
  • vybrali.sme.sk
  • Pozrisi.sk
  • Park.sk
  • TextTip.eu
  • Facebook
  • Google Bookmarks
  • Live
  • Twitter
  • StumbleUpon
:,
2 komentářů:
  1. filip

    Ahoj. Dik za dobry navod. Nevis jak vlozit google mapu a k ni i hledani?
    Aby to fungovalo tak ze mam mapu s vyznacenymi obchody a navstevnik napise svoje bydliste a mapa se mu tam nasmeruje a pritom stale zustanou zobrazene obchody.

    Dik

  2. LucaS

    Mozna by Vam mohlo pomoci ukazkove demo primo od GOOGLE. Vyhledavani je obsazeno primo v mape… V tomho demu je i ukazano, jak se definuje vychozi bod, vy pak vyhledate napr. to bydliste a pod mapou se ukaze vzdalenost…

    http://gmaps-samples.googlecode.com/svn/trunk/googlebar/googlebar_directions.html

Odpovědět

Hledat: