data.opendata.lv izmantošanas piemērs

by rsim

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
});

var infoWindowTemplate = _.template('<div id="content">' +
    '<b><%- school["Nosaukums"] %></b><br/>' +
    '<%- school["Adrese"] %><br/>' +
    '<% if (school["Mājas lapa"]) { %>' +
        '<a href="<%- school["Mājas lapa"] %>" target="_blank" ' +
        '><%- school["Mājas lapa"] %></a>' +
    '<% } %>' +
    '</div>');

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: infoWindowTemplate({school: school})
            });
            google.maps.event.addListener(marker, 'click', function() {
              infowindow.open(map, marker);
            });
        }
    });
    var markerCluster = new MarkerClusterer(map, markers);
}

$.getJSON(
    "http://data.opendata.lv/rsim/rigas-skolas/skolas.json?callback=?",
    displaySchoolsOnMap
);