HTMLで値の変更にGoogleマップを表示する方法

Question

私はプロジェクトに取り掛かっています。私は固執しています。ドロップダウンボックスから選択した都市を使用してその都市のGoogleマップを表示したい。

ここでは私が取り組んでいるコードはありますが、動作していません。それぞれの場所の変数を追加しました。マップを作成するのは簡単です。私が抱えている最大の問題は、選択したオプションを読むことです。ドロップダウンでフィラデルフィアを選択すると、フィラデルフィアのマップが選択されます。

<form> 
      <select id="cities" onchange="initMap()" > 
       <option value="penn" selected>Select a City</option> 
       <option value="phi">Philadelphia</option> 
       <option value="pit">Pittsburgh</option> 
       <option value="har">Harrisburg</option> 
      </select> 

</form> 
<div id="map"></div> 
function initMap() { 
     var penn = {lat: 41, lng: -77}; 
     var phi = {lat: 39.952583, lng: -75.165222}; 
     var pit = {lat: 40.440624, lng: -79.995888}; 
     var har = {lat: 40.263680, lng: -76.890739}; 

     if (document.getElementById("cities").value = 'penn') { 
     var map = new google.maps.Map(document.getElementById('map'),{ 
      zoom: 7, 
      center: penn 
     }); 
     } 

     else if (document.getElementById("cities").value = 'phi') { 
     var map = new google.maps.Map(document.getElementById('map'),{ 
      zoom: 10, 
      center: phi 
     }); 
     } 

     else if (document.getElementById("cities").value = 'pit') { 
     var map = new google.maps.Map(document.getElementById('map'),{ 
      zoom: 10, 
      center: pit 
     }); 
     } 

     else if (document.getElementById("cities").value = 'har') { 
     var map = new google.maps.Map(document.getElementById('map'),{ 
      zoom: 13, 
      center: har 
     }); 
     } 
    } 


</script> 
<script async defer 
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAJuIBH_cjgQuJE7HUUE1EA0jbF176yZXA&callback=initMap"> 
</script> 

Answer 1

あなたは、if /他に===または==を使用する必要があります。ない=

if (document.getElementById("cities").value === 'penn') { 
    var map = new google.maps.Map(document.getElementById('map'),{ 
      zoom: 7, 
      center: penn 
    }); 
} 

=が割り当て

==であるあなたは、 `===`や `==`条件に使用すべき比較