google maps api3 dynamically updating with user input change

Question

Dipping my toe into google maps api (v3).

To start with Im able to initialise the maps with pre-populated values seeded with jquery selectors as seen below and everything works as expected.

Im running into difficulty updating these values dynamically. Im sure there is a tutorial or some examples that go over this somewhere, but after days of searching, im just not able to sort it out.

A nudge in the right direction - or even better an explicit example would be much appreciated. For starters Im after changing the zoom based on changes to mapZoomReturn, but will apply it to all the var listed.

Many thanks in advance for your help.

<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

I finally found the answer - adding the following addDomListener to the initialize function does the trick. change is the event that is most useful for drop down lists.

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

My next task is to update the option select DOM element when the user changes the map zoom using the map gui. . . .

Answer 2

mapZoomReturn would need to be a number. val() will return a string, so you could change to:

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

Note change of selector to an ID selector which is more efficient.

You will likely need to change other values to numbers as well. You can find all maps methods in API :

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

You may also find jQuery gmaps3 plugin helpful. It's a great wrapper for maps API

http://gmap3.net/