google-maps - Wix を使用したダイナミック Google マップ

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>