Display different map markers and polyline depending on dropdown list selection
Question
I am working on a project that utilizes the Google Maps API. I would like to do create a page that by default displays an embedded map centered on San Francisco, but that adds specific markers and polylines depending on which of the dropdown menu items has been selected. I'm not sure how to configure this list to change the map and marker display depending on the user selection.
What I think I need to do is set up a switch function with JavaScript to execute on different code chunks depending on user input. I'm a total beginner with JavaScript, though, so I'm not sure how to do that.
Right now I have only set up the drop-down list and the default map display. Any advice would be greatly appreciated.
<!DOCTYPE html>
<!-- The majority of this embedding code was borrowed from code.google.com/apis/maps/documentation/javascript/examples/map-simple.html -->
<html>
<head>
<meta name="viewport" content="width=page-width, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>Project 2: BART Route Map</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(37.786453,-122.416649);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"San Francisco"
});
}
</script>
</head>
<body onload="initialize()">
<h1> BART Route Map </h1>
<h2> Select a route: </h2>
<form id="routeselector">
<select name="mapchange">
<option value="DALY-DUBL">Daly City - Dublin/Pleasanton</option>
<option value="DALY-FRMT">Daly City - Fremont</option>
<option value="DUBL-DALY">Dublin/Pleasanton - Daly City</option>
<option value="FRMT-DALY">Fremont - Daly City</option>
<option value="FRMT-RICH">Fremont - Richmond</option>
<option value="MLBR-RICH">Millbrae/Daly City - Richmond</option>
<option value="SFIA-PITT">Millbrae/SFIA - Pittsburg/Bay Point</option>
<option value="PITT-SFIA">Pittsburg/Bay Point - SFIA/Millbrae</option>
<option value="RICH-FRMT">Richmond - Fremont</option>
<option value="RICH-MLBR">Richmond - Daly City/Millbrae</option>
</select>
</form>
<div id="map_canvas" style="height=100%; width=100%">
</div><!-- map_canvas -->
</body>
</html>
1 answers
solution1
0 2011-08-07 13:42:42
You could use addDomListener() to listen for the appropraite DOM event (probably onChange ) of the <select> control. Inside the handler for that event, you would need to set the existing marker's map to null and set the map of the marker you want to show to map . If you have a reasonable number of markers, you could create them all ahead of time. If you're dealing with thousands of markers, it's a different story. If you must create markers as needed, be sure you understand how scoping works in the handler.
I've not worked with polylines, but the process is likely similar, perhaps even identical.
I don't really think a switch statement is what you want to use in this case, but since you ask, you can just Google javascript switch statement and find decent explanations. Even the much-maligned w3schools has an acceptable quick intro (although it lacks details). Here's their way of showing the syntax:
switch(n)
{
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default:
code to be executed if n is different from case 1 and 2
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.