How to display a Google Map based on City selected from a Dropdown Menu

Question

I need to display a map based on a place being selected. I need to know how to change the map based on the dropdown menu. Here is what I have so far, but I cannot seem to figure out how to actually change the map using a selection from the dropdown. I am just completely blanking here. Any references or help is greatly appreciated. Here is the code I currently have.

<script>
    function myMap() {
        var mapCanvas = document.getElementById("map");
        var mapOptions = {  
        center: new google.maps.LatLng(40.685646, -76.195499), zoom: 10 
    };
    var map = new google.maps.Map(mapCanvas, mapOptions);
}

</script>

<div>
    <h2>Please Choose a City</h2>
</div>
<form>
    <fieldset>
        <label>
            Cities
        </label>
        <select id="myCity" name="myCity">
            <option value="None">Select a City</option>
            <option value="PHI">Philadelphia, PA</option>
            <option value="NYC">New York, NY</option>
            <option value="HAR">Hartford, CT</option>
        </select>
    </fieldset>
</form>

Answer 1

One option would be to use the geocoder to zoom the map to the appropriate bounds for the city:

<select id="myCity" name="myCity" onchange="geocodeAddress(this.value);">
  <option value="None">Select a City</option>
  <option value="Philadelphia, PA">Philadelphia, PA</option>
  <option value="New York, NY">New York, NY</option>
  <option value="Hartford, CT">Hartford, CT</option>
</select>

function geocodeAddress(address) {
    geocoder.geocode({'address': address}, function(results, status) {
      if (status === 'OK') {
        if (results[0].geometry.viewport) { 
        map.fitBounds(results[0].geometry.viewport);
        } else {
        map.fitBounds(results[0].geometry.bounds);
        } 
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }

proof of concept fiddle

code snippet:

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}
#map {
  height: 70%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

<script>
  var geocoder;
  var map;

  function myMap() {
    var mapCanvas = document.getElementById("map");
    var mapOptions = {
      center: new google.maps.LatLng(40.685646, -76.195499),
      zoom: 10
    };
    map = new google.maps.Map(mapCanvas, mapOptions);
    geocoder = new google.maps.Geocoder();
  }

  function geocodeAddress(address) {
    if (address != "None") {
      geocoder.geocode({
        'address': address
      }, function(results, status) {
        if (status === 'OK') {
          if (results[0].geometry.viewport) {
            map.fitBounds(results[0].geometry.viewport);
          } else {
            map.fitBounds(results[0].geometry.bounds);
          }
        } else {
          alert('Geocode was not successful for the following reason: ' + status);
        }
      });
    } else { // set back to initial zoom and center
      map.setOptions({
        center: new google.maps.LatLng(40.685646, -76.195499),
        zoom: 10
      });
    }
  }
</script>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
<div>
  <h2>Please Choose a City</h2>
</div>
<form>
  <fieldset>
    <label>
      Cities
    </label>
    <select id="myCity" name="myCity" onchange="geocodeAddress(this.value);">
      <option value="None">Select a City</option>
      <option value="Philadelphia, PA">Philadelphia, PA</option>
      <option value="New York, NY">New York, NY</option>
      <option value="Hartford, CT">Hartford, CT</option>
    </select>
  </fieldset>
</form>

Answer 2

Check this example. Data are store in select data, I get this data by change event on select and use setCenter with the new data

var map;

function initialize() {
  
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 40.712784, lng: -74.005941},
    zoom: 8
  });

}

$("#dropdown").change(function() {
  var lat = $("#dropdown option:selected").data('lat');
  var lng = $("#dropdown option:selected").data('lng');
  changeLoc(lat, lng);
});

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

function changeLoc(lat, lng) {
  map.setCenter(new google.maps.LatLng(lat,lng));
}

html,
body,
#map,
.map-container {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown">
  <option value="1" data-lat="40.712784" data-lng="-74.005941" selected>New York City</option>
  <option value="2"  data-lat="39.95228" data-lng="-75.16245" >Philadelphia</option>
</select>


<div class="map-container">
  <div id="map"></div>
  <!--the google map is loaded already-->
</div>

Answer 3

Just store the coords by the city key. When the select change, take the value, get the coords and call the method setCenter _(docs) with these coords.

Let me know if something is not clear.

var map;
function myMap() {
  var mapCanvas = document.getElementById("map");
  var mapOptions = {  
    center: new google.maps.LatLng(40.685646, -76.195499), 
    zoom: 10 
  };
  map = new google.maps.Map(mapCanvas, mapOptions);
}

myMap();

var coords = {
  'PHI': '39.953050,-75.163961',
  'NYC': '40.875597,-77.776226',
  'HAR': '41.763633,-72.682662'
};

function changeMap(city) {
  var c = coords[city].split(',');
  map.setCenter(new google.maps.LatLng(c[0], c[1]));
}

#map {
  height: 200px;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>

<div>
  <h2>Please Choose a City</h2>
</div>
<form>
  <fieldset>
    <label>
      Cities
    </label>
    <select id="myCity" name="myCity" onchange="changeMap(this.value)">
      <option value="None">Select a City</option>
      <option value="PHI">Philadelphia, PA</option>
      <option value="NYC">New York, PA</option>
      <option value="HAR">Hartford, CT</option>
    </select>
  </fieldset>
</form>
<div id="map"></div>

http://output.jsbin.com/suhiveb