0
我需要創建一個php/javascript頁面，爲數組中包含的每個地址創建一個谷歌地圖。顯示數組中包含的每個地址的谷歌地圖
陣列地址是一個包含多個地址的數組。該數組使用函數json_encode($ addresses)從php傳遞給javascript。這工作，地址數組不是空的。
這是我的javascript文件：
var geocoder;
var map;
var count = 0; //is used to number the div (one per address)
var descriptions = new Array(); //array of descriptions
//I copy the contents of the addresses array in the descriptions array
for(var i=0; i<addresses.length; i++) {
var address = addresses[i];
var description = addresses[i];
//alert(address);
//alert(description);
geocoder = new google.maps.Geocoder();
var options = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
count = count + 1;
var id = "map-canvas" + count;
var div = document.createElement("div");
div.id = id;
div.style.width= "300px";
div.style.height= "300px";
document.getElementById("content_map-canvas").appendChild(div);
map = new google.maps.Map(document.getElementById(id), options);
geocoding(address, description);
geocoder.geocode({'address': address}, function(results, status) {
if(status === google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker
({map: map,
position: results[0].geometry.location,
title: description
});
marker.setAnimation(google.maps.Animation.DROP);
contentString = description;
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
else {
alert("Geocode failed: " + status + ", " + address);
}
});
}
這是PHP文件應包含在各個地圖：
<script type="text/javascript" src="../public/js/maps.js"></script>
<div id="content_map-canvas"></div>
當我與谷歌Chrome瀏覽器運行該文件檢查控制檯元素拋出此錯誤：未捕獲TypeError：無法調用空的方法'appendChild'。 但實際上div * content_map-canvas *存在。 我該如何解決？
感謝
編輯
HTML文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="../public/css/style.css"/>
<script type="text/javascript" src="../public/js/javascript.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type='text/javascript'>
var addresses = <?php echo json_encode($addresses); ?>;
</script>
<script type="text/javascript" src="../public/js/maps.js"></script>
</head>
<body>
<div id="container">
<h1>Maps</h1>
<form method="post" action="../public/maps.php">
<input type="text" name="city" id="ci"/>
<input type="text" name="address" id="in"/>
<input type="hidden" name="action" value="upload"/>
<input type="file" name="path"/>
<input type="submit" id="button-invia" name="submit-maps" value="Post" onClick="createMap(); return false;"/>
</form>
<div id="content_map-canvas"></div>
</div>
</body>
</html>
JavaScript文件（maps.js）：
function initialize() {
var geocoder;
var map;
var count = 0; //is used to number the div (one per address)
var descriptions = new Array(); //array of descriptions
//I copy the contents of the addresses array in the descriptions array
for(var i=0; i<addresses.length; i++) {
var address = addresses[i];
var description = addresses[i];
geocoder = new google.maps.Geocoder();
var options = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
count = count + 1;
var id = "map-canvas" + count;
var div = document.createElement("div");
div.id = id;
div.style.width= "300px";
div.style.height= "300px";
document.getElementById("content_map-canvas").appendChild(div);
map = new google.maps.Map(document.getElementById(id), options);
//geocoding(address, description);
geocoder.geocode({'address': address}, function(results, status) {
if(status === google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker
({map: map,
position: results[0].geometry.location,
title: description
});
marker.setAnimation(google.maps.Animation.DROP);
contentString = description;
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
else {
alert("Geocode failed: " + status + ", " + address);
}
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
CSS文件：
#content_map-canvas div {
height: 180px;
width: 270px;
}
嘗試在啓動循環之前創建映射，然後在循環中將標記添加到循環中。 –
@Andrew Bartel感謝您的回覆，但我需要很多帶有單個標記的地圖，而不是帶有許多標記的地圖 – user3207923