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 40+, met een gezonde internet verslaving. Gelukkig getrouwd en fiere vader van 2 dochters. Wil een kat in huis, maar mag niet. 🙁
Latest posts by Par Hasard (see all)
- jQuery.ScrollTo werkt niet meer in Chrome - 25 oktober 2017
- Easter egg Google Chrome: T-Rex runner game - 7 augustus 2015
- Hoe input en select form element even breed maken? - 21 mei 2015
