Создание тепловой карты внутри веб-страницы asp.net включает в себя мастер-страницы

Question

Я работаю с этим кодом для создания карты тепла, но слой тепловой карты не показан, мой код показан следующим образом. Какая ошибка в этом коде?

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="CrimeHeatmap.aspx.cs" Inherits="IraqCrimesAndInsidenceMapping.CrimeHeatmap" %> 
    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server"> 

Я использовать следующий Defination для карт Google:

<script src="http://maps.google.com/maps?file=api&amp;key=MyKey&libraries=visualization" 
    type="text/javascript" > </script > 

Но когда я заменить его следующим определением карта не рассматривается

 <script src="http://maps.google.com/maps/api/js?key=MyKey" 
    type="text/javascript" > </script > 

Мой сценарий выглядит следующим образом:

<script type="text/javascript"> 
    var map = null; 
    var heatmap; 
function initialize() 
{ 
    if (GBrowserIsCompatible()) 
    { 
    map = new google.maps.Map(document.getElementById("map_canvas")); 
    var center = new GLatLng(37.775,-122.434); 
    map.setCenter(center, 13); 
    map.addControl(new GLargeMapControl()); 
    map.addControl(new GScaleControl()); 
    map.enableScrollWheelZoom(); 
    map.addControl(new GMapTypeControl()); 
    map.enableDoubleClickZoom(); 
     heatmap = new google.maps.visualization.HeatmapLayer({ 
     data: getPoints(), 
     map: map}); 

    } 

} 
    function getPoints() { 
    return [ 
     new google.maps.LatLng(37.782551, -122.445368), 
     new google.maps.LatLng(37.782745, -122.444586), 
     new google.maps.LatLng(37.782842, -122.443688), 
     new google.maps.LatLng(37.782919, -122.442815), 
     new google.maps.LatLng(37.782992, -122.442112), 
     new google.maps.LatLng(37.783100, -122.441461), 
     new google.maps.LatLng(37.783206, -122.440829), 
     new google.maps.LatLng(37.783273, -122.440324), 
     new google.maps.LatLng(37.783316, -122.440023), 
     new google.maps.LatLng(37.783357, -122.439794), 
     new google.maps.LatLng(37.783371, -122.439687), 
     new google.maps.LatLng(37.751266, -122.403355) 
    ]; 
    } 
</script> 


     </asp:Content> 
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
    <br /> 
    <div id="map_canvas" style="width: 600px; height: 425px" > 
    </div> 
    <br /> 
    </asp:Content> 

Answer 1

пожалуйста, используйте этот код, чтобы решить вашу проблему

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="heatmap.aspx.cs" Inherits="IraqCrimesAndInsidenceMapping.heatmap" %> 
    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server"> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js "></script> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YourCode&sensor=true&libraries=visualization"></script> 

    </asp:Content> 
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
    <div id="map_canvas" style="width: 300px; height: 300px"> 
    </div> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     var latlng = new google.maps.LatLng(37.775, -122.434); 
     var myOptions = { zoom: 13, center: latlng, mapTypeId: google.maps.MapTypeId.satellite }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     var heatmap = new google.maps.visualization.HeatmapLayer({ data: getPoints(), map: map}); 
    }); 
    function getPoints() { 
    return [ 
     new google.maps.LatLng(37.782551, -122.445368), 
     new google.maps.LatLng(37.782745, -122.444586), 
     new google.maps.LatLng(37.782842, -122.443688), 
     new google.maps.LatLng(37.782919, -122.442815), 
     new google.maps.LatLng(37.782992, -122.442112), 
     new google.maps.LatLng(37.783100, -122.441461), 
     new google.maps.LatLng(37.783206, -122.440829), 
     new google.maps.LatLng(37.783273, -122.440324), 
     new google.maps.LatLng(37.783316, -122.440023), 
     new google.maps.LatLng(37.783357, -122.439794), 
     new google.maps.LatLng(37.783371, -122.439687), 
     new google.maps.LatLng(37.783368, -122.439666), 
     new google.maps.LatLng(37.783383, -122.439594), 
     new google.maps.LatLng(37.783508, -122.439525), 
     new google.maps.LatLng(37.783842, -122.439591), 
     new google.maps.LatLng(37.784147, -122.439668), 
     new google.maps.LatLng(37.784206, -122.439686), 
     new google.maps.LatLng(37.784386, -122.439790), 
     new google.maps.LatLng(37.784701, -122.439902), 
     new google.maps.LatLng(37.784965, -122.439938), 
     new google.maps.LatLng(37.785010, -122.439947), 
     new google.maps.LatLng(37.785360, -122.439952), 
     new google.maps.LatLng(37.751266, -122.403355)];   
} 
</script> 

] 1