helpInfowindow.js

var points;
function initialize() {
    $('#mapModal').modal('show');
    points = [{% for point in google.points %}
        {
            center: new google.maps.LatLng({{ point.lat }}, {{ point.lng }}),
            metrics: [{% for metric in point.metrics %}
                {
                    'name': '{{ metric.name }}',
                    'value': '{{ metric.value }}'
                },{% endfor %}
                {
                    'name': 'Latitude',
                    'value': {{ point.lat }}
                },
                {
                    'name': 'Longitude',
                    'value': {{ point.lng }}
                }
            ],
            content: '{% for m in point.metrics %}' +
                '<p><strong>{{ m.name }}: </strong>{{ m.value }}</p>' +
                '{% endfor %}' +
                '<p><strong>Latitude: </strong>{{ point.lat }}</p>' +
                '<p><strong>Longitude: </strong>{{ point.lng }}</p>'
        },
    {% endfor %}]
    console.log(points[0]);
    console.log(points[10]);
    console.log(points[100]);
    var mapOptions = {
        zoom: 14,
        center: new google.maps.LatLng({{ statistics.center.lat }}, {{ statistics.center.lng }}),
        mapTypeId: google.maps.MapTypeId.SATELLITE
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    for (i=0;i<points.length - 1;i++) {
        var pointOptions = {
            strokeColor: "#00FF00",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#00FF00",
            fillOpacity: 0.35,
            map: map,
            center: points[i].center,
            radius: 10,
            clickable: true,
            index: i
        };
        var circle = new google.maps.Circle(pointOptions);
        var infowindow = new google.maps.InfoWindow();
        google.maps.event.addListener(circle, 'click', (function(i){
          return function(e) {
            infowindow.setPosition(e.latLng);
            infowindow.setContent(points[i].content);
            infowindow.open(map);
            console.log(points[i].content);
          }
        })(i));
    }
    google.maps.event.addListenerOnce(map, 'idle', function() {
        $('#mapModal').modal('hide');
    });
}