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>

orionrush · Accepted Answer · 2012-12-24 22:03:51Z

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. . . .

answered Dec 24, 2012 at 22:03

orionrush

5756 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

charlietfl · Accepted Answer · 2012-12-24 00:01:07Z

0

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/

edited Dec 24, 2012 at 0:01

answered Dec 23, 2012 at 23:55

charlietfl

172k14 gold badges125 silver badges154 bronze badges

2 Comments

orionrush Over a year ago

Thanks for the tip re parseInt - its not been an issue as I convert it later in the initialize script map.setZoom(parseFloat(mapZoomReturn)) . Must I really resort to another plugin to update these values dynamically? I was hoping someone could point me to a way to add listeners to these inputs - I really cant make much sense of the documentation, as understandably revolves around events in the map itself - not events outside.

charlietfl Over a year ago

gmap3 plugin does make the coding a lot simpler...up to you

Collectives™ on Stack Overflow

google maps api3 dynamically updating with user input change

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related