Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Google Maps Api

No description
by

Nevena Glogovac

on 27 December 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Google Maps Api

design by Dóri Sirály for Prezi
Ali, po čemu se on tačno razlikuje od klasičnog UI-a?
Upoznavanje sa Google maps dokumentacijom
Polazni koraci
API je nešto poput korisičkog interfejsa....?

Google Maps API dozvoljava ugradnju Google Mapa na web platforme stranih programera koristeći jednostavne JavaScript ili Flash interfejse.
API je dizajniran za rad na mobilnim, kao i na klasičnim desktop aplikacijama unutar browser-a.
Čemu služi Google Maps API?
Google Maps Api
Šta je API?
Pronađite sličnost
API
Električne utičnice
Preuzimanje API ključa
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>

</html>
Kreiranje osnovne Google mape
http://www.w3schools.com/googleapi/tryit.asp?filename=tryhtml_map_first
<script src="http://maps.googleapis.com/maps/api/js"></script> - Poziv
function initialize() {
}
var mapProp = {
center:new google.maps.LatLng(51.508742, -0.120850),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
mapTypeId
ROADMAP
SATELLITE
HYBRID
<div id="googleMap" style="width:500px;height:380px;"></div>
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
google.maps.event.addDomListener(window, 'load', initialize);
Asinhrono učitavanje
function loadScript() {
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
document.body.appendChild(script);
}

window.onload = loadScript;
http://www.w3schools.com/googleapi/tryit.asp?filename=tryhtml_map_async
Istovremeno otvaranja više mapa
var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapProp1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapProp2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapProp3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapProp4);
http://www.w3schools.com/googleapi/tryit.asp?filename=tryhtml_map_many
MAP OVERLAYS
Google Maps Overlays
Overlays (preklapanja) su objekti na mapi koju su vezani za longitudu/latitudu.
Google Maps koristi više tipova preklapanja:

Marker

Polilinija

Poligon

Krug i kvadrat

Info Windows i kastomizovano preklapanje
Dodavanje markera
Animiranje markera
var marker=new google.maps.Marker({
position:myCenter,
});

marker.setMap(map);
var marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});

marker.setMap(map);
http://www.w3schools.com/googleapi/tryit.asp?filename=tryhtml_map_overlays_animate
Google Maps - Polyline
Polilinija je konstruisana provlačenjem
linije kroz niz koordinata tačno definisanom sekvencom
Polilinija podržava sledeće osobine:
path
strokeColor - (format: "#FFFFFF")
strokeOpacity
strokeWeight
editable
http://www.w3schools.com/googleapi/tryit.asp?filename=tryhtml_map_overlays_polyline
Google Maps - Polygon
Poligoni definišu regione unutar zatvorene petlje.
Poligon podržava sledeće osobine
path - (prva i zadnja koordinata su iste)
strokeColor - (format: "#FFFFFF")
strokeOpacity - (vrijednost između 0.0 i 1.0)
strokeWeight
fillColor - (format: "#FFFFFF")
fillOpacity
Google Maps Events

Definisanje povratne informacije nakon ispunjenja postavljenog uslova funkcije
addListener()
Metod uzima objekat, događaj koji čeka i funkciju koju će da pozvati kada se
event
desi
Klikom na marker izvršava se funkcija zumiranja
Primjeri
http://www.w3schools.com/googleapi/tryit.asp?filename=tryhtml_map_marker_click
Nakon 3 sekunde posle pomjeranja, mapa je centrirana na marker
http://www.w3schools.com/googleapi/tryit.asp?filename=tryhtml_map_marker_pan
Vrijednosti parametara
Metode
Karakteristike mape()
Dogadjaji
na mapi
Preklapanja
Događaji
Full transcript