xxxxxxxxxx
<html>
<meta charset="utf-8">
<head>
<style>
#map-canvas {
height:600px;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script>
var map;
var markerData= [
{lat: 36.4 , lng: -120.9 , zoom: 7 , name: "California"},
{lat: 28 , lng: -81 , zoom: 7 , name: "Florida"},
{lat: 40.39 , lng: -3.67 , zoom: 8 , name: "Madrid"},
];
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 3,
center: {lat: 10, lng: 10}
});
markerData.forEach(function(data) {
var newmarker= new google.maps.Marker({
map:map,
position:{lat:data.lat, lng:data.lng},
title: data.name
});
jQuery("#selectlocation").append('<option value="'+[data.lat, data.lng,data.zoom].join('|')+'">'+data.name+'</option>');
});
}
google.maps.event.addDomListener(window, 'load', initialize);
jQuery(document).on('change','#selectlocation',function() {
var latlngzoom = jQuery(this).val().split('|');
var newzoom = 1*latlngzoom[2],
newlat = 1*latlngzoom[0],
newlng = 1*latlngzoom[1];
map.setZoom(newzoom);
map.setCenter({lat:newlat, lng:newlng});
});
</script>
</head>
<body>
<div class="col-md-12 col-sm-12">
<select id="selectlocation">
<option value="10|10|3">Original Map</option>
</select>
</div>
<div class="col-md-12 col-sm-12" id="map-canvas"></div>
</body>
</html>
Modified http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js to a secure url
https://maps.googleapis.com/maps/api/js
https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js