Google Maps oferuję bardzo prostą metodę udostępnia map na stronach WWW, która polega na wstawieniu odpowiedniego iframe do kodu strony. Metoda ta sprawdza się w niemal 100% wdrożeń co jednak w sytuacji gdy potrzebujemy czegoś więcej ? Począwszy od stylizacji mapy, przez wyznaczanie dowolnych tras czy zaznaczanie dowolnych punktów ? W takim wypadku z pomocą przychodzi Google Maps API, dzięki któremu uzyskamy większa kontrolę nad publikowaniem map w obrębie naszych serwisów.
Aby rozpocząć korzystanie z API Google Maps należy utworzyć nowy projekt w serwisie Code Google:

https://code.google.com/apis/console/?noredirect&pli=1

 Uruchamiamy usĹ‚ugÄ™ Google Maps JavaScript API v3, ktĂłra znajduje siÄ™ w sekcji „Services”.

Google Maps JavaScript API

Przechodzimy do sekcji API Access i w niej odnajdujemy klucz, który wykorzystamy do podłączenia naszej aplikacji webowej z API Google Maps.

2

Przechodzimy do kodowania strony WWW, poniżej prezentujemy przykładowy kod strony internetowej z mapą Google przy użyciu Google Maps API:

<!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 mapOptions = {
center: { lat: -34.397, lng: 150.644},
zoom: 8
};
var map = new google.maps.Map(document.getElementById(‚map-canvas’),
mapOptions);
}
google.maps.event.addDomListener(window, ‚load’, initialize);
</script>
</head>
<body>
<div id=”map-canvas”></div>
</body>
</html>

Musimy pamiętać aby zmienić API Key na właściwy dla naszego konta w Google Code:

  <script type=”text/javascript”
src=”https://maps.googleapis.com/maps/api/js?key=API_KEY„>

Aby wskazać interesujące nas miejsce należy zmienić szerokość oraz długość geograficzną:

var mapOptions = {
center: { lat: 50.0295067, lng: 18.7024044},
zoom: 16
};

Nasza pierwsza mapa, stworzona przy uĹĽyciu Google Maps API jest gotowa.

Print Friendly, PDF & Email