Wprowadzenie

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.

Tworzenie konta deweloperskiego

W pierwszym kroku musimy udać się do serwisu https://developers.google.com/. Nas najbardziej interesuje Google API Console: Google Developers Z tego poziomu przechodzimy do dostępnych interfejsów: Google Developers - dostępne projekty 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: Google Developers - API Key

Tworzenie nowej aplikacji

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();
        }
    }
}
Na potrzeby artykułu wszystko będzie się działo po stronie Klienta. Dodajemy zatem nowy widok, który dopasujemy do naszych potrzeb.

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>
Szczególną uwagę należy zwrócić na plik referencyjny skryptu ładujący dla nas mapę:
<script src="https://maps.googleapis.com/maps/api/js?key=tutaj_wpisz_swoj_klucz&callback=myMap"></script>
Na potrzeby poprawnego wyświetlania mapy został zdefiniowany kontener:
<div id="googleMap" style="height:500px;width:100%;"></div>
Najważniejszą częścią naszego widoku jest odpowiednie przygotowanie skryptu wyświetlającego mapę wraz ze zdefiniowaną przez nas lokalizacją:
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);
Są to współrzędne geograficzne, długość i szerokość, znacznika, który umieścimy na naszej mapie. Jest to również punkt centralny na naszej mapie – wyjaśnienie poniżej.

var mapProp = { center: myCenter, zoom: 10, scrollwheel: false, draggable: true, mapTypeId: google.maps.MapTypeId.ROADMAP };
Zmienna definiuje właściwości mapy. Powyższej zdeklarowaliśmy współrzędne geograficzne punktu widokowego, teraz, za pomocą właściwości center określamy, że ma to być również punkt centralny naszej mapy (zostanie wyśrodkowana wg. powyższych koordynatów). Właściwość powiększenia zoom nie musi być dodatkowo komentowana. Warto jednak przeprowadzić próby z różnymi wartościami, żeby zdecydować które powiększenie jest dla nas (i naszych Czytelników) najlepsze. Właściwości scrollwheel oraz draggable określają dopuszczalne zachowania myszki na mapie. Ostatnią właściwością jest mapTypeId, która definiuje rodzaj użytej mapy. Ja zdecydowałem się na wybór najpopularniejszej. Więcej o dostępnych typach możesz poczytać pod adresem: https://developers.google.com/maps/documentation/javascript/maptypes

var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
Punkt centralny został zdefiniowany, właściwości mapy zostały ustawione. Pora wyświetlić naszą mapę w specjalnie przygotowanym kontenerze.

var marker = new google.maps.Marker({ position: myCenter });
marker.setMap(map);
Mapa jest już praktycznie gotowa do wyświetlenia. Brakuje nam jeszcze znacznika na mapie. W naszym przypadku jest to nasz punkt centralny.

Efekt działania naszej aplikacji możecie zobaczyć na poniższym zrzucie ekranu: Taras widokowy Minorka 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);
	}
}
A efekt tak wygenerowanej mapy prezentuje się następująco: Jeżeli chodzi o komenatrz zapraszam do kolejnej sekcji...
Niestety jest to efekt zmiany polityki udostępniania API Google Maps. Google Maps z wieloma znacznikami

Polityka Google Maps

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.