data.opendata.lv izmantošanas piemērs

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<div id="map_canvas"></div>

CSS

html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { width: 100%; height: 100%; }

JavaScript

var map = new google.maps.Map($("#map_canvas")[0], {
    center: new google.maps.LatLng(57, 24.1),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

function displaySchoolsOnMap(schools){
    var markers = [];
    _.each(schools, function(school) {
        if (school.lat && school.lng) {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(school.lat, school.lng),
                map: map,
                title: school["Nosaukums"]
            });
            markers.push(marker);
            var infowindow = new google.maps.InfoWindow({
                content: school.contentstring
            });
            google.maps.event.addListener(marker, 'click', function() {
              infowindow.open(map, marker);
            });
        }
    });
    var markerCluster = new MarkerClusterer(map, markers);
}

$.getJSON(
    "http://macmillanfbapps.azurewebsites.net/yousaypotato/data.php",
    displaySchoolsOnMap
);