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>

I think you need to add the coordinates as the values for options and reload the map each time you select a city. What have you tried? The code in your question doesn't seem much. — Ionut Necula, Dec 07 '16 at 12:25
Read this post http://stackoverflow.com/questions/32693958/how-to-highlite-region-of-dropdown-selected-area-on-google-map @Brandy Kimmel — simon, Dec 07 '16 at 12:27
I have the coordinates, just not sure how to add them. These are the Lat & Long for each city: latLong for PHI (39.95228, -75.16245) latLong for NYC (40.712784, -74.005941) latLong for HAR (41.763711, -72.685093) — Brandy Kimmel, Dec 07 '16 at 12:28
Are you asking if I know how to use jQuery, or if I am allowed to use jQuery? — Brandy Kimmel, Dec 07 '16 at 12:34
I know how if that is the question. I am not certain if I am allowed or not. I have tried a series of if statements to change the map, and I have researched other methods. None of which have worked for me and most of which are simply using markers to denote where the cities are. I actually need the map to change based on the selection and I have just ran into a complete road block. — Brandy Kimmel, Dec 07 '16 at 12:36
@simon In the post you shared. Where do those locations come from? — Brandy Kimmel, Dec 07 '16 at 12:41
possible duplicate of [Change google map location on selectbox change after the map and markers loaded](http://stackoverflow.com/questions/34466165/change-google-map-location-on-selectbox-change-after-the-map-and-markers-loaded) — geocodezip, Dec 07 '16 at 14:02

score 2 · Accepted Answer · answered Dec 07 '16 at 12:41

2

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

answered Dec 07 '16 at 12:41

Mosh Feu

28,354
16
88
135

I believe this is the closest to what I was trying to achieve. I was just having trouble figuring out the second function with the values. – Brandy Kimmel Dec 07 '16 at 14:10
`the second function with the values` what do you mean? what trouble? – Mosh Feu Dec 07 '16 at 14:33
This is what I have been trying to do since yesterday. Prior to seeing your code, I just wasn't sure how to make it work. Apparently I still do not know how to get it to work. I am not sure what I am doing wrong. No matter what I do I cannot get it to work on my system. I understand your code perfectly. I just for some reason cannot make it work. I even deleted everything I had and straight up copied and pasted what you have and it does not work for me. – Brandy Kimmel Dec 07 '16 at 14:45
Do you have any errors in the `console`? What part is not working? Is the map not showing? Is the change event of the dropdown that are not firing? Or the part that takes the coords and set the center of the map according to? – Mosh Feu Dec 07 '16 at 15:19
The map does not show up and I get an error of changeMap is undefined. – Brandy Kimmel Dec 07 '16 at 15:25
Where is the function `changeMap`? I can't see it in your code. Can you create a [bin](http://jsbin.com) with your code? – Mosh Feu Dec 07 '16 at 15:33
Thank you for your help. I figured out where I went wrong. Too many things going on this morning and too many extra things in the way. I was able to figure it out once I got into the console and really looked at the errors. Thank you so much for your help. – Brandy Kimmel Dec 07 '16 at 15:43

score 2 · Answer 2 · answered Dec 07 '16 at 14:01

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>

simon · Answer 3 · 2016-12-07T12:58:22.633

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>

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

3 Answers3