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>

Jquery fadeIn loop (supersimpel)

Wilde net even twee blokken met tekst in elkaar laten overlopen. Leek me overkill hiervoor een cycle plugin te gebruiken dus ging even kijken wat voor leuks ik nog niet had toegepast/ontdekt in Jquery. Nu blijkt dat je met delay() functie in combi met fadeIn/out erg leuke dingen kunt doen.

HTML:


<div id="blockHolder">
    <div id="block1">Tekst 1</div>
    <div id="block2">Tekst 2</div>
</div>

CSS:


#blockHolder {
    width: 100px;
    height: 200px;
    border: 1px solid red;
    position: relative;
}

#block1,
#block2 {
    background-color: white;
    position: absolute;
    left: 0;
    top: 0;
}

Jquery code:


function fadeLoop(){
    $('#block1').fadeIn().delay(3000).fadeOut('slow', fadeLoop).delay(3000);
}

$(document).ready(function() {
    fadeLoop();
});

Op zich redelijk basic maar werkt wel leuk zo. Wat de fadeLoop() nu doet is eigenlijk #block1 transparant maken, 3 seconde wachten, weer zichtbaar maken, 3 seconde wachten en weer zichzelf aanroepen voor een herhaling. Dit werkt prima met blokken die over elkaar gepositioneerd staan via CSS en waarbij de voorste transparant/niet-transparant wordt waardoor de achterste zichtbaar wordt.

Jquery alle hyperlinks naar afbeeldingen koppelen aan Fancybox

Een tijdje terug heb ik voor een klant als service een microstukje javascript gemaakt met Jquery om alle hyperlinks in de content te hooken aan Fancybox (of welk ander script dan ook voor de weergave van foto’s). Wat hij doet is alle a elementen in de dom (of een selectie daarvan) opzoeken, kijken of ze een href hebben en of die linkt naar een afbeelding en zo ja, Fancybox eraan hangen. Normaal doe je dit gewoon door een class of iets aan de afbeelding te hangen die je gebruikt als selector maar ik wilde dat alle via het CMS ingevoerde links naar afbeeldingen ook meegepakt werden. Om de klant niet te hoeven uitleggen wat hij moest doen om afbeeldingen te linken kwam ik hierop uit.


$(document).ready(function() {
    $("a").filter(function(){
        if($(this).attr('href').match(/\.(jpe?g|png|gif)/i)) {
            $(this).fancybox();
        }
    });
});

ps. Als je sommige afbeeldingen eruit wilt houden kun je altijd nog iets toevoegen als een not()conditie (waarbij je in dit geval dus aan de hyperlink de class .noFancy meegeeft:

$(document).ready(function() {
    $("a:not(.noFancy)").filter(function(){
        if($(this).attr('href').match(/\.(jpe?g|png|gif)/i)) {
            $(this).fancybox();
        }
    });
});

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).