W tym wpisie pokażę jak łatwo można nanosić obiekty wraz z ich opisami na mapę wykorzystując API Google Maps. Jest to trzecia część z cyklu o geolokalizacji i Googlee maps.
Jeżeli drogi czytelniku nie czytałeś poprzednich części cyklu zachęcam Cię do przeczytania pierwszego wpisu. Wiedza tam zawarta jest niezbędna do zrozumienia poniższego kodu.
Gotowy? No to przejdźmy do kodu i jego analizy 
<!DOCTYPE html>
<html>
<head>
<style>
html, body, #map_canvas {
height: 100%;
margin: 0px;
padding: 0px;
}
#map-container{
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
/**
*
* @type @exp;google@pro;maps@call;Map Obiekt mapy
*/
var map;
/**
*
* @type Array Tablica markerow
*/
var marker = new Array();
/**
*
* @type Array Tablica chmurek z opisami dla markerow
*/
var infowindow = new Array();
/**
* Tworzy obiekt mapy z podstawowymi ustawieniami
* @returns void
*/
function initialize() {
var myLatlng = new google.maps.LatLng(52.24125614966341, 20.9619140625);
var mapOptions = {
zoom: 7,
center: myLatlng
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
addMarker(new google.maps.LatLng(52.24125614966341, 20.9619140625), 'Warszawa', 'Stolica Polski');
addMarker(new google.maps.LatLng(50.0647793, 19.9475100), 'Kraków', 'Piękna starówka :)');
addMarker(new google.maps.LatLng(51.1462584, 21.9684219), 'Opole Lubelskie', 'A tu mieszkam i pracuję...');
}
/**
* Dodaje marker do mapy
* @param Latlng latlng obiekt ze wspolrzednymi geograficznymi
* @param string name Nazwa markera
* @param string description Opis markera do chmurki
* @returns void
*/
function addMarker(latlng, name, description) {
console.log("Wspolrzedne: " + latlng.lat() + ' ' + latlng.lng());
marker.push(new google.maps.Marker({
position: latlng,
map: map,
title: name
}));
infowindow.push(new google.maps.InfoWindow({
content: description
}));
// wyswietla dymki po kliknieciu na marker
google.maps.event.addListener(marker[infowindow.length - 1], 'click', (function(i) {
return function() {
infowindow[i].open(map, marker[i]);
}
})(infowindow.length - 1));
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-container">
<div id="map_canvas"></div>
</div>
</body>
</html>
Najbardziej interesującym fragmentem kodu jest dla nas funkcja addMarker(). Funkcja ta posiada 3 argumenty: obiekt latlng (zawierający współrzędne geograficzne), nazwę oraz opis pozycji.
W linii 57 dodaję do tablicy nowy obiekt markera – jako jego parametry ustawiam pozycję, nazwę oraz podaję obiekt mapy, na której ma być narysowany. W kolejnej linii tworzę obiekt InfoWindow, który zawiera opis pozycji. Opis ten może zawierać kod HTML, dzięki czemu mamy spore pole manewru :).
W linii 66 dla każdego elementu tablicy z markerami dodaję listener, który po kliknięciu na marker otwiera okno z opisem danej pozycji.
W funkcji initialize() tworzę 3 przykładowe markery. Dlaczego akurat tam? Przed jakąkolwiek modyfikacją musi być stworzony obiekt mapy.
Jak to wygląda w praktyce możesz zobaczyć pod tym linkiem.
Kanał ATOM
Już za 2 miesiące będziemy mogli spotkać się w Warszawie. 7 kwietnia 2014 odbędzie się kolejna edycja konferencji 4Developers.