ボタンをクリックしてGoogleマップの場所を変更する方法

Question

マップの場所を変更するボタンを作成しようとしていますが、多くの回答がありましたが、私のウェブサイトでは、私は非常に混乱している、私は彼らがなぜ動作しないのか分からない。

これは私のコードです：

HTML：

<div class="info-map"> 
<ul class="loks"> 

    <li class="active"> 
    <a id="link1" href="#office" data-toggle="tab"> office </a></li> 

    <li> 
    <a id="link2" href="#showroom" data-toggle="tab"> showroom </a></li> 

</ul></div> 

<div id="map"></div> 

CSS：

#map { 
    height: 400px; 
    } 

    .info-map { 
    position: absolute; 
    z-index: 1; 
    background: white; 
    top: 30px; 
    left: 8%; 
    } 

はSCRIPT：

var map; 
function initMap() { 

var office = { 
    info: '<strong>Architectural Art Crete - Office</strong><br>5815 Dewey St, Hollywood, FL 33023, USA', 
    lat: 26.0020213, 
    long: -80.2058833 
}; 

var showroom = { 
    info: '<strong>Showroom</strong><br>1025 W Belmont Ave<br> Chicago, IL 60657', 
    lat: 41.939670, 
    long: -87.655167 
}; 

var locations = [ 
    [office.info, office.lat, office.long, 0], 
    [showroom.info, showroom.lat, showroom.long, 1], 
]; 

var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 15, 
    center: new google.maps.LatLng(26.0020213, -80.2058833), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

var infowindow = new google.maps.InfoWindow({}); 

var marker, i; 

for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     map: map 
    }); 

    google.maps.event.addListener(marker, 'click', (function (marker, i) { 
     return function() { 
      infowindow.setContent(locations[i][0]); 
      infowindow.open(map, marker); 
     } 
    })(marker, i)); 
} 
} 

私は私を少し助けたこのgoogleAPIの解決策を見つけたが、私はそれはあなたのコードは、いくつかの問題を抱えている

google.maps.event.addDomListener(document.getElementById('link2'), 
'click', function() { 

map.setCenter(new google.maps.LatLng(10.23,123.45)); 
}); 

Answer 1

両方の場所のために動作させるように見えることはできません。 info:のデータを正しく閉じてください。あなたは一重引用符とコンマを見逃しています。

変更

info: '<strong>Architectural Art Crete - Office</strong><br>\ 5815 Dewey St, Hollywood, FL 33023, USA,

info: '<strong>Architectural Art Crete - Office</strong><br>5815 Dewey St, Hollywood, FL 33023, USA',

に更新されたコードを参照してください。

var map; 
function initMap() { 

    var office = { 
     info: '<strong>Architectural Art Crete - Office</strong><br>5815 Dewey St, Hollywood, FL 33023, USA', 
     lat: 26.0020213, 
     long: -80.2058833 
    }; 

    var showroom = { 
     info: '<strong>Showroom</strong><br>1025 W Belmont Ave<br> Chicago, IL 60657', 
     lat: 41.939670, 
     long: -87.655167 
    }; 

    var locations = [ 
     [office.info, office.lat, office.long, 0], 
     [showroom.info, showroom.lat, showroom.long, 1], 
    ]; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 15, 
     center: new google.maps.LatLng(26.0020213, -80.2058833), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var infowindow = new google.maps.InfoWindow({}); 

    var marker, i; 

    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map 
     }); 

     google.maps.event.addListener(marker, 'click', (function (marker, i) { 
      return function() { 
       infowindow.setContent(locations[i][0]); 
       infowindow.open(map, marker); 
      } 
     })(marker, i)); 
    } 
} 

一つの修正はここにある：

google.maps.event.addDomListener(document.getElementById('link2'), 'click', function() { map.setCenter(new google.maps.LatLng(10.23,123.45)); } });

この関数は}が行方不明になった正しく閉じられていませんでした。
新しいコードを更新した後に確認してください。

Answer 2

あなたの緯度と経度も問題であるようです。以下を使用して、initMap関数内にこれらの関数を含めるようにしてください。それはうまくいくだろう。

  google.maps.event.addDomListener(document.getElementById('link2'), 
              'click', function() { 
       map.setCenter(new google.maps.LatLng(showroom.lat, showroom.long)); 
      }); 
      google.maps.event.addDomListener(document.getElementById('link1'), 
              'click', function() { 
       map.setCenter(new google.maps.LatLng(office.lat, office.long)); 
      });