同時に3つのマップを表示しようとしています

Question

私は3つのヒートマップを同時に表示しようとしていますが、ページは読み込まれますが、マップの代わりに3つの灰色の長方形です。これは私が作成し、ヒートマップを表示しようとする方法である：

Javascriptを

function search_around(){ 
     $.mobile.loading("show", { text: 'Retrieving information ...', textVisible: true }); 

     var dir = document.getElementById('address').value; 
     var radio = document.getElementById('radio').value; 
     if (radio>1000) { 
      radio = 1000; 
     } else if (radio==0) { 
      radio = 500 
     } 
     var geo = new google.maps.Geocoder(); 

     geo.geocode({'address':dir}, function(results, status){ 
      if (status=='OK'){ 
       var loc = results[0].geometry.location; 
       return $.getJSON('{{ url_for('search_around') }}', {'email':$.cookie('login_email'), 'lat': loc['lat'], 'lon':loc['lng'], 'radio':radio}).done(function(data){ 
        $.mobile.loading("hide"); 

        result = data['result']; 
        var centerlatlng = new google.maps.LatLng(loc['lat'],loc['lng']) 
        var myOptions = { 
         zoom: 13, 
         center: centerlatlng, 
         styles: [ 
         {elementType: 'geometry', stylers: [{color: '#242f3e'}]}, 
         {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]}, 
         {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]}, 
         {featureType: 'administrative.locality',elementType:'labels.text.fill',stylers:[{color: '#d59563'}]}, 
         {featureType: 'poi', elementType: 'labels.text.fill',stylers: [{color: '#d59563'}]}, 
         {featureType: 'poi.park', elementType: 'geometry', stylers: [{color: '#263c3f'}]}, 
         {featureType: 'poi.park', elementType: 'labels.text.fill', stylers: [{color: '#6b9a76'}]}, 
         {featureType: 'road', elementType: 'geometry', stylers: [{color: '#38414e'}]}, 
         {featureType: 'road', elementType: 'geometry.stroke', stylers: [{color: '#212a37'}]}, 
         {featureType: 'road', elementType: 'labels.text.fill', stylers: [{color: '#9ca5b3'}]}, 
         {featureType: 'road.highway', elementType: 'geometry', stylers: [{color: '#746855'}]}, 
         {featureType: 'road.highway', elementType: 'geometry.stroke', stylers: [{color: '#1f2835'}]}, 
         {featureType: 'road.highway', elementType: 'labels.text.fill', stylers: [{color: '#f3d19c'}]}, 
         {featureType: 'transit', elementType: 'geometry', stylers: [{color: '#2f3948'}]}, 
         {featureType: 'transit.station', elementType: 'labels.text.fill', stylers: [{color: '#d59563'}]}, 
         {featureType: 'water', elementType: 'geometry', stylers: [{color: '#17263c'}]}, 
         {featureType: 'water', elementType: 'labels.text.fill', stylers: [{color: '#515c6d'}]}, 
         {featureType: 'water', elementType: 'labels.text.stroke', stylers: [{color: '#17263c'}]} 
         ] 
        }; 

        var map_acc = new google.maps.Map(document.getElementById('map_search_acc'), myOptions); 
        var map_cons = new google.maps.Map(document.getElementById('map_search_cons'), myOptions); 
        var map_emis = new google.maps.Map(document.getElementById('map_search_emis'), myOptions); 

        var heatmap_points_acc = [] 
        var heatmap_points_cons = [] 
        var heatmap_points_emis = [] 

        acc_points = result['acc_latlon'].split('#') 
        $.each(acc_points,function(i, text){ 
         if (text.length > 3) { 
          lat_lon = text.split(','); 
          heatmap_points_acc.push(new google.maps.LatLng(lat_lon[0], lat_lon[1])) 
         } 
        }); 
        var pointArray_acc = new google.maps.MVCArray(heatmap_points_acc); 
        var heatmap_acc = new google.maps.visualization.HeatmapLayer({ 
         data: pointArray_acc 
        }); 
        heatmap_acc.set('threshold', 10); 
        heatmap_acc.set('radius', 10); 
        heatmap_acc.set('opacity', 0.8000); 
        heatmap_acc.set('dissipating', true); 
        heatmap_acc.setMap(map_acc); 

        $('#map_search_acc').css("height","500px"); 
        $('#map_search_acc').css("width","100%"); 
        $('#map_search_acc').redraw(); 

        cons_points = result['cons_latlon'].split('#') 
        $.each(cons_points,function(i, text){ 
         if (text.length > 3) { 
          lat_lon = text.split(','); 
          heatmap_points_cons.push(new google.maps.LatLng(lat_lon[0], lat_lon[1])) 
         } 
        }); 
        var pointArray_cons = new google.maps.MVCArray(heatmap_points_cons); 
        var heatmap_cons = new google.maps.visualization.HeatmapLayer({ 
         data: pointArray_cons 
        }); 
        heatmap_cons.set('threshold', 10); 
        heatmap_cons.set('radius', 10); 
        heatmap_cons.set('opacity', 0.8000); 
        heatmap_cons.set('dissipating', true); 
        heatmap_cons.setMap(map_cons); 

        $('#map_search_cons').css("height","500px"); 
        $('#map_search_cons').css("width","100%"); 
        $('#map_search_cons').redraw(); 

        emis_points = result['emis_latlon'].split('#') 
        $.each(emis_points,function(i, text){ 
         if (text.length > 3) { 
          lat_lon = text.split(','); 
          heatmap_points_emis.push(new google.maps.LatLng(lat_lon[0], lat_lon[1])) 
         } 
        }); 
        var pointArray_emis = new google.maps.MVCArray(heatmap_points_emis); 
        var heatmap_emis = new google.maps.visualization.HeatmapLayer({ 
         data: pointArray_emis 
        }); 
        heatmap_emis.set('threshold', 10); 
        heatmap_emis.set('radius', 10); 
        heatmap_emis.set('opacity', 0.8000); 
        heatmap_emis.set('dissipating', true); 
        heatmap_emis.setMap(map_emis); 

        $('#map_search_emis').css("height","500px"); 
        $('#map_search_emis').css("width","100%"); 
        $('#map_search_emis').redraw(); 

       }).fail(function(){ 
        show_message_error_connection(); 
       }); 
      } else { 
       alert('Address couldn\'t be found in google Geocoder service'); 
       $.mobile.loading("hide"); 
      } 
     }); 
    } 

Htmlの

<div data-role="page" id = "page_search" > 
     <div data-role="header" data-position="fixed"> 
      <h1><center><img href='#page_test' src="{{ url_for('static', filename='img/pxs_title.png')}}" style="height:25px;"></center></h1> 
      <a href="#panel_left" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-grid"></a> 
     </div> 
     <div id="panel"> 
      <center> 
      <label for="text-basic"> <font size="5">Address</font> </label> 
      <input id="address" type="textbox" size="40"> 
      <label for="text-basic" ><font size="5">Ratio (1000m - 500m):</font></label> 
      <input id="radio" type="textbox" size="20" value="500"> 
      <input id="search" type="button" value="SEARCH" onclick="javascript:search_around();"> 
      </center> 
     </div> 
     <ul data-role="listview" data-icon="false" id = "list-search-maps"> 
      <li data-role="list-divider"><b>Map Accelerations</b></li> 
      <div id="map_search_acc" style="width:750; height:700"></div> 
      <li data-role="list-divider"><b>Map Consumption</b></li> 
      <div id="map_search_cons" style="width:750; height:700"> </div> 
      <li data-role="list-divider"><b>Map Emissions</b></li> 
      <div id="map_search_emis" style="width:750; height:700"></div> 
     </ul> 
    </div> 

私は1本​​のヒートマップを作成するには、この同じプロセスを使用してきましたし、それが動作します、同じ正確なプロセス、それは今は何ですか？私はバックエンドでクエリを受け取り、フロントがデータを受け取っていることを既に確認しましたが、マップに表示されません。私はかなりhtml + javascriptに新しいので、私は今失われていると私は何を試していいのか分からない

Answer 1

いつものように、あなたが何かが問題ではないことを確認するときは、ちょうど見てください）（私は両方の値がバックエンドに適切に送られたが、それらが機能」centerlatlngを作成するために読まれた理由がわからない

var centerlatlng = new google.maps.LatLng(loc['lat'],loc['lng']) 

：それで...これは私がやったことで、問題がでました{return a} "と" function（）{return b} "のため、マップの中心点は（Null、Null）であったため、マップ（今マップ）は表示されませんでした。私はその過程で多くのことを学びましたが、答えを見つけることができました。私はバックエンドから緯度と経度の座標と問題を解決しました。

var centerlatlng = new google.maps.LatLng(data['lat'],data['lon']);