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&v=2&sensor=true_or_false &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).
Kam dál (další články na eKloe.com):

August 22nd, 2009 on 17:51
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
August 26th, 2009 on 08:31
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
May 11th, 2010 on 08:16
Dobry den mam jeden dotaz kdyz dam funkci loadMap primo do stranky tak vse bezi jak ma ale kdyz vlozin tuto funkci do externiho souboru nejak nevim jak ji predat php hodnoty pro adresu a stat.
Nevite jak na to?
Dekuji
May 11th, 2010 on 15:45
Musíte předat hodnoty pomocí parametru… Tzn. když v nějakém php souboru voláte funkci loadMap(), tak místo toho budete volat např. loadMap(’adresa’, ’stat’); a potom si hodnoty v JS souboru převezmete přímo ve funkci… (hodnoty adresa a stat samozrejme v php tvaru)
August 16th, 2010 on 05:31
MOhl bych poprosit o radu , ohledně google map, ale je specifická, že bych poslal zdroj v mailu?? Dík
August 18th, 2010 on 13:14
jj, můžete… Mrkneme na to