Configurarea unei harti Google. Google Maps Platform

Salut. O harta Google se insereaza astazi in pagina putin diferit fata de procedeul bazat pe iframe valabil multi ani. Google Maps Platform pune la dispozitie un API configurabil prin JavaScript care acopera toate aspectele necesare (si extra) pentru a afisa o harta Google intr-o pagina web.

Google map: html + Java Script

Avem nevoie de un element div identificabil printr-un ID:

1. Elementul div pentru harta

 <!--Elementul div pentru harta -->

<div id="map"></div>

2. Initierea si adaugarea hartii Google

<script>
// Initializeaza si adauga harta
function initMap() {
  // Locatia in coordonate geografice
  var uluru = {lat: -25.344, lng: 131.036};
  // Harta centrata pe coordonatele de mai sus
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 4, center: uluru});
  // Markerul pozitionat in acelasi loc
  var marker = new google.maps.Marker({position: uluru, map: map});
}
</script>

3. Incarcarea API-ului Google map

<!--Incarca API-ul di URL-ul specificat
    * Atributul async permite browserului sa afiseze pagina in timp ce API-ul se incarca
    * Parametrul key contine cheia API personala 
    * Parametru callback executa functia initMap()
    -->

   
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>

Remarcam prezenta ca parametru in url a cheii generate din contul Google. Si de asemenea un parametru callback cu valoarea numele unei functii JavaScript pe care o vom scrie indata. Aceasta functie va fi apelata pentru a initia si configura harta.

Optiuni de configurare Google map

Exista o multitudine de optiuni de particularizare a unei harti Google:

• adaugarea unei imagini sau cluster de imagini pentru marker (markere)
• adaugarea de animatii la aceste markere
• stilizarea hartii (culori, background, zoom, font-uri, etc)

Documentatia Google Maps Platform

Documentatia aici: https://developers.google.com/maps/documentation/javascript/tutorial

Exemplu de implementare custom efectuat la Sector web

3dartagency dot com slash contact

Multumesc pentru atentie. Spor la treaba!