Google Map : Setting marker through several input fields

Question

how do I change the location of a marker based on address input? I know there's google places autocomplete to do the job, but the requirement is to update the map marker after filling in the address form.

JS Fiddle can be found here: http://jsfiddle.net/fhft7bfg/2/

HTML:

<input id="route" placeholder="Street"></input>
<input id="locality" placeholder="City"></input>
<input id="administrative_area_level_1" placeholder="State"></input>
<input id="postal_code" placeholder="Postal Code"></input>
<input id="country" placeholder="Country"></input>
<div id="map-canvas"></div>

JS:

function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

// To add the marker to the map, use the 'map' property
var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title:"Hello World!"
});
}
google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

1. make the map and the marker global
2. modify the codeAddress function from Google's simple geocoder example to use your form elements and to move the marker if it already exists.

working fiddle

working code snippet:

// modified from https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple
var geocoder = new google.maps.Geocoder();
function codeAddress() {
    var street = document.getElementById("route").value;
    var city = document.getElementById("locality").value;
    var state = document.getElementById("administrative_area_level_1").value;
    var postcode = document.getElementById("postal_code").value;
    var country = document.getElementById("country").value;
var address = street +"," + city + "," + state +"," + postcode + "," + country;    
    geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
        if (marker && marker.setPosition) {
            marker.setPosition(results[0].geometry.location);
        } else {
      marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
        }
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

// global variables
var marker;
var map;
function initialize() {
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
    var mapOptions = {
      zoom: 4,
      center: myLatlng
    }
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    
    // To add the marker to the map, use the 'map' property
    marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title:"Hello World!"
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

input{display:block}

#map-canvas{background:#ccc; width:500px; height:300px}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input id="route" placeholder="Street" value="Beacon St"></input>

<input id="locality" placeholder="City" value="Boston"></input>

<input id="administrative_area_level_1" placeholder="State" value="MA"></input>

<input id="postal_code" placeholder="Postal Code" value="02215"></input>

<input id="country" placeholder="Country" value="US"></input>
<input id="geocode" type="button" onclick="codeAddress();" value="geocode"/>
<div id="map-canvas"></div>