google-maps - 使用 Wix 的动态谷歌地图

Question

我正在使用 WIX 编辑我的网站，当我单击左侧列表中的一个项目时，我想更改 Google 地图。左侧的列表是一个下拉列表。当我单击下拉菜单中的项目时，我希望它以我单击的项目为中心。

有谁知道这是否可能？

Answer 1

将下面的代码粘贴到“HTML 代码”框（更多 > HTML 和 Flash > HTML 代码）中，我会看到此页面上的地图：

<div id="map" style="height: 500px; width: 400px; float:left;"></div>
<div id="sidebar" style="height: 500px; width: 250px; float: right;"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var markers = [];
var map;
var infoWin;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
  infoWin = new google.maps.InfoWindow();
  createMarker(new google.maps.LatLng( -34.397, 150.644), "place1", "stuff for IW", map);
  createMarker(new google.maps.LatLng( -33.9, 151.1), "place2", "stuff for IW2", map);
}
google.maps.event.addDomListener(window, 'load', initMap);
function createMarker(latlng, name, html, map) {
  var marker = new google.maps.Marker({
        position: latlng,
        map: map
  });
  google.maps.event.addListener(marker, 'click', function(evt) {
    infoWin.setContent("<h3>"+name+"</h3>"+html);
    infoWin.open(map,marker);
  });
  markers.push(marker);
  document.getElementById('sidebar').innerHTML += '<a href="javascript: google.maps.event.trigger(markers['+(markers.length-1)+'],\'click\');">'+name+'</a><br>';
}
</script>