google map zoom & center challange

Question

Мне нужно создать карту. Но параметры, такие как зум и центр/маркер, должны быть из формы (масштабирование от выбранного центра/маркера от входа). И Challange - это то, что консоль говорит setZoom: не число. Но когда я устанавливаю масштабирование по пропуску номера, он работает, но маркер появляется после нажатия кнопки «Отправить». HTML

<div class="form"> 
    <form> 
     <div id="locationForm" class="form-group"> 
      <label for="address">Enter the location where you want to check the weather</label> 
      <input id="address" type="text" class="form-control" placeholder="location"> 
     </div> 
     <div id="zoomForm" class="form-group"> 
      <label for="zoom">Choose Zoom</label> 
      <select id="zoom" class="form-control"> 
       <option value="1">World</option> 
       <option value="3">Landmass/continent</option> 
       <option value="10">City</option> 
      </select>  
    <div id="required"> 
</div> 
<button id="submit" type="submit" class="btn btn-default" value="Geocode">Submit</button> 
    </form> 
</div> 

Карта

function initMap(zoom, address) { 

    map = new google.maps.Map(document.getElementById('map'), { 
     zoom: zoom, 
     center: new google.maps.LatLng(52, 20) 
    }); 

    google.maps.event.addListener(map, 'idle', checkIfDataRequested); 

    map.data.addListener('click', function (event) { 
     infowindow.setContent(
      "<img src=" + event.feature.getProperty("icon") + ">" 
      + "<br /><strong>" + event.feature.getProperty("city") + "</strong>" 
      + "<br />" + event.feature.getProperty("temperature") + "&deg;C" 
      + "<br />" + event.feature.getProperty("weather") 
     ); 
     infowindow.setOptions({ 
      position: { 
       lat: event.latLng.lat(), 
       lng: event.latLng.lng() 
      }, 
      pixelOffset: { 
       width: 0, 
       height: -15 
      } 
     }); 
     infowindow.open(map); 
    }); 
    var geocoder = new google.maps.Geocoder(); 

    document.getElementById('submit').addEventListener('click', function() { 
     geocodeAddress(geocoder, map); 
    }); 

    function geocodeAddress(geocoder, resultsMap) { 
     var address = document.getElementById('address').value; 
     geocoder.geocode({'address': address}, function (results, status) { 
      if (status === google.maps.GeocoderStatus.OK) { 
       resultsMap.setCenter(results[0].geometry.location); 
       var marker = new google.maps.Marker({ 
        map: resultsMap, 
        position: results[0].geometry.location 
       }); 
      } else { 
       alert('Geocode was not successful for the following reason: ' + status); 
      } 
     }); 
    } 

} 

проверка

$('#submit').click(function() { 
    event.preventDefault(); 
    $('p').remove(); 
    // if (Validation()) { 
     var yourZoom = ($('#zoom')[0].value), 
      yourAddress = $('#address')[0].value; 

     google.maps.event.addDomListener(window, 'load', initMap(yourZoom, yourAddress)); 
    // } 
}); 

Answer 1

Всегда помните, когда вы работаете с JQuery.

Это может отличаться в типе данных так, пожалуйста, преобразовать в целое, когда нужно число, как показано ниже: -

parseInt($('#zoom')[0].value); 

Это позволит решить вашу проблему.