javascript - ejemplos - Cambiar la ubicación del mapa de google en el cambio de la casilla de selección después de cargar el mapa y los marcadores

google maps html

Question

Cómo cambiar la ubicación del mapa de Google para que otras coordenadas lat y largas estén en el centro del mapa de google en el cambio de la casilla de selección. El mapa y los marcadores ya se cargaron correctamente. Lo único que cambia es, digamos, desplazar el mapa ya cargado a la ciudad adecuada cuando se elige desde la casilla de selección. Las coordenadas de los marcadores NO deben cambiarse.

<select>
  <option value="1" selected>NYC</option>
  <option value="2">Chicago</option>
  <option value="3">Boston</option>
</select>

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

Answer 1

Si tiene las coordenadas de las ubicaciones de la ciudad desplegable, utilícelas. De lo contrario, puede usar el geocodificador (si proporciona los nombres que reconoce):

fragmento de código:

function initialize() {
  var map = new google.maps.Map(document.getElementById("map"));
  var geocoder = new google.maps.Geocoder();
  $("#dropdown").change(function() {
    address = $("#dropdown :selected")[0].text;
    geocodeAddress(address, geocoder, map);
  });
  var address = $("#dropdown :selected")[0].text;
  geocodeAddress(address, geocoder, map);
}
google.maps.event.addDomListener(window, "load", initialize);

function geocodeAddress(address, geocoder, resultsMap) {
  document.getElementById(''info'').innerHTML = address;
  geocoder.geocode({
    ''address'': address
  }, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      resultsMap.fitBounds(results[0].geometry.viewport);
      document.getElementById(''info'').innerHTML += "<br>" + results[0].geometry.location.toUrlValue(6);
    } else {
      alert(''Geocode was not successful for the following reason: '' + status);
    }
  });
}

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" selected>New York City</option>
  <option value="2">Chicago</option>
  <option value="3">Boston</option>
  <option value="4">Palo Alto</option>
  <option value="5">Seattle</option>
</select>
<div id="info"></div>
<div class="map-container">
  <div id="map"></div>
  <!--the google map is loaded already-->
</div>