28 Sep

Google maps op je website met javascript

Het volgende JavaScript maakt het makkelijk om Google Maps in je website te integreren.

  1. Google Maps API key aanvragen
  2. Het volgende script online zetten

Google Maps API key aanvragen

Ga naar http://code.google.com/intl/nl/apis/maps/signup.html en vul je domeinnaam in en volg de aanwijzingen van Google.

Het Google Maps script online plaatsen

Dit is het script en kun je in een aparte JavaScript file zetten. Je kunt gemakkelijk Google Maps instellen door de settings in het script aan te passen!


    var WINDOW_HTML = '<div><strong>hetCMS</strong><br  />Helperpark 292<br  />9723 ZA Groningen</div>'
    var ADDRESS = "Helperpark 292, 9723 ZA, Groningen, Nederland";
    var ZOOM = 14;
    var HTML_ELEMENT_ID = 'map'
    // used for debugging, if you dont need this, remove this code!
    if (document.getElementById(HTML_ELEMENT_ID) == 'null') {
        alert('Google Maps Error:\n\rEr is geen HTML element met ID: "' + HTML_ELEMENT_ID +'"');
    }
    // end used for debugging!
    function geocodeAddress(address) {
        var geocoder = new GClientGeocoder();
        geocoder.getLatLng(address,
        function(point) {
            if (!point) {
                alert('Google Maps Error:\n\rAdres: "' + address + " niet gevonden!");
            } else {
                if (GBrowserIsCompatible()) {
                    var map = new GMap2(document.getElementById(HTML_ELEMENT_ID));
                    map.addControl(new GLargeMapControl());
                    map.addControl(new GMapTypeControl());
                    map.setCenter(point, ZOOM);
                    var marker = new GMarker(point);
                    map.addOverlay(marker);
                    GEvent.addListener(marker, "click", function() {
                        marker.openInfoWindowHtml(WINDOW_HTML);
                    });
                    marker.openInfoWindowHtml(WINDOW_HTML);
                }
            }
        }
        );
    }
    window.onload = geocodeAddress(ADDRESS)