2017-07-04 4 views
-2

openweathermapのapiのデータをGoogleマップのapiとマージしようとしています。ただし、innerHTMLを使用してAPIからデータを取得しようとすると、Uncaught TypeError: Cannot set property 'innerHTML' of nullが表示されます。あなたのonload機能でinnerHTMLを使用したヌルセットプロパティ

Javascriptを

var map; 
 
var weather; 
 
var temp; 
 
var APPID = 'e9e239c6585f081bee7b0d7f6045a53f'; 
 

 
function updateByCity(q) { 
 
    var url = "http://api.openweathermap.org/data/2.5/weather?q={" + 
 
    q + 
 
    "}&APPID=" + APPID; 
 
    sendRequest(url); 
 
} 
 

 
function sendRequest(url) { 
 
    var xmlhttp = new XMLHttpRequest(); 
 
    xmlhttp.onreadystatechange = function() { 
 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
 
     var data = JSON.parse(xmlhttp.responseText); 
 
     var weather = {}; 
 
     weather.temp = data.main.temp; 
 

 
     update(weather); 
 
    } 
 
    }; 
 
    xmlhttp.open("GET", url, true); 
 
    xmlhttp.send(); 
 
} 
 

 

 
function update(weather) { 
 
    temp.innerHTML = weather.temp; 
 
} 
 

 
window.onload = function() { 
 
    temp = document.getElementById("temperature"); 
 
    var weather = {}; 
 
    weather.temp = "35"; 
 

 
    update(weather); 
 
} 
 

 

 
function initMap() { 
 
    var KL = { 
 
    lat: 3.1390, 
 
    lng: 101.6869 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 6, 
 
    center: { 
 
     lat: 4.444997, 
 
     lng: 106.554199 
 
    } 
 
    }); 
 

 
    var marker = new google.maps.Marker({ 
 
    position: KL, 
 
    map: map 
 
    }); 
 

 

 

 
    var contentString = '<div id="content">' + 
 
    '<div id="siteNotice">' + 
 
    '</div>' + 
 
    '<h1 id="firstHeading" class="firstHeading">Kuala Lumpur</h1>' + 
 
    '<div id="bodyContent">' + 
 
    '<p>Temperature: ' + temp + '</p>' + 
 
    '</div>' + 
 
    '</div>'; 
 

 
    var infowindow = new google.maps.InfoWindow({ 
 
    content: contentString 
 
    }); 
 
    marker.addListener('click', function() { 
 
    infowindow.open(map, marker); 
 
    }); 
 

 
}

HTML

<!doctype> 
<html> 

<head> 
    <script src="mapJS.js"></script> 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBuhL2_brcvjW12heXCPV8G-lXd7Kmue84&callback=initMap"> 
    </script> 
    <title>Simple Map</title> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <style> 
    #map { 
     height: 100%; 
    } 

    html, 
    body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
    } 
    </style> 
    <div id="map"></div> 
</head> 

</html> 

答えて

0

をターゲットにしたいと思います。主な理由は、温度の読み値を設定する要素を作成していないことです。したがって、私は新しい<div id="temperature">を作成し、問題を修正しました。

var map; 
 
var weather; 
 
var temp; 
 
var APPID = 'e9e239c6585f081bee7b0d7f6045a53f'; 
 

 
function updateByCity(q) { 
 
    var url = "http://api.openweathermap.org/data/2.5/weather?q={" + 
 
    q + 
 
    "}&APPID=" + APPID; 
 
    sendRequest(url); 
 
} 
 

 
function sendRequest(url) { 
 
    var xmlhttp = new XMLHttpRequest(); 
 
    xmlhttp.onreadystatechange = function() { 
 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
 
     var data = JSON.parse(xmlhttp.responseText); 
 
     var weather = {}; 
 
     weather.temp = data.main.temp; 
 

 
     update(weather); 
 
    } 
 
    }; 
 
    xmlhttp.open("GET", url, true); 
 
    xmlhttp.send(); 
 
} 
 

 

 
function update(weather) { 
 
    temp.innerHTML = weather.temp; 
 
} 
 

 
window.onload = function() { 
 
    temp = document.getElementById("temperature"); 
 
    var weather = {}; 
 
    weather.temp = "35"; 
 

 
    update(weather); 
 
} 
 

 

 
function initMap() { 
 
    var KL = { 
 
    lat: 3.1390, 
 
    lng: 101.6869 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 6, 
 
    center: { 
 
     lat: 4.444997, 
 
     lng: 106.554199 
 
    } 
 
    }); 
 

 
    var marker = new google.maps.Marker({ 
 
    position: KL, 
 
    map: map 
 
    }); 
 

 

 

 
    var contentString = '<div id="content">' + 
 
    '<div id="siteNotice">' + 
 
    '</div>' + 
 
    '<h1 id="firstHeading" class="firstHeading">Kuala Lumpur</h1>' + 
 
    '<div id="bodyContent">' + 
 
    '<p>Temperature: ' + temp + '</p>' + 
 
    '</div>' + 
 
    '</div>'; 
 

 
    var infowindow = new google.maps.InfoWindow({ 
 
    content: contentString 
 
    }); 
 
    marker.addListener('click', function() { 
 
    infowindow.open(map, marker); 
 
    }); 
 

 
} 
 

 

 
////////////////////////////////////////////////////
<!doctype> 
 
<html> 
 

 
<head> 
 
    <script src="mapJS.js"></script> 
 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBuhL2_brcvjW12heXCPV8G-lXd7Kmue84&callback=initMap"> 
 
    </script> 
 
    <title>Simple Map</title> 
 
    <meta name="viewport" content="initial-scale=1.0"> 
 
    <meta charset="utf-8"> 
 
    <style> 
 
    #map { 
 
     height: 100%; 
 
    } 
 
    
 
    html, 
 
    body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    </style> 
 

 
    <br> 
 
    <div id="temperature"></div><br> 
 
    <div id="map"></div> 
 
</head> 
 

 
</html>

+0

素晴らしい、ありがとうございました!!! – DYC

0

、あなたがターゲットですHTMLのID temperatureをINGのが、それは存在していない、私はあなたがこれはあなたのnullセットのプロパティの問題を修正する必要がありmap

window.onload = function() { 
    temp = document.getElementById("map"); 
    var weather = {}; 
    weather.temp = "35"; 

    update(weather); 
} 
関連する問題