変更位置なしのマップビューの変更

Question

デフォルトのマーカー（接続されたユーザーのアドレス）とその他のマーカー（配列に渡されたアドレス）を持つマップがあり、アドレスが配列で渡された選択入力があります。オプション選択したオプションのマーカー上でマップ変更のビューを変更する デフォルトマーカーのデフォルト位置を変更しないでこれを実装できますか？

Answer 1

はい、可能です。選択入力の'変更'イベントが発生したときに、Google Maps Javascript API Markerを作成し、新しいマーカー変数を使用してください。

あなたは、以下のサンプルコードを見てとることができます。

 var map; 
 
     function initMap() { 
 
     var defaultLoc = { "lat" : 37.7749295, "lng" :-122.4194155 }; 
 
     map = new google.maps.Map(document.getElementById('map'), { 
 
      center: defaultLoc, 
 
      zoom: 8 
 
     }); 
 
     var markerDefault = new google.maps.Marker({ 
 
      position : defaultLoc, 
 
      map : map 
 
      
 
     }); 
 
     document.getElementById('menuLoc').addEventListener('change', function(){ 
 
      var that = this; 
 
      var geocoder = new google.maps.Geocoder(); 
 
      geocoder.geocode({   
 
      address: that.value 
 
      }, function(result, status){ 
 
      if (status === 'OK') { 
 
       var newMarker = new google.maps.Marker({ 
 
       position : result[0].geometry.location, 
 
       map: map 
 
       }); 
 
       map.setCenter(result[0].geometry.location); 
 
      }   
 
      }); 
 
     }); 
 
     }

 /* Always set the map height explicitly to define the size of the div 
 
     * element that contains the map. */ 
 
     #map { 
 
     height: 100%; 
 
     } 
 
     /* Optional: Makes the sample page fill the window. */ 
 
     html, body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     } 
 
     #floating-panel { 
 
     position: absolute; 
 
     top: 10px; 
 
     left: 25%; 
 
     z-index: 5; 
 
     background-color: #FFF; 
 
     padding: 5px; 
 
     border: 1px solid #999; 
 
     text-align: center; 
 
     font-family: 'Roboto','sans-serif'; 
 
     line-height: 30px; 
 
     padding-left: 10px; 
 
     }

<div id="floating-panel"> 
 
     <select id="menuLoc"> 
 
     <option value="fresno, ca, USA">Fresno</option> 
 
     <option value="sacramento, ca, usa">Sacramento</option> 
 
     <option value="carson city">Carson City</option> 
 
    </select> 
 
    </div> 
 
    <div id="map"></div> 
 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzjs-bUR6iIl8yGLr60p6-zbdFtRpuXTQ&callback=initMap" 
 
    async defer></script>

はそれができたとコーディング幸せを願って！