Google Maps JavaScript API is een eenvoudig te gebruiken en redelijk krachtige JavaScript-tool waarmee we kaarten op een website kunnen maken en weergeven. Dit artikel zal u helpen bij het instellen van de Google Maps JS API en vervolgens een eenvoudige kaart maken met een markering en een polylijnvorm en een paar andere functies.

De kaart instellen

  1. 1 Open of maak uw webpagina. Als u nog geen webpagina heeft waar u de kaart in wilt invoegen, kunt u de volgende HTML5-sjabloon gebruiken; sla het op als 'map_page.html': 
      <html LANG="En"> <hoofd> <meta charset="UTF-8"> <titel>My Leaflet Map</titel> </hoofd> <lichaam>  </lichaam> </html>
  2. 2 Voeg het Google Maps JS-bestand toe. Plak hiertoe de volgende regel code in uw HTML-bestand, in de gebied, op een nieuwe regel, vlak voor de sluiting label: 
     <script async uitstellen  src="Https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]&callback=initMap"> </script>
  3. 3 Koop een API-sleutel en voeg deze toe aan de JS-URL. Om de JS API van Google Maps te gebruiken - net als elke andere Google API - hebt u een API-sleutel nodig, die vergelijkbaar is met een toegangscode. U moet dan uw nieuwe sleutel invoegen in de URL vanaf de bovenstaande stap waar staat [YOUR_API_KEY] (verwijder de vierkante haken). Zie Een sleutel / verificatiepagina verkrijgen voor uw eigen sleutel.
  4. 4 Voeg een HTML-kaartcontainer toe. Google Maps geeft de kaart weer in een HTML-element, dus u moet er een opgeven. Plak de volgende regel met markeringen in de : 
     <div ID kaart="kaart"></div>
  5. 5 Stijl de kaartcontainer. U moet instellen hoe groot de kaart zal zijn wanneer deze wordt weergegeven en u moet CSS gebruiken om dit te doen. U kunt het volgende aan het document toevoegen : 
     <>> #kaart  hoogte: 500px; breedte: 700px;  >
  6. 6 Maak het kaartobject. Als u wilt beginnen met het schrijven van de JavaScript-code die de kaart instelt, moet u een gebied naar de na de kaartcontainer div. Ook hierbinnen kunt u het kaartobject maken door het Kaart() functie van het google.maps-object. Je moet ook de functie het HTML-element html van de kaartcontainer doorgeven, zoals dit: 
     <scripttype='Text / javascript'> var kaart; functie initMap()  // Maak het kaartobject. kaart = nieuwe google.kaarten.Kaart(document.getElementById('kaart'));  script>
  7. 7 Stel de zoomlens en het midden van de kaart in. De zoom- en centreringseigenschappen van de kaart bepalen het gebied dat standaard door de kaart wordt bedekt wanneer de kaart wordt geladen. Dit zijn slechts de kaarten standaard waarden; de kaarten actueel zoom en center kunnen later worden gewijzigd als je die bedieningselementen inschakelt - we komen daar later op terug.
    Notitie: U moet gewoon de volgende regels code in uw element (uit de vorige stap), en zorg ervoor dat het is binnen de initMap () functie, vóór het sluiten '': 
     kaart.setZoom(2); kaart.setCenter(LAT: 0, lng: 0);
  8. 8 Voeg een marker toe. Markeringen geven de locatie van een punt op een kaart aan. In Leaflet zijn markeringen een soort 'overlay', zodat ze direct aan kaarten kunnen worden toegevoegd. Standaard wordt een markering weergegeven als een rode punaise, wat een standaardafbeelding is die u kunt wijzigen. 
     var markeerstift = nieuwe google.kaarten.Markeerstift(); var coördinaten = LAT: 20, lng: 20; markeerstift.SetPosition(coördinaten); markeerstift.setMap(kaart); markeerstift.setTitle('Tsjaad');
  9. 9 Polylijn toevoegen. Net als de marker is een polylijn een soort overlay, maar deze wordt voor een ander doel gebruikt. Een polylijn is gewoon een lijn met meerdere segmenten. U definieert het door de coördinaten op te geven van de punten waar de lijnsegmenten tussen zullen zijn. De coördinaten moeten een array van coördinaatpuntobjecten zijn. Een van de geweldige functies van de polylijnen van Google Maps is dat ze 'geodetisch' kunnen zijn, wat betekent dat ze zich kunnen aanpassen aan de vorm van de aarde! U kunt dat later als een optie instellen. 
     var coördinaten = [ LAT: 20, lng: 10, LAT: 10, lng: 20, LAT: 20, lng: 30 ]; var polyline = nieuwe google.kaarten.polyline(); polylijn.setPath(coördinaten); // Gebruik van de array die we hierboven hebben gedefinieerd polylijn.setMap(kaart);
  10. 10 Stel opties in. Elke overlay in Google Maps bevat opties die u kunt instellen en die bepalen hoe de overlay eruit ziet. U kunt de opties van de markering instellen (uit de bovenstaande stappen) om deze er uniek uit te laten zien, maar hieronder kunt u opties instellen voor de polyline die u zojuist hebt gemaakt: 
     polylijn.setOptions( strokeColor: '# FF0000', // Fel rood strokeOpacity: 1.0, // Volledig ondoorzichtig (niet doorschijnend) strokeWeight: 2 // Dikte van 2 pixels );
  11. 11 De voltooide kaart.