不能添加標記到谷歌地圖

YO！ 'Su人:)我是新來的HTML，所以我可以使用一些幫助:) 我一直試圖把谷歌地圖放在頁面頂部，具體高度：500/600px和寬度：100％。那裏沒問題。但是，當我嘗試添加多個標記（作爲URL鏈接n'自定義圖標），他們不顯示出來..當我成功添加標記我的（自動完成嵌入式）搜索欄消失：/有人可以讓我做谷歌地圖嵌入自動完成搜索欄和少數「鏈接」標記？告訴我我做錯了什麼？我已經搜索了一個答案位似乎無法找到它。預先感謝您..不能添加標記到谷歌地圖

如果有人不能讀這個（sry不知道如何格式化這個權利）這裏的鏈接到我的兆豐與html。沒有病毒，請不要威脅。

<https://mega.co.nz/#!8lAi2I4Q!cPb3XJKccd54Qm8QtnBV2QBWt42KVDFzgI89ZnRCBJo>

而這裏的同一代碼的html：

<html> 
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false" 
type="text/javascript"></script> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>     <title>Garinfo</title> 
<style> 
html, body, #map-canvas { 
height: 85%; 
margin: 0px; 
padding: 0px 
} 
.controls { 
margin-top: 16px; 
border: 1px solid transparent; 
border-radius: 2px 0 0 2px; 
-moz-box-sizing: border-box; 
height: 32px; 
outline: none; 
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
} 
#pac-input { 
background-color: #fff; 
padding: 0 11px 0 13px; 
width: 400px; 
font-family: Roboto; 
font-size: 15px; 
font-weight: 300; 
text-overflow: ellipsis; 
} 
#pac-input:focus { 
border-color: #4d90fe; 
margin-left: -1px; 
padding-left: 14px; /* Regular padding-left + 1. */ 
width: 401px; 
} 
.pac-container { 
font-family: Roboto; 
} 
#type-selector { 
color: #fff; 
background-color: #4d90fe; 
padding: 5px 11px 0px 11px; 
} 
#type-selector label { 
font-family: Roboto; 
font-size: 13px; 
font-weight: 300; 
} 
} 
</style> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places">   </script> 
<script> 
function initialize() { 
var map = new google.maps.Map(document.getElementById('map-canvas'), { 
center: new google.maps.LatLng(45.242629, 19.827195), 
zoom: 15, 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 
var input = /** @type {HTMLInputElement} */(
document.getElementById('pac-input')); 
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(input); 
var searchBox = new google.maps.places.SearchBox(
/** @type {HTMLInputElement} */(input)); 
google.maps.event.addListener(searchBox, 'places_changed', function() { 
var places = searchBox.getPlaces(); 
if (places.length == 0) { 
return; 
} 
for (var i = 0, marker; marker = markers[i]; i++) { 
marker.setMap(null); 
} 
markers = []; 
var bounds = new google.maps.LatLngBounds(); 
for (var i = 0, place; place = places[i]; i++) { 
var image = { 
url: place.icon, 
size: new google.maps.Size(71, 71), 
origin: new google.maps.Point(0, 0), 
anchor: new google.maps.Point(17, 34), 
scaledSize: new google.maps.Size(25, 25) 
}; 
map.fitBounds(bounds); 
var location1 = new google.maps.Map.LatLng(45.239115, 19.824766) 
var location2 = new google.maps.Map.LatLng(45.244517, 19.847312) 
var marker1 = new google.maps.Marker({ 

position: Location1, 
url: 'http://www.facebook.com/', 
map: map 
    }); 
var marker2 = new google.maps.Marker({ 
position: Location2, 
url: 'http://www.google.com/', 
map: map 
}); 
google.maps.event.addListener(marker, 'click', function() { 
window.location.href = marker.url; 
}); 
markers.push(marker); 
bounds.extend(place.geometry.location); 
} 
}); 
google.maps.event.addListener(map, 'bounds_changed', function() { 
var bounds = map.getBounds(); 
searchBox.setBounds(bounds); 
}); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
<style> 
#target { 
width: 345px; 
} 
</style> 
</head> 
<body onunload="GUnload()"> 
<script type="text/javascript"> 
var map = new google.maps.Map(document.getElementById('map'), { 
zoom: 15, 
center: new google.maps.LatLng(45.239115, 19.824766), 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 
var marker = new google.maps.Marker({ 
position: map.getCenter(), 
url: 'http://www.google.com/', 
map: map 
}); 
    google.maps.event.addListener(marker, 'click', function() { 
window.location.href = marker.url; 
}); 
</script> 
<input id="pac-input" class="controls" type="text" placeholder="Search Box"> 
<div id="map-canvas"></div> 
</body> 
</html>

來源

2014-07-03 user3799813

的傢伙！

而分析和測試你的代碼，我發現至少3個問題：

1）您要添加的地圖兩次到該頁面。看線69和159

2）修復線112和113：

var Location1 = new google.maps.Map.LatLng(45.239115, 19.824766); 
var Location2 = new google.maps.Map.LatLng(45.244517, 19.847312);

他們缺少「;」和變量名不匹配的標記中使用的名稱：

var marker1 = new google.maps.Marker({ 
    position: Location1, //it should be written like this Location1 
    url: 'http://www.facebook.com/', 
    map: map 
}); 

var marker2 = new google.maps.Marker({ 
    position: Location2, //it should be written like this Location2 
    url: 'http://www.google.com/', 
    map: map 
});

3）上述（1中的標記物和2）不被加。是的，這是tre。它可能是由於以下原因：

3.1）第86行的函數places_changed可能未被調用;
3.2）places.length可能爲0，使得該方法返回到第90行;

運行上面的代碼，直接增加了兩個指標，而不混淆搜索字段（我已經將它移到places_changed功能外，正上方，並且固定JavaScript錯誤）。

可能您會發現更多問題，但在繼續之前必須先解決此問題。

來源

2014-07-03 03:05:16

我已經計算了基於您的文件通過兆豐下載的行。 –

非常感謝！：d – user3799813

不能添加標記到谷歌地圖

回答

相關問題