如何在谷歌地图中显示多个标记

Question

<title>Using MySQL and PHP with Google Maps</title>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>

<script type='text/javascript'>
var markers=[{"name":"Apple Store","lat":"51.51277","lng":"-2.14308"}];
function initMap() {
var latlng = new google.maps.LatLng(-33.92, 151.25);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById("peta"),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, lat, lng;
var json=JSON.parse( markers );
for( var o in json ){
lat = json[ o ].lat;
lng=json[ o ].lng;
name=json[ o ].name;
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
name:name,
map: map
}); 
google.maps.event.addListener( marker, 'click', function(e){
infowindow.setContent( this.name );
infowindow.open( map, this );
}.bind( marker ) );
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=340460420535-q0avndibuoa0c4jf8fhuj3i9no651si5.apps.googleusercontent.com&callback=initMap">
</script>

地图未显示在页面中。 请提供在谷歌地图中显示标记的解决方案。
我正在尝试在谷歌地图中显示标记，链接没有显示某些地址的地图。 我什至在谷歌地图上获取地址并使用它，但它仍然不起作用 文本输入框显示红色，如果您插入坐标，它们也显示红色。 请参阅上传的代码。

Answer 1

第1 期

var makers不是有效的 JSON 格式。

取代

var markers=[{"name":"Apple Store","lat":"51.51277","lng":"-2.14308"}];

到

var markers= '{"name":"Apple Store","lat":"51.51277","lng":"-2.14308"}';

第二期

在HTML或JAVASCRIPT中更改元素的ID，选择权在您手中。document.getElementById映射到peta

从<div id="map"></div>变为<div id="peta"></div>

第三期

您的密钥似乎无效。更新您的密钥。

Answer 2

你也可以通过addMarker((方法添加多个标记，如下所示：

addMarker({lat:42.4668,lng:-70.9495});
addMarker({lat:42.8584,lng:-70.9300});
//add marker function
function addMarker(coords){
var marker =new google.maps.Marker({
position:coords,
map:map,
icon:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
});

}