Как добавить сервис карт Google в приложение с помощью JavaScript

Очень часто разработчикам Google хочется сказать большое спасибо. Особенно за полезный сервис карт, и особенно за его 3 версию — именно ее мы использовали в наших проектах. Если вы работаете над приложением, которое будет прокладывать маршруты и искать оптимальные пути, читайте дальше, как реализовать эти функции сервиса карт через JavaScript.

Инициализация карты производится следующим образом:

var mapCenter = new google.maps.LatLng(mapOptions['center']['lat'], mapOptions['center']['lng']);
var myOptions = {
	center: mapCenter,
	mapTypeId: google.maps.MapTypeId.ROADMAP
}
var Map = google.maps.Map(document.getElementById(‘Map’), myOptions);

Чтобы отметить точку на карте, достаточно сделать следующее:

>var markerLatLng = new google.maps.LatLng(lat,lng);//lat, lng – new coordinates of the marker
var markerOpt = {
	position: markerLatLng,
	map: Map
};
var marker = new google.maps.Marker(markerOpt);

При этом маркеру можно задать информационное окно, которое будет появляться либо при инициализации маркера, либо при щелчке по маркеру на карте:

//adding function to marker click event
google.maps.event.addListener(marker, 'click', function() {
	infoWindow.open(Map, marker);
});
//show marker dialog window 
infoWindow.open(Map, marker);

Маршрутизация

Как я упоминал выше, карты Google позволяют соединять две точки на карте, если это возможно, создавая маршрут:

var directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(Map);
var directionsService = new google.maps.DirectionsService();
var request = {
			origin: start,
			destination: end,
			travelMode: google.maps.TravelMode.DRIVING
		};
 directionsService.route(request, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
		directionsDisplay.setDirections(result);
        }
});

Если маршрут проложить невозможно, то появится сообщение с предупреждением. При разработке маршрута сервис автоматически создает два маркера — начало и конец маршрута. При желании их можно убрать, для этого перед инициализацией маршрута достаточно прописать:

directionsDisplay.setOptions({suppressMarkers: true});

Так вы можете убрать маркеры, созданные по умолчанию, и поставить свои.

Центрирование карты

Карту можно центрировать. Для этого существует метод:

var mapCenter = new google.maps.LatLng(lat, lng);//lat, lng – coordinates of the new map center
Map.setCenter(mapCenter);

Поиск адресов

Стоит отметить еще один мощный и полезный сервис, предоставляемый картами Google — поиск адресов. Реализуется он достаточно просто:

var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {//address – search address
	if (status == google.maps.GeocoderStatus.OK) {	
		for( var i = 0, l = results.length; i < l; i++ ) {
			//working with the variants found
		} 
	} else {
		alert("Geocode was not successful for the following reason: " + status);
	}
});

Перечисленные сервисы — лишь малая часть возможностей карт Google, но их пользу трудно переоценить. Теперь, вооружившись знаниями о добавлении возможностей карт Google в приложение, вы легко реализуете поиск ближайших заправок или кратчайшего пути домой. Удачных проектов!