谷歌地图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元素。 。 。 。