使用 Wix 的动态 Google 地图

Question

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

有人知道这是否可行吗？

Answer 1

将下面的代码粘贴到 "HTML Code" 框中（更多 > HTML & Flash > HTML 代码），给我 this page 上的地图：

<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>

使用 Wix 的动态 Google 地图

Dynamic Google Maps using Wix

google-maps

velo