<h1 class="page-header">Heat Map</h1>

<div id="googleMap" style="width: 95%;height: 800px;"></div>


<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
    var mapProp = {
        center:new google.maps.LatLng(59.329323,18.068581),
        zoom:12,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

    var home = new google.maps.Circle({
        center: {lat: 59.365954, lng: 17.975351},
        radius:2000,
        strokeColor:"#00FF00",
        strokeOpacity:0.8,
        strokeWeight:2,
        fillColor:"#00FF00",
        fillOpacity:0.4,
        map: map
    });

    var external = new google.maps.Circle({
        center: {lat: 59.275638, lng: 18.024362},
        radius:2000,
        strokeColor:"#FF0000",
        strokeOpacity:0.8,
        strokeWeight:2,
        fillColor:"#FF0000",
        fillOpacity:0.4,
        map: map
    });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>