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>