How to display markers from select option values?

Question

Code working on just on address var. So in select option value has multiple addresses.

function geocodeAddress(geocoder, resultsMap) {   
                var address = document.getElementById('Select').value;   
                 for(i = 0; i < address.length;i++){   
                 geocoder.geocode({'address': address[i]}, function(results, status) {
                            if (status === google.maps.GeocoderStatus.OK) {
                             // resultsMap.setCenter(results[0].geometry.location);


                              var marker = new google.maps.Marker({
                                map: resultsMap,
                                position: results[i].geometry.location
                              });
                              markers.push(marker);
                            } else {
                              alert('Geocode was not successful for the following reason: ' + status);
                            }   
                        });   
                       }
                    }

related question: [How to display a Google Map based on City selected from a Dropdown Menu](http://stackoverflow.com/questions/41017447/how-to-display-a-google-map-based-on-city-selected-from-a-dropdown-menu) — geocodezip, Mar 23 '17 at 10:32
related question: [Google Maps : change map marker location on dropdown](http://stackoverflow.com/questions/36111339/google-maps-change-map-marker-location-on-dropdown) — geocodezip, Mar 23 '17 at 10:34

score 0 · Accepted Answer · edited May 23 '17 at 12:34

Modified from the related question: Google Maps : change map marker location on dropdown

var geocoder;
var map;
var geoMarker;
var bounds = new google.maps.LatLngBounds();

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  geoMarker = new google.maps.Marker();
  geoMarker.setPosition(map.getCenter());
  geoMarker.setMap(map);
  var txtArray = $("#location option").each(function() {
    console.log($(this).text());
    geocodeAddress($(this).text());
  });
  $("#location").change(function() {
    var addr = ($('#location :selected').text());
    console.log(addr);
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
      'address': addr
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[0].geometry.viewport) {
          map.fitBounds(results[0].geometry.viewport);
        } else if (results[0].geometry.bounds) {
          map.fitBounds(results[0].geometry.bounds);
        } else {
          map.setCenter(results[0].geometry.location);
        }
      } else {
        alert("Error geocoding address: " + address + "status=" + status);
      }
    });
  });

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

function geocodeAddress(address) {
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var marker = new google.maps.Marker({
        position: results[0].geometry.location,
        map: map,
        title: address
      });
      bounds.extend(results[0].geometry.location);
      map.fitBounds(bounds);
    } else {
      alert("Error geocoding address: " + address + "status=" + status);
    }
  });
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<select id="location">
  <option>New York, NY</option>
  <option>Newark, NJ</option>
  <option>Philadelphia, PA</option>
</select>
<div id="map_canvas"></div>

but in when clear Markers doesn't work. markers.push(marker); — Nuraly Mukatayev, Mar 23 '17 at 15:58
There is no `clearMarkers` in the question, not sore what you mean. — geocodezip, Mar 23 '17 at 16:26

How to display markers from select option values?

1 Answers1