Używanie map osadzonych w naszych aplikacjach nie jest tak częste jak uwierzytelnianie przez zewnętrzne serwisy – warto jednak również zagłębić się w tym temacie. Może kiedyś będzie przygotowywać aplikację pozwalającą na poszukiwanie warsztatów samochodowych w pobliżu Waszej okolicy albo zbierzecie wszystkie osoby zajmujące się grawerowaniem obrączek. Z pomocą w ustalaniu lokalizacji przychodzi Google Maps. W tym artykule zajmiemy się konfiguracją naszego konta w serwisie, przygotujemy prostą aplikację oraz skupimy się na zmianach w polityce udostępniania API.

W pierwszym kroku musimy udać się do serwisu https://developers.google.com/. Nas najbardziej interesuje Google API Console: Z tego poziomu przechodzimy do dostępnych interfejsów: Decydujemy się na użycie map: Maps JavaScript API. Wszystko jest już gotowe do użycia – musimy tylko w poprawny sposób użyć udostępnione dane. Dla nas najważniejszy jest klucz:

Tym razem nie będę powielał schematu ostatniego artykułu. Tworzymy nową aplikację ASP.NET Core 2.0 MVC, dodajemy nowy(pusty) kontroler, GoogleMapsController i od razu przechodzimy do implementacji.

namespace GoogleMaps.Controllers
{
    public class GoogleMapsController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Jak najłatwiej będzie wszystko wytłumaczyć? Przez dokładny opis kodu załączonego poniżej:

@{
	ViewBag.Title = "ASP.NET Core – Google Maps API";
}

<title>@ViewBag.Title</title>

<h2 style="background-color: rgb(73,171,210);color: white; text-align: center; height:50px;padding-top:10px">ASP.NET Core – Google Maps API</h2>
<fieldset>
<legend style="font-family: 'Segoe UI'; color: rgb(73,171,210); font-size: large;">Taras widokowy: Mirador Sa Punta</legend>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="googleMap" style="height:500px;width:100%;"></div>
<script>

	function myMap() {
		var myCenter = new google.maps.LatLng(39.9349963, 3.9609376);
		var mapProp = { center: myCenter, zoom: 12, scrollwheel: false, draggable: true, mapTypeId: google.maps.MapTypeId.ROADMAP };
		var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
		var marker = new google.maps.Marker({ position: myCenter });
		marker.setMap(map);
	}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=tutaj_wpisz_swoj_kluc&callback=myMap"></script>
</fieldset>
<footer>
	<p style="background-color: rgb(73,171,210); font-weight: bold; color:white; text-align: center;height:50px; padding-top:15px">© @DateTime.Now.ToLocalTime()</p>
</footer>
			

Poza standardowymi skryptami:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://maps.googleapis.com/maps/api/js?key=tutaj_wpisz_swoj_klucz&callback=myMap"></script>

<div id="googleMap" style="height:500px;width:100%;"></div>

function myMap() {
	var myCenter = new google.maps.LatLng(39.9349963, 3.9609376);
	var mapProp = { center: myCenter, zoom: 12, scrollwheel: false, draggable: true, mapTypeId: google.maps.MapTypeId.ROADMAP };
	var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
	var marker = new google.maps.Marker({ position: myCenter });
	marker.setMap(map);
}

Kluczowe w tym przypadku jest poprawne zrozumienie działania skryptu. Dzięki temu na późniejszych krokach będziemy w stanie wprowadzać różne modyfikacje, np. wyświetlenie kilku lokalizacji.

var myCenter = new google.maps.LatLng(39.9349963, 3.9609376);

var mapProp = { center: myCenter, zoom: 10, scrollwheel: false, draggable: true, mapTypeId: google.maps.MapTypeId.ROADMAP };

var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

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

Efekt działania naszej aplikacji możecie zobaczyć na poniższym zrzucie ekranu: Mapa została poprawnie wyświetlona, znacznik został dodany a całość jest wyśrodkowana wg. naszego punktu. To jednak nie koniec naszych możliwości. W ramach artykułu dodamy więcej niż jeden punkt na naszej mapie. Wszystko będzie się działo w obrębie niesamowicie pięknej wyspy jaką jest Minorka:

function myMap() {
	var myCenter = new google.maps.LatLng(39.9349963, 3.9609376);
    var mapProp = { center: myCenter, zoom: 10, scrollwheel: false, draggable: true, mapTypeId: google.maps.MapTypeId.ROADMAP };
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    var marker = new google.maps.Marker({ position: myCenter });
    marker.setMap(map);
}

function AddSomeRandomMarkers() {

	var options = {
		zoom: 11,
		center: new google.maps.LatLng(39.960342, 4.108594), // Minorka, Menorka, Baleary, Hiszpania
		mapTypeId: google.maps.MapTypeId.TERRAIN,
		mapTypeControl: false
	};

	// inicjalizacja mapy
	var map = new google.maps.Map(document.getElementById('googleMap'), options);

	// Przykładowe punkt na północnym-wschodzie oraz południowym-zachodzie
	// Zostaną użyte do wyświetlenia losowych punktów na mapie
	var northEast = new google.maps.LatLng(40.085709, 4.091386);
	var southWest = new google.maps.LatLng(39.924273, 3.824998);
	var longitudeSpan = northEast.lng() - southWest.lng(); // rozpiętość geograficzna w której zdefiniujemy nasz punkt
	var latitudeSpan = northEast.lat() - southWest.lat();  // rozpiętość geograficzna w której zdefiniujemy nasz punkt

	// ustawienie kilku przykładowych znaczników
	for (var i = 0; i < 3; i++) {
		// init markers
		var marker = new google.maps.Marker({
			position: new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()),
			map: map,
			title: 'Kliknij na mnie! ' + i
		});

		// opisy dla dodawanych znaczników
		(function (marker, i) {
			// dodanie evenu na click
			google.maps.event.addListener(marker, 'click', function () {
				infowindow = new google.maps.InfoWindow({
					content: 'Przykładowy opis znacznika'
				});
				infowindow.open(map, marker);
			});
		})(marker, i);
	}
}

Niestety Google Maps nie jest już darmowe. Dlatego możecie zobaczyć, że mapa jest ciemniejsza oraz pojawia się dodatkowy napis: 'For development purposes only'.

Aby pozbyć się tej wiadomości należy swoje konto powiąza z kartą kredytową. Nie oznacza to, że opłata będzie pobierana za każde wyświetlenie mapy. W przypadku kwot nie przekraczających 200$ miesięcznie, nie zostaniesz obciążony dodatkowymi kosztami.

Więcej informacji można uzyskać pod adresem https://cloud.google.com/maps-platform/pricing/
Szczegółowe informacje dostępne są pod poniższym adresem https://developers.google.com/maps/documentation/embed/usage-and-billing#embed

Warto również mieć na uwadzę, że znak wodny For development purposes only może wystąpić również w następujących przypadkach:

• w przesyłanym żądaniu brakuje klucza API;
• wspomniane powyżej rozliczenia nie zostały połączone z Twoim kontem;
• podana metoda rozliczeń jest nieprawidłowa (np. nieaktywna karta kredytowa);
• limit dzienny (nałożony przez Ciebie) został przekroczony.