Google Maps API biedt een eenvoudige manier om een kaart op een webpagina te embedden. De specifieke locaties kunnen worden gemarkeerd op de Google Map met een marker. De marker met InfoWindow helpt om wat informatie over de locatie toe te voegen. Een kaart met meerdere markers is erg handig wanneer je meerdere locaties in één kaart wilt tonen. Over het algemeen worden statische markers aan Google Maps toegevoegd. Maar als je dynamische locaties uit de database wilt toevoegen, kan dat eenvoudig met PHP en MySQL. Je kunt meerdere markers met Info Window dynamisch uit de database toevoegen met PHP en MySQL.
Een API-sleutel is vereist om de Google Maps JavaScript API te gebruiken. Je moet de API-sleutel op de API-aanroep specificeren om te verifiëren bij de Google Maps JavaScript API. Selecteer het project uit het Project-drop-downmenu bovenaan. Om de dynamische locaties en markeerafbeeldingen in de database op te slaan, is een tabel nodig in de database. Het dbConfig.php-bestand wordt gebruikt om verbinding te maken en de database te selecteren. Definieer een HTML-element om de Google Map met meerdere markers en Info Windows op de webpagina te embedden. Het marker-icoon van Google Maps kan eenvoudig worden gewijzigd met behulp van JavaScript. Gebruik onze voorbeeldscript om een aangepaste afbeelding aan marker-icoontjes in Google Maps toe te voegen en te wijzigen.
Je kunt markers en iconen dynamisch toevoegen vanuit de database met PHP en MySQL. Wil je deskundige hulp bij het implementeren of uitbreiden van dit script? Dan kun je op internet zoeken voor informatie, hoewel de officiële API-documentatie doorslaggevend blijft. De onderstaande code is vrij eenvoudig, maar laat je wel op het juiste spoor komen. Hoewel het nog mogelijk is om over te schakelen naar v3 van de API, blijft Google v2 ondersteunen en kun je hiermee beginnen.
Basisopzet en authentificatie
De Google Maps API vereist een API-sleutel die je bij elke aanvraag meeneemt. Je plaatst de sleutel in de JavaScript-aanroep om te verifiëren dat jouw project toegang heeft tot de kaartdiensten. Maak eerst een project aan in de Google Cloud Console en verkrijg een API-sleutel voor de JavaScript API.
API's uitgelegd (in 4 minuten)
Database-voorbereiding voor dynamische markers
Om dynamische locaties vanaf de database te tonen, heb je een tabel nodig waarin de informatie over locaties en mogelijk marker-afbeeldingen wordt opgeslagen. Het dbConfig.php-bestand wordt gebruikt om verbinding te maken en de gewenste database te selecteren. Definieer kolommen zoals latitude, longitude, address en eventueel icon_url voor elk record. Met deze gegevens kun je markers genereren op de kaart via PHP en MySQL.
HTML-element en initiële kaart
Definieer een HTML-element om de Google Map met meerdere markers en Info Windows weer te geven, bijvoorbeeld een div met id="map_canvas". Een bijbehorende stijl kan de breedte en hoogte van de kaart bepalen, bijvoorbeeld 512px bij 512px. Hiermee kan de JavaScript de kaart tekenen en de markers plaatsen op basis van de data uit de database.
Markers dynamisch toevoegen met PHP en MySQL
De belangrijkste workflow is het ophalen van locatiegegevens uit de database via PHP en deze gegevens meegeven aan JavaScript om markers te plaatsen. Je kunt de lat/long achievable vanuit de database laden en deze in de JavaScript gebruiken om markers te creëren. Het script kan zo worden uitgebreid dat elke marker een klikbare InfoWindow heeft met adres of extra informatie uit de database.
- Gebruik setCenter() om het geografische middelpunt van de kaart te bepalen, afhankelijk van de gewenste focus (bijvoorbeeld de klantlocatie of een verzameling van nabijgelegen locaties).
- Gebruik setMarker() en setIcon() om visuele markers en aangepaste iconen te plaatsen. Icons kunnen tot vijf verschillende iconen op één kaart hebben.
- Geocode, latitude en longitude kunnen direct als data-types worden doorgegeven om marker-locaties te bepalen. Een ZIP-code kan vaak ook als benadering dienen, maar is minder precies.
- Custom icons kunnen de kaart visueel verrijken; zorg ervoor dat iconen niet groter zijn dan nodig en voldoen aan de gewenste afmetingen (bijvoorbeeld max 64x64 pixels).
Voordelen van dynamische markers
Met dynamische markers kun je snel en efficiënt meerdere locaties tonen, updates doorvoeren zonder HTML-code te wijzigen, en informatie koppelen aan elke marker via InfoWindows. De belangrijkste factoren die de bruikbaarheid bepalen zijn het zoomniveau, het centrumpunt en de grootte van de kaart image. Een te laag zoomniveau kan te veel gebied tonen, terwijl een te hoog niveau mogelijk niet alle markers laat zien.
Statistische/Static maps als alternatief
Je kunt ook Google Maps API gebruiken om “static” maps te tekenen. Statistische kaarten leveren een standaardafbeelding op en vereisen geen JavaScript of CSS. Je blijft markers en iconen kunnen toevoegen, net als bij JavaScript-kaarten; Google verwerkt de heavy lifting en levert een PNG-afbeelding terug met de gewenste kaart en markers. De breedte en hoogte van de kaart kun je volledig zelf bepalen binnen de Google-limieten (momenteel tot 640px).
Voorbeeldstructuur van een eenvoudig class-model
Een voorbeeldklasse kan de HTML-tag genereren die een kaart weergeeft. Je maakt een object met standaardinstellingen en hebt setters om de belangrijkste eigenschappen van de kaart aan te passen. Je kunt eigen twists toevoegen, zoals aangepaste iconen of een standaardlocatie voor de kaartcentrum. Mogelijk kun je de klasse uitbreiden met extra methoden.
De setCenter()-methode stelt het geografische centrum van de kaart vast. Je wendt deze mogelijk niet voor elk kaartgebruik om de locatie van de klant of nabijgelegen winkels zo dicht mogelijk bij de klant te centreren. De setMarker()- en setIcon()-methodes plaatsen visuele markers op de kaart en accepteren verschillende datatype-gegevens, zoals geocode (latitude, longitude) of zelfs een POSTal Code. Let op: bij plaatsnamen kan Google creatief interpreteren, dus exacte coördinaten zijn vaak betrouwbaarder.
Gebruik van aangepaste iconen
Aangepaste iconen bieden een creatieve manier om kaarten te decoreren. Iconen kunnen maximaal 64x64 pixels zijn en je kunt tot vijf verschillende iconen tegelijk gebruiken op één kaart. De onderstaande code-elmenten tonen hoe een object de HTML-afbeelding opbouwt vanuit de Google Static Map API, en hoe encode/decode-logica wordt toegepast om geocodes of adressen correct in de URL op te nemen.
Samenvattend stappenplan
- Vraag een API-sleutel aan voor de Google Maps JavaScript API en implementeer deze in de pagina.
- Maak een database-tabel aan voor locaties (latitude, longitude, address, icon_url).
- Verbind met de database via dbConfig.php en haal locaties op.
- Definieer een HTML-element voor de kaart (bijv. div#map_canvas).
- Schrijf PHP-code om locaties als JSON naar JavaScript te sturen of direct in JavaScript te injecteren.
- Gebruik JavaScript om markers en InfoWindows te plaatsen, inclusief eventuele aangepaste icons.
- Test de kaart met meerdere markers en pas zoom/center aan voor optimale weergave.