Zaznacz stronę

Markery służą do oznaczania miejsc na mapach Google. Oznaczenie miejsca markerem jest stosunkowo proste i ogranicza się jedynie do utworzenia obiektu typu Google.maps.Marker do którego należy przekazać pozycję markera, mapę oraz jego tytuł.

var marker = new google.maps.Marker({
position: mojaPozycja,
map: map,
title: ‚Hello World !’
});

Jeżeli chcemy umieścić na mapie więcej niż jeden marker, deklarujemy dwa obiekty typu google.maps.LatLng przekazując długość oraz szerokość geograficzną.

var mojaPozycja1 = new google.maps.LatLng(50.0295067, 18.7024044);
var mojaPozycja2 = new google.maps.LatLng(50.0295067, 18.7034044);

Ponadto należy zadeklarować dwa obiekty markerów:

var marker1 = new google.maps.Marker({
position: mojaPozycja1,
map: map,
title: ‚Pozycja 1 !’
});
var marker2 = new google.maps.Marker({
position: mojaPozycja2,
map: map,
title: ‚Pozycja 2 !’
});

Poniżej pełen kod strony WWW:

<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
</style>
<script type=”text/javascript”
src=”https://maps.googleapis.com/maps/api/js?key=API_KEY„>
</script>
<script type=”text/javascript”>
function initialize() {
var mojaPozycja1 = new google.maps.LatLng(50.0295067, 18.7024044);
var mojaPozycja2 = new google.maps.LatLng(50.0295067, 18.7034044);
var mapOptions = {
zoom: 16,
center: mojaPozycja1
}
var map = new google.maps.Map(document.getElementById(‚map-canvas’), mapOptions);

var marker1 = new google.maps.Marker({
position: mojaPozycja1,
map: map,
title: ‚Pozycja 1 !’
});
var marker2 = new google.maps.Marker({
position: mojaPozycja2,
map: map,
title: ‚Pozycja 2 !’
});
}

google.maps.event.addDomListener(window, ‚load’, initialize);
</script>
</head>
<body>
<div id=”map-canvas”></div>
</body>
</html>

Należy pamiętać aby zmienić API_KEY na właściwy klucz wygenerowany przy użyciu własnego konta w Google.