Google maps kaart met jQuery UI en JSON

Door de jaren heen heb ik al vaak Google maps kaartjes gemaakt met een hoop markers erop, al dan niet gevoed via een of andere feed. De eerste keer was het een echte hel. Uren heb ik gezocht op het net totdat ik een begrijpbare en aanpasbare versie vond dat ik kon toepassen. Vergeet niet, ik ben geen programmeur pur sang.

Vandaag heb ik de (tot nu toe) meest eenvoudige integratie van een Google maps kaartje gemaakt. Het is verbazingwekkend eenvoudig te implementeren en met een ferme performantieboost t.o.v. eerdere creaties.

In de <head>:

    <style type="text/css">
      html, body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.js"></script>
   
    <script type="text/javascript">         

        $(function() { 
            $('#map_canvas').gmap({'callback': function() {
                var self = this;
                $.getJSON( 'URL_TO_JSON_FILE', function(data) { 
                    $.each( data.markers, function(i, marker) {
                        self.addMarker({ 
                            'title': marker.title,
                            'position': new google.maps.LatLng(marker.lat, marker.lng),
                            'bounds': true })
                            .click(function() {                            
                                self.openInfoWindow({ 'content': marker.content }, this);
                            })
                        });
                    });
                }});                
            });
    
    </script>

 

In de <body>:

    <div id="map_canvas"></div>

 

JSON feed:

 {"markers":[
    { "lat":57.7973333,
      "lng":12.0502107,
      "title":"Brussels",
      "content":"Capital of Belgium" },
    { "lat":57.6969943,
      "lng":11.9865,
      "title":"Gothenburg", 
      "content":"Swedens second largest city" }
    ]}

 

 Bron:

 

 

Par Hasard

Ik ben 30+, nader de 40 zelfs, met een gezonde internet verslaving. Gelukkig getrouwd en fiere vader van 2 dochters. Wil een kat in huis, maar mag niet. 🙁

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *