Wanneer je bijvoorbeeld een webshop hebt en je wilt weten waar je klanten wonen kan je natuurlijk door je klanten bestand bladeren en elke keer een streepje zetten bij een plaats. Leuker is om dit op de kaart te zien! Op die kaart kan uiteraard ingezoomd worden en staat er een icoontje op het adres van de klant met daarbij de naam.
Beginnen
Om dit voor elkaar te krijgen kan je gebruik maken van Google API’s, waaronder Maps en Geolocation. Om hiervan gebruik te maken dien je eerst toegang te krijgen tot deze API’s. Ga hiervoor naar Google API’s Console. Ga vervolgens naar “services” in het menu en zet de “Google Maps API v3” aan. Hierna ga je naar “API Access” in het menu en daar is de “API key” te vinden om toegang te krijgen. Eventueel kan je op “Edit allowed referers” klikken en hierna je domeinnaam invullen, op die manier is de betreffende API key enkel te gebruiken op die domeinnaam.
Google Geolocation
Voordat we alle klanten op de kaart kunnen zetten hebben we de coördinaten nodig van het adres. Hiervoor dienen we eerst verbinding te maken met de database waar de klanten in staan, vervolgens kunnen we één voor één de coördinaten opvragen. Maar zodra we deze hebben is het wel zo handig deze ook op te slaan! Maak twee nieuwe kolommen aan in het klanten tabel: “lat” en “lng”. Eventueel kan je als type een decimaal instellen. Ik heb voor simpelweg een “varchar” veld gekozen. Hierna kunnen we bijvoorbeeld het volgende stukje code gebruiken:
<?php
// Hier uiteraard eerst een verbinding maken met de database
// Alle klanten ophalen welke nog géén coördinaten hebben
$query = mysqli_query('SELECT * FROM klanten WHERE lat=0 OR lng=0');
// Door alle opgehaalde klanten lopen
while($row = mysqli_fetch_assoc($query))
{
// De URL maken met het adres, postcode en de woonplaats
// van de klant om informatie over op te halen
$url = 'http://maps.googleapis.com/maps/api/geocode/json?address='.urlencode($row['adres'].' '.$row['postcode'].' '.$row['plaats']).'&sensor=false&language=nl®ion=nl';
// Het resultaat ophalen
if($result = file_get_contents($url))
{
// Het resultaat is JSON, zodoende nog even decoderen
$result = json_decode($result);
// Kijken of het resultaat goed is
if($result->status == 'OK')
{
// De locatie uit het resultaat ophalen
$location = $result->results[0]->geometry->location;
// De klant gegevens updaten met de coördinaten
mysqli_query('UPDATE klanten SET lat="'.secure_in($location->lat).'", lng="'.secure_in($location->lng).'" WHERE id='.$row['id']);
}
}
}
?>
Door het draaien van dit stukje code worden dus de coördinaten aan de klant regels toegevoegd. In mijn geval moest ik dit script een aantal keren draaien voordat alle klanten de coördinaten hadden. Waarschijnlijk door limieten van deze API van Google. Eventueel kan je experimenteren met de sleep functie, wellicht dat er wat tijd tussen een verzoek moet zitten.
Google Maps
Nu de coördinaten bekend zijn kunnen deze geplaatst worden op een kaart! Hiervoor dient wél eerst de Maps API aangesproken te worden, zet hiervoor de volgende regel met je eigen API key in de “head”:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&key=HIER-JE-API-KEY&sensor=false&language=nl®ion=nl"></script>
En voeg vervolgens een div toe aan de “body” zoals ook gedaan wordt in de Maps API documentatie:
<div id="map-canvas"></div>
Hierna openen we een script tag en kunnen we aan de gang! Eerst maar de Nederlandse kaart voor ons krijgen:
// Nieuwe cq mooiere visuele weergave gebruiken
google.maps.visualRefresh = true;
// Functie die aangesproken wordt zodra de pagina geladen is
function initialize()
{
// Kaart opties
var mapOptions = {
center: new google.maps.LatLng(52.23, 4.55), // Coördinaten van centraal Nederland
zoom: 8, // Inzoomen zodat Nederland goed zichtbaar is
mapTypeId: google.maps.MapTypeId.ROADMAP // De wegenkaart gebruiken
};
// Kaart laden in div met het ID map-canvas
var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
}
// Zodra de pagina is geladen de initialize functie aanspreken
google.maps.event.addDomListener(window, 'load', initialize);
Om de klanten op de kaart weer te geven dienen we deze eerst op te halen:
<?php
// Alle klanten ophalen
$query = mysql_query('SELECT * FROM klanten');
// Door alle klanten lopen
while($row = mysql_fetch_assoc($query))
{
// Een array opbouwen met de klant naam en coördinaten
// (welke nog even van een komma naar een punt veranderd worden)
$locations[] = '["'.$row['naam'].'","'.str_replace(',','.',$row['lat']).'","'.str_replace(',','.',$row['lng']).'"]';
}
?>
// De array met gegevens in Javascript
var locations = [
<?=implode(',',$locations); // De in PHP gemaakte array samenvoegen tot een regel gescheiden door komma's ?>
];
Waarna we een nieuwe functie kunnen maken om de klanten op de kaart te zetten:
function setMarkers(map,locations)
{
// De afbeelding voor de klanten op de kaart
var image = 'http://icons.iconarchive.com/icons/icons-land/vista-people/24/Office-Customer-Male-Light-icon.png';
// Door alle klanten lopen
for (var i = 0; i < locations.length; i++)
{
// De coördinaten ophalen
var loc = locations[i];
var myLatLng = new google.maps.LatLng(loc[1], loc[2]);
// De "marker" plaatsen
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: loc[0]
});
}
}
Het enige wat er nu nog moet gebeuren is deze functie aanspreken en het allemaal samenvoegen, met als resultaat:
<?php
// Alle klanten ophalen
$query = mysql_query('SELECT * FROM klanten');
// Door alle klanten lopen
while($row = mysql_fetch_assoc($query))
{
// Een array opbouwen met de klant naam en coördinaten
// (welke nog even van een komma naar een punt veranderd worden)
$locations[] = '["'.$row['naam'].'","'.str_replace(',','.',$row['lat']).'","'.str_replace(',','.',$row['lng']).'"]';
}
?>
// De array met gegevens in Javascript
var locations = [
<?=implode(',',$locations); // De in PHP gemaakte array samenvoegen tot een regel gescheiden door komma's ?>
];
// Nieuwe cq mooiere visuele weergave gebruiken
google.maps.visualRefresh = true;
// Functie die aangesproken wordt zodra de pagina geladen is
function initialize()
{
// Kaart opties
var mapOptions = {
center: new google.maps.LatLng(52.23, 4.55), // Coördinaten van centraal Nederland
zoom: 8, // Inzoomen zodat Nederland goed zichtbaar is
mapTypeId: google.maps.MapTypeId.ROADMAP // De wegenkaart gebruiken
};
// Kaart laden in div met het ID map-canvas
var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
// De "markers" plaatsen
setMarkers(map,locations);
}
// Functie die de "markers" plaatst op de kaart
function setMarkers(map,locations)
{
// De afbeelding voor de klanten op de kaart
var image = 'http://icons.iconarchive.com/icons/icons-land/vista-people/24/Office-Customer-Male-Light-icon.png';
// Door alle klanten lopen
for (var i = 0; i < locations.length; i++)
{
// De coördinaten ophalen
var loc = locations[i];
var myLatLng = new google.maps.LatLng(loc[1], loc[2]);
// De "marker" plaatsen
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: loc[0]
});
}
}
// Zodra de pagina is geladen de initialize functie aanspreken
google.maps.event.addDomListener(window, 'load', initialize);
Dat is toch stukken leuker dan een lijst met plaatsnamen! Uiteraard is het aan alle kanten uit te breiden, voor inspiratie: bekijk de Maps API documentatie eens!
