Google Maps pure javascript

CMS Made Simple heeft verschillende modules om Google Maps aan je website toe te voegen. Deze blog laat zien dat je zonder CMSMS modules ook gebruikt kunt maken van Google Maps.

GoogleMaps CMSMS modules

CMSMS kent verschillende modules voor het integreren van Google Maps veel gebruikte zijn:

• CGGoogleMaps, integreren met andere modules
• GoogleMaps, handige 'EasyLocator' tool voor het prikken van coordinaten, support voor meerdere talen.

Een eigenzinnige GoogleMaps implementatie

De meeste gebruikers kunnen uit de voeten met de CGGoogleMaps of GoogleMaps module.

Wil je een eigenzinnige GoogleMaps implementatie maken, of loop je tegen de beperkingen van bovengenoemde modules?

Dan kan je kiezen voor een pure javascript oplossing. Het installeren en configureren van CMSMS module(s) is dan niet nodig. Wel dien je enige kennis van CMSMS, de Google API en JavaScript te hebben.

Onderstaande uitleg bevat een eenvoudig voorbeeld van een pure javascript GoogleMaps implementatie binnen CMSMS, hopelijk helpt deze je opweg.

Stap 1 API Key aanvragen

Om Google Maps op je website te kunnen gebruiken dien je voor ieder domein te beschikken over een Google Maps API key. Met je Google account kan je deze hier aanvragen.

Stap 2 het opzoeken van locatie coordinaten

Ga naar http://maps.google.com
Zoek een adres bijvoorbeeld: Dam, Amsterdam, Nederland
Plaats de volgende code in de url balk en klik enter:

javascript:void(prompt('',gApplication.getMap().getCenter()));

Onthoud de coordinaten: (52.373127, 4.89008)

Stap 3 maak Global Content Block voor het aanroepen van JavaScript files en Google API javascript scripten

noem deze GCB: 'google-map'
! vergeet niet om "API_KEY_HIER" te vervangen met je eigen GoogleMaps API key.

[literal]
<script src="http://maps.google.com/maps?hl=nl&amp;file=api&amp;v=2&amp;sensor=false&amp;key=API_KEY_HIER " type="text/javascript"></script>

<script src="/js/little-map.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">

// lat: 52.373127
// lng: 4.89008
// location_name: Dam, Amsterdam, Nederland

$(document).ready(function() {
     little-map('50.324016', '4.486264', 'Dam, Amsterdam, Nederland');
});

$(window).unload( function () { GUnload(); } );

</script>
[/literal]

Stap 4 Plaats de google-map UDT in de head van je template

{*if $page_name  eq 'contact'*}
{global_content name='google-map'}
{*/if*}

</head>

Stap 5 schrijf custom JavaScript functionaliteit

In bovenstaande GCB roep ik een JavaScript bestand aan met de naam: /js/little-map.js Dit bestand bevat de functie little-map();

//<![CDATA[

function little-map(lat, lng, location_name) {

    var lat = lat;
    var lng = lng;
    var location_name = location_name;
    
    if (GBrowserIsCompatible()) { 
      
        // display the map, with some controls and set the initial location 
        var map = new GMap2(document.getElementById("little-map"));
        map.setMapType(G_SATELLITE_MAP);
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(lat, lng), 10);
  
        // create own marker icon
        var newIcon = new GIcon();
        newIcon.image = "/images/icons/pointer.png";
        newIcon.shadow = "/images/icons/shadow.png";
        newIcon.iconSize = new GSize(25, 25);
        newIcon.shadowSize = new GSize(27, 25);
        newIcon.iconAnchor = new GPoint(6, 25);
        newIcon.infoWindowAnchor = new GPoint(27, 1);

        // createMarker: a function to create the marker and set up the event window
        function createMarker(point,html) {
            // set up newIcon object literal
            newIcon = { icon:newIcon };
            var marker = new GMarker(point, newIcon);
            
            GEvent.addListener(marker, 'click', function() {
                    var new_location = window.open('','_blank');
                    new_location.location= html;
            });
   
            return marker;
        }

        // set up a marker with info window  
        var point = new GLatLng(lat, lng);
        
        var url = 'http://maps.google.nl?daddr=' + lat + ',' + lng;
        var marker = createMarker(point,url);
                    
        map.addOverlay(marker);
    } else {
        // display a warning if the browser was not compatible
        alert("Sorry, the Google Maps API is not compatible with this browser");
    }
    
}

//]]>

Stap 6 maak GCB voor Google Map div

Ik heb er voor gekozen om de GoogleMap in een div met de naam "little-map" te plaatsen, de html code hiervoor komt in een GCB met de naam 'little-map'

<div id="little-map"></div>

<noscript>
<b>JavaScript moet aanstaan anders kun je Google Maps niet zien.</b> <br /><br /> 
Het lijkt er op dat JavaScript niet aanstaat of niet door jouw browser wordt ondersteund. Je moet je settings wijzigen en daarna kun je het opnieuw proberen.
</noscript>

Stap 7 css voor je de little-map div

Layout -> Style Sheets
+ Koppel style sheet aan je template

#little-map {
    display: block;
    width: 300px;
    height: 300px;
    margin-bottom: 18px;
    border: 1px solid #FF0000;
}

Stap 8 voeg de little-map GCB toe aan een CMSMS pagina:

Content -> Pages -> [Add new content]

Inhoud:

{global_content name='little-map'}

Stap 9 eigen pointers

In de code onder stap 4 staat een verwijzing naar pointers die in de kaart komen. Je bent vrij om je eigen pointers te maken of downloaden bijvoorbeeld vanaf hier.

newIcon.image = "/images/icons/pointer.png";
newIcon.shadow = "/images/icons/shadow.png";

Tot slot

Bovenstaande voorbeeld is basic maar bevat een mooie basis voor het het bouwen van uitgebreidere CMSMS GoogleMap toepassingen. Inspiratie opdoen kan hier

De documentatie voor de GoogleMaps JavaScript API vindt je hier.