Google maps coördinaten ophalen met klik op een kaart

Het gebruiken van een Google maps (of iedere andere kaartleverancier) voor het tonen van winkels, gebouwen, locaties enzovoorts is steeds gebruikelijker. Normaliter kun je op basis van een adres of postcode prima bepalen waar iets gelegen is. Heel soms willen mensen echter iets meer precisie hierin. Bijvoorbeeld omdat het formele adres anders is dan wat voor bezoekers logisch is of omdat het een groot pand betreft waarbij de exacte locatie niet altijd de meest gewenste is.

Met het volgende simpele stukje code kun je een Google maps kaart renderen die, als men erop klikt, de latitude en longitude beschikbaar stelt om bijvoorbeeld op te slaan of in een veld van een formulier te wijzigen.

De HTML


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script type="text/javascript" src="/javascript_code_zoals_hieronder_getoond.js"></script>
  </head>
  <body>
    <div id="maps" style="width: 400px; height: 400px; border: 1px solid grey"></div>
  </body>
</html>

JavaScript code

<script>
    function initialize() {
        var mapOptions = {
            zoom: 7,
            center: new google.maps.LatLng(51.9568120077237, 4.570355415344238)
        };

        var map = new google.maps.Map(document.getElementById('maps'), mapOptions);

        google.maps.event.addListener(map, 'click', function(e) {
            if (confirm("GEO-locatie (opnieuw) vaststellen?") == true) {
                if(!marker) {
                    var marker = new google.maps.Marker({
                        position: map.getCenter(),
                        map: map
                    });
                }
                map.setCenter(e.latLng);
                marker.setPosition(e.latLng);

                console.log(e.latLng.lat());
                console.log(e.latLng.lng());
            }
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

Google maps API geocoding met Zend_Http_Client

Voor een leukheidje in een CMS wilde ik de geo-coordinaten van een adres ophalen. Ik had al wel iets liggen maar dat was wat oudere code en wilde de output als JSON hebben. Hier de meest recht-toe-recht-aan oplossing om verder te ontwikkelen naar wens:

// Address to lookup. Don't overlook the + instead of spaces
$address = 'Stationsplein+45,3013+AK,ROTTERDAM';

$client = new Zend_Http_Client();
$client->setUri('https://maps.googleapis.com/maps/geo');
$client->setConfig(array('maxredirects' => 0, 'timeout' => 30));
$client->setParameterGet('output', 'json');
$client->setParameterGet('q', $address);
$response = $client->request('GET');

$body = $response->getBody();
$response = Zend_Json::decode($body, Zend_Json::TYPE_OBJECT);

if($response->Status->code == 200) {
    // Jeej, success
    Zend_Debug::dump($response);
} else {
    // Trouble!
    Zend_Debug::dump($response);
}

Zoals ik al zei, geen übercode die klaar is voor gebruik maar een leuke basis voor implementatie in een Google maps service of class.