I need to be able to update a google map from a html select dropdown menu. Bit of a n00b so any info would be much appreciated. I have the following JS / Google map api v3 code to work with.
Using the select dropdown menu i will need to be able to update the map using the varibales, i.e select bromley_route638.setMap(map); from a dropdown menu. Thanks!
<script>
// Mapping variables
var global_strokeColor = "#FF0000";
var global_strokeOpacity = 1.0;
var global_strokeWeight = 2;
//BROMLEY BOROUGH
var bromley_centrepoint = new google.maps.LatLng(51.408664,0.114405);
var school_bromley_beaverwood = new google.maps.LatLng(51.41859298,0.089179345);
var school_bromley_bishpjustus = new google.maps.LatLng(51.382522,0.045018);
// Route 638
var bromley_route638 = new google.maps.Polyline({
path: [new google.maps.LatLng(51.408664,0.114405),new google.maps.LatLng(51.412973,0.114973),new google.maps.LatLng(51.417979,0.097195),new google.maps.LatLng(51.421214,0.023720)],
strokeColor: global_strokeColor,
strokeOpacity: global_strokeOpacity,
strokeWeight: global_strokeWeight
});
function initialize() {
var myLatLng = bromley_centrepoint;
var myOptions = {
zoom: 13,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
bromley_route638.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
<div id="asd">
<form style="float:left; ">
<select name="mapchange">
<option onclick="">school 1</option>
<option onclick="">school 2</option>
</select>
</form>
</div>
</body>
</html>
EDIT:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Bus Routes</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function updateMap(selectControl) {
switch(selectControl.value)
{
case school1:
var polyline = new google.maps.Polyline({
path: [
new google.maps.LatLng(51.408664,0.114405),
new google.maps.LatLng(51.412973,0.114973),
new google.maps.LatLng(51.417979,0.097195),
new google.maps.LatLng(51.421214,0.023720)],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
var latLng = new google.maps.LatLng(51.41859298,0.089179345)
break;
case school2:
var polyline = new google.maps.Polyline({
path: [
new google.maps.LatLng(51.408664,0.114405),
new google.maps.LatLng(51.412973,0.114973),
new google.maps.LatLng(51.417979,0.097195),
new google.maps.LatLng(51.421214,0.023720)],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
var latLng = new google.maps.LatLng(51.382522,0.045018)
break;
default:
break;
}
initialize(polyline, latLng);
}
function initialize(polyline, schoolLatLng) {
var myLatLng = schoolLatLng;
var myOptions = {
zoom: 13,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
polyline.setMap(map);
}
//end
</script>
</head>
<body onload="initialize()">
<div id="map" style="width:600px; height:600px; display:block;">
<div id="map_canvas" style="width:600px; height:600px;"></div>
</div>
<form style="float:left; ">
<select name="mapchange">
<option onchange="updateMap" value="school1">school 1</option>
<option onchange="updateMap" value="school2">school 2</option>
</select>
</form>
</body>
</
html>
ok. here is the entire code and it is working: try changing items in the drop dow list and the map will update …. ONLY ADD INITIAL VALUES for the case: