特定の場所に初期化せずにGMapを取得する必要があります

Question

入力フィールドにバインドされたGoogleマップを実装しようとしています。

しかし、私は初期値を持たない入力フィールドと、最初は特定の都市に設定されているマップが必要です。 これは可能ですか？ 入力フィールドのIDは「gmap-address」です。

<div class="section"> 
    <input name="gmap-address" class="form-control" type="text" id="gmap-address" style="font-size:2em;height:3em;"/> 
</div> 

<input name="gmap-lat" type="text" id="gmap-lat"/> 
<input name="gmap-long" type="text" id="gmap-long"/> 
<input name="us9-city" type="text" id="us9-city"/> 
<input name="us9-state" type="text" id="us9-state"/> 
<input name="us9-zip" type="text" id="us9-zip"/> 
<input name="us9-street1" type="text" id="us9-street1"/> 
<div id="gmap" style="width: 60%; height: 500px; margin:0 auto; padding-top:5%;"></div> 

<script> 
    function init(lat, long){ 
     jQuery('#gmap').locationpicker({ 
      location: { 
       latitude: lat, 
       longitude: long 
      }, 
      radius: 300, 
      onchanged: function (currentLocation, radius, isMarkerDropped) { 
       var addressComponents = jQuery(this).locationpicker('map').location.addressComponents; 
       updateControls(addressComponents); 
      }, 
      oninitialized: function(component) { 
       var addressComponents = jQuery(component).locationpicker('map').location.addressComponents; 
       updateControls(addressComponents); 
      }, 
      inputBinding: { 
       latitudeInput: jQuery('#gmap-lat'), 
       longitudeInput: jQuery('#gmap-long'), 
       locationNameInput: jQuery('#gmap-address') 
      }, 
      markerInCenter: true, 
      enableAutocomplete: true, 
      addressFormat: 'postal_code', 
      scrollwheel: false 
     }); 
    } 
    function updateControls(addressComponents){ 
     jQuery('#us9-street1').val(addressComponents.addressLine1); 
     jQuery('#us9-city').val(addressComponents.city); 
     jQuery('#us9-state').val(addressComponents.district); 
     jQuery('#us9-zip').val(addressComponents.postalCode); 
     jQuery('#us9-country').val(addressComponents.country); 
    } 

</script> 

Answer 1

コードを見ると、入力フィールドは最初は値がありません。最初は、特定の都市に設定するマップを取得するためとして

：あなたがそうのようなマップを開始するときは、これを行うことができます：地図の中心を指定するための

function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: -34.397, lng: 150.644}, 
     zoom: 8 
    }); 
    } 

、あなたが使用する必要があります緯度、経度座標。実際に都市の名前を使用する必要がある場合は、まずジオコーディングAPIを使用して都市をジオコーディングし、次に地図の中心をジオコーダーから返された座標に設定します。

https://jsfiddle.net/3qoub0nv/1/

が、私はこのことができます願っています：私は、これは都市として、ヒューストン、TXを使用して、次のJSFiddleで行うことができるマップが最初に設定されている方法を実証しています！