Google Maps API na Ulita.sk
Vcera som na strankach Ulita.sk konecne spojazdnil funkciu “Poloha nehnutelnosti” – odkaz v kazdom inzerate, pod nahladami fotografii. Prednedavnom sa Vam tam zobrazila mapa Atlasu, ktora nie vzdy fungovala a to aj vdaka nie velmi privetivemu helpdesku Atlasu. Mozno to niekedy este spomeniem. Po novom som tam dal plavajuci div s vysekom google maps s danou lokaciou.
Co na to potrebujeme?
- 1. Google API key – pre vsetky operacie s Google API je potrebne mat Key. Je zadarmo a ten pre Maps ziskate velmi jednoduchou registraciou na tejto stranke. Je limitovany na 15 000 pouziti za den.
- 2. Lokaciu ktoru zobrazujeme – Google Maps API hlada a zobrazuje lokacie podla Latitude a Longitude. To nie je vzdy dobre pouzitelne a aj na Ulita.sk nepozname presne suradnice bodov, ale vieme nazov miest a niekedy aj konkretnych ulic. Preto existuje v API aj funkcia
getLatLngtriedyGClientGeocoder()ktora Vam vrati suradnice podla vyhladavaneho slova. Cize presne ako na maps.google.com. - 3. Co vlastne chceme zobrazovat? – musime vediet ako ma nasa mapa vyzerat. V API si mozete nastavit zobrazovanie vsetkych prvkov ako ich pozname z klasickych google maps. A samozrejme aj urcit kde sa maju zobrazovat.
Ukazka kodu
Vysvetlenie kodu je dole.
<script language="javascript">
<!--
function map_load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("gmap_canvas"));
var geocoder = new GClientGeocoder();
address = "Nobelova, Bratislava, Slovenska republika";
geocoder.getLatLng(
address,
function(point) {
if (point) {
map.setCenter(point, 16);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
} else {
document.getElementById("gmap_canvas").innerHTML = "Bod nebol na mape nájdený."
}
}
);
map.addControl(new GSmallMapControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10)));
}
}
-->
</script>
<a href="javascript:void(0)" onclick="map_load();">Poloha nehnuteľnosti</a>
<div id="gmap_canvas">Nahrávam mapu...</div>
A v CSS si nezabudnite pre element gmap_canvas nastavit aj potrebne rozmery (napriklad width: 500px; height: 300px;)
Trochu vysvetliviek
gmap_canvas je id elementu v ktorom sa maju mapy zobrazovat.
geocoder.getLatLng je spominana funkcia na ziskanie suradnic vyhladavanej lokacie. V nasom pripade ked nic nenajde tak na miesto kde by sa mala zobrazit mapa vypise chybove hlasenie.
map.setCenter(point, 16); je funkcia na nastavenie zobrazenia bodu a priblizenia mapy
map.addControl nam prida do mapy ovladacie tlacitka na priblizovanie/oddialovanie a pohyb po mape. Rovnako je mozne pridat aj dalsie tlacitka – pozrite odkazy nizsie.
marker.openInfoWindowHtml nam zobrazi v bode bublinku s textom. V nasom pripade s adresou.
Ukazka v praxi
Kliknite na odkaz – Poloha nehnuteľnosti
Alebo si pozrite ukazku na strankach Ulita.sk – kliknite na nejaky inzerat a pod fotografiami je odkaz na polohu nehnutelnosti.
Odkazy
Dalsie ukazky
Referencna prirucka
Dalo by sa spravit nieco take, ze by sa este okolo nehnutelnosti zobrazil nejaky kruh, ktory by bol roznej farby podla ceny. Napriklad zelene by boli lacne cervene drahe.
Cize predstavujem si to tak, ze si otvorim napriklad stare mesto, ukazu sa mi nehnutelnosti co sa tam predavaju a okolo kazdej bude podla ceny ina farba. Tak by sa dalo lahko zistit ake su ceny v danej lokalite.
Nieco podobne som zacal robit. Mapu slovenska z bodmi nehnutelnosti na predaj. Problem je ale s tym ze vela ludi neuvadza ulice a ked aj uvedu (a povedzme ze aj s cislom) tak google maps este nepozna cislovanie na slovensku. Preto je ten bod ktory ukaze iba relativny.
Spat k otazke. Ano da sa aj potom okolo nehnutelnosti robit kruhy. Google API pre mapy ma naozaj siroku skalu moznosti. Kreslit si roznofarebne kruznice, trojuholniky a neviem co vsetko nie je vobec problem :)
Ahoj,
presne to co si spravil som hladal. Skoda, ze ti ale ta mapa nefunguje. Nevies mi poradit vcom je problem?
Dakujem
Vladky
Vladky> Co presne nefunguje? U mna sa tvari vsetko ok :)
Je to uz ok…vcera mi to u teba vypisovalo chybu v IE7, ze ti uz vyprsal key kod. U seba som si to podla tvojho navodu rozbehal. Takze dakujem.
Vladky> neni zac. som rad ze funguje.
Ahoj.
Potrebujem radu.Potrebujem z xml súboru natiahnúť dáta ulíc,miest na mapu google.Skúšam to už a nejde to.Ide mi to jedine zo súradnicami,ale ja mám iba mená miest,ulíc.Nechce mi to vytvoriť,resp.dajme tomu v xml súbore mám mesto Levice (presná adresa) a Zvolen(presná adresa).Vytvorý mi body na mape ale mi dá popis tej poslednej t.j zvolen.Tak že nad bodom v Leviciach vypisuje Zvolen…. .A nemení mi ani vzhlad ikoni vždi osáva tá posledná.
Ďakujem.
Toni – to by chcelo asi konkretnu ukazku. Mas to niekde zavesene? Nie som si totiz uplne isty ci rozumiem tvojmu popisu :)
Zadaj mi tvoju mail adresu a ja ti pošlem konkrétny príklad.
Zdravim, robim akurat stranku pre jedno kvetinarstvo a chcel by som tam zaradit mapu z google maps. Vsetko slape v pohode, ide mi tam dat a aj zobrazit presne ulicu no problem mam v tom, ze by som to rad nasmeroval presne na ich vizitku, ktoru maju uz spravenu v googlemaps. Neviete nahodou niekto ako toho dosiahnem? Toto je ich vizitka http://maps.google.com/maps/ms?msa=0&msid=105416136917934297556.000468a441ae2d8cd1ce2
Dakujem
Zdravim, potreboval by som z google maps vytiahnut presne body cesty do suboru, ked zadam pociatocny a koncovy bod trasy. Vies poradit nejky odkaz, kde by to mohlo byt riesene. Dakujem.
Zdravim, chcel by som spytat ci Google Maps API je bezplatne, resp. co je mozne ho pouzivat na stranke, kde zakaznici zaplatia za nejakuprezentaciu. VDAKA
Jozef: na toto si prečítaj http://code.google.com/apis/maps/terms.html
Pre teba asi zaujímavá časť:
10.4 charge users or any other third party any fee for the use of the Maps API Implementation, the Service, or the Content, unless you have entered into a separate written agreement with Google or obtained Google’s written permission to do so (but if you are a consultant who creates or hosts Maps API Implementations for third party customers, you may charge such customers a fee for your consulting or hosting services);