Google Karte Zoom & Center Herausforderung

Question

Ich muss eine Karte erstellen. Aber Parameter wie Zoom und Mitte/Markierung müssen vom Formular sein (Zoom von Auswahl Mitte/Markierung vom Eingang). Und Herausforderung ist, dass Konsole sagt setZoom: keine Nummer. Aber wenn ich Zoom nach Zahl setze überspringe, funktioniert es, aber die Markierung erscheint nach dem zweiten Klick. 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> 

Karte

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); 
      } 
     }); 
    } 

} 

Validierung

$('#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

Bitte immer daran denken, wenn Sie mit jquery arbeitet.

in Datentyp Dies kann so unterscheiden sich bitte int konvertieren, wenn wie unter Nummer benötigen: -

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

Dies wird Ihr Problem lösen.