谷歌地圖api3動態更新與用戶輸入變化

Question

蘸我的腳趾谷歌地圖api（v3）。

要開始我能夠初始化與jQuery選擇器播種預填充值的地圖，如下所示，一切都按預期工作。

我遇到了動態更新這些值的困難。我確定有一個教程或一些例子可以在某處查到，但經過幾天的搜索後，我只是無法將其整理出來。

向正確的方向推動 - 或者更好的一個明確的例子將不勝感激。對於初學者Im，在根據對mapZoomReturn的更改進行縮放後更改，但將應用到列出的所有var。

非常感謝您的幫助。

<script> 
//set up variables to contain our input values 
var mapIdReturn = null; 
var mapZoomReturn = null; 
var mapWidthReturn = null; 
var mapHeightReturn = null; 
var mapTypeReturn = null; 
var mapAddressReturn = null; 
var mapAddressElement = null; 
var mapMarkerReturn = null; 
var mapInfoWindowReturn = null; 
var infowindowPlace = null; 
var mapMarkerImageReturn = null; 
var mapKMLReturn = null; 
var map = null; 
var mapOptions = null; 
var tr_gmaps = null; 
var output = null; 

jQuery(document).ready(function(jQuery) { 
    // populate initial values 
    mapIdReturn = jQuery('input[id=mapId]').val(); 
    mapZoomReturn = jQuery('select[id=mapZoom]').val(); 
    mapWidthReturn = jQuery('input[id=mapWidth]').val(); 
    mapHeightReturn = jQuery('input[id=mapHeight]').val(); 
    mapTypeReturn = jQuery('select[id=mapType]').val(); 
    mapAddressReturn = jQuery('input[id=mapAddress]').val(); 
    mapMarkerReturn = jQuery('select[id=mapMarker]').val(); 
    mapInfoWindowReturn = jQuery('textarea[id=mapInfoWindow]').val(); 
    mapMarkerImageReturn = jQuery('input[id=mapMarkerImage]').val(); 
    mapKMLReturn = jQuery('input[id=mapKML]').val(); 
}); 

function initialize() { 
      // my start 
    //mapZoomReturn = jQuery('select[id=mapZoom]').change(function(event){ jQuery(this).val(); }); 

    mapOptions = { 
     center: new google.maps.LatLng(43.703793, -72.326187), 
     zoom: parseFloat(mapZoomReturn), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

    var input = document.getElementById('mapAddress'); 
    var autocomplete = new google.maps.places.Autocomplete(input); 
    var infowindow = new google.maps.InfoWindow(); 
    var marker = new google.maps.Marker({ 
     map: map 
    }); 

    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
     //setTypes([]); 
     infowindow.close(); 
     marker.setVisible(false); 
     input.className = ''; 
     var place = autocomplete.getPlace(); 
     if (!place.geometry) { 
     // Inform the user that the place was not found and return. 
     input.className = 'notfound'; 
     return; 
     } 
     // If the place has a geometry, then present it on a map. 
     if (place.geometry.viewport) { 
     map.fitBounds(place.geometry.viewport); 
     } else { 
     map.setCenter(place.geometry.location); 
     map.setZoom(parseFloat(mapZoomReturn)); 
     } 
     var image = new google.maps.MarkerImage(
      place.icon, 
      new google.maps.Size(71, 71), 
      new google.maps.Point(0, 0), 
      new google.maps.Point(17, 34), 
      new google.maps.Size(35, 35)); 
     marker.setIcon(image); 
     marker.setPosition(place.geometry.location); 
     var icon = null; 
     var address = null; 
     var phone = null; 
     var web = null; 
     if (place.address_components) { 
     //console.log(place.address_components); 
     icon = place.icon; 
     address = place.formatted_address; 
     phone = place.formatted_phone_number; 
     web = place.website; 
     } 
     infowindowPlace = '<div class="marker inside">'; 
     infowindowPlace += (icon !== null && icon !== undefined) ? '<img src="' + icon + '" class="marker icon"/>' : ''; 
     infowindowPlace += '<strong>' + place.name + '</strong><br>'; 
     infowindowPlace += (address !== null && address !== undefined) ? address + '<br>' : ''; 
     infowindowPlace += (phone !== null && phone !== undefined) ? phone + '<br>' : ''; 
     infowindowPlace += (web !== null && web !== undefined) ? '<a href="' + web +'" class="" target="_blank">'+ web +'</a><br>' : ''; 
     infowindowPlace += (mapInfoWindowReturn !== null && mapInfoWindowReturn !==undefined) ? '<span class="marker extras">' + mapInfoWindowReturn + '</span>' : ''; 
     infowindowPlace += '</div>'; 
     infowindowPlace += '<a href="' + place.url +'" class="marker jumplink" target="_blank">external map</a>'; 
     infowindow.setContent(infowindowPlace); 
     infowindow.open(map, marker); 
    }); 
} 
</script> 

Answer 1

mapZoomReturn需要是一個數字。 val()將返回一個字符串，所以你可以改變爲：

mapZoomReturn = parseInt(jQuery('#mapZoom').val(), 10); 

選擇的變化爲一個ID選擇哪個更有效。

您可能還需要將其他值更改爲數字。您可以在API的所有地圖的方法：

https://developers.google.com/maps/documentation/javascript/reference

您還可以找到的jQuery插件gmaps3有用。它是地圖API的很棒的包裝

http://gmap3.net/

Answer 2

我終於找到了答案 - 添加以下addDomListener到初始化函數開了竅。 change是對下拉列表最有用的事件。

google.maps.event.addDomListener(document.getElementById('mapZoom'), 
     'change', function() { 
     var mapZoomReturn = parseInt(jQuery('select[id=mapZoom]').val(), 10); 
     var mapCurrCenter = map.getCenter(); // center on present location 
     map.setZoom(mapZoomReturn); 
     map.setCenter(mapCurrCenter); 
    } 

我的下一個任務是在用戶使用地圖gui更改地圖縮放時更新選項選擇DOM元素。 。 。 。