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>

DD_roundies ronden hoeken in alle browsers

Nu CSS3 steeds meer als mogelijkheid wordt gezien en de opties voor ronde hoeken door de verschillende browsers ondersteund worden gaat dit interessant worden. Echter niet alle browsers ondersteunen ronde hoeken en de tags om ze toe te passen wijken nog af omdat ze voorafgegaan worden door “browser unieke” tags zoals -moz en -webkit.

Op zich is hier nog omheen te komen maar IE6, IE7 en IE8 doen helemaal nog niet mee. Nu zijn er flinke hoeveelheden oplossingen met o.a. Jquery (altijd een goed verkoopargument) om de ronde hoeken overal werkend te krijgen. Echter heb ik een enorm enthousiast gevoel bij de oplossing van Drew Diller.

Wij waren al bekend met zijn werk rondom één van de leukere PNG fixes voor Internet Explorer, DD belated PNG.

Nu heeft Drew Diller ook een prachtige fix gemaakt voor ronde hoeken welke je, in het kort, op twee manieren kunt toepassen;

Als aanvulling op je CSS3 code voor ronde hoeken in IE



Als enige bron van ronde hoeken in je code

Met de 3e parameter op true geef je opdracht om alle browsers van ronde hoeken te voorzien. DD roundies kijkt zelf welke syntax er nodig is voor je browser.



Download hier DD roundies en lees ook de volledige documentatie over de mogelijkheden (het is namelijk ook mogelijk met DD roundies ook gelijk DD belated te initiëren).