Integrisanje interaktivnih google mapa sa WEB sajtom
Napisao Živorad Antonijević petak, 16. april 2010. 11:57
Kontakt strana WEB sajta može izgledati mnogo lepše ukoliko se na njoj osim forme i adrese gde se nalazi firma čiji je sajt doda i slika mape za lakše pronalaženje. Još bolji efekat se može postići dodavanjem interaktivnih google mapa.
Postupak je veoma pravolinijski i jednostavan. Najpre se u <head> deo dokumenta doda skript
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg&sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(”map_canvas”));
var point = new GLatLng(44.859882, 20.366716);
map.setCenter(point, 13);
}
}
</script>
Parametri key i koordinate tačke se menjaju zavisn od domena i geografske lokacije na koju se centrira mapa.
Key se generiše na ovoj strani http://code.google.com/apis/maps/signup.html, i važi samo za domen za koji je unet. Najbolje je staviti TLD, da bi isti ključ važio za sve delove sajta.
Parametri za centar mape su koordinate lokacije, koje sam ja našao na sleceći način. Otvorim http://maps.google.com/maps nadjem lokaciju koja mi treba i onda iz gornjeg desnog ugla kopiram link i iz njega izvučem parametre sa lokaciju koji tražim.
Pošto google jos nije zašao toliko detaljno u naše ulice (čudo je da nas je uopšte i ubeležio 
), korisno je da unesemo sami marker za željenu ulicu. To se radi dodavanjem markera:
var marker = new GMarker(point);
map.addOverlay(marker);
var html = '<font color="#f00">Quadrium d.o.o, svetlece reklame</font><br />
<br />Lazara Mamuzica 16b<br />11080 Zemun (Galenika)’;
marker.openInfoWindowHtml(html);
Sve zajedno izgleda otprilike ovako:
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(”map_canvas”));
var point = new GLatLng(44.859882, 20.366716);
map.setCenter(point, 15);
var marker = new GMarker(point);
map.addOverlay(marker);
var html = ‘<font color="#f00">Quadrium d.o.o, svetlece reklame</font><br />
<br />Lazara Mamuzica 16b<br />11080 Zemun (Galenika)’;
marker.openInfoWindowHtml(html);
}
}
</script>
Primer na koji se ovo odnosi nalazi se ovde, http://quadrium.rs/kontakt.php
