0
Google Maps APIを利用するプロジェクトを進めています。デフォルトでは、サンフランシスコを中心とした埋め込みマップを表示するページを作成したいと思いますが、選択されているドロップダウンメニュー項目に応じて、特定のマーカーとポリラインが追加されます。私はマップとマーカーの表示をユーザーの選択に応じて変更するために、このリストを構成する方法がわかりません。ドロップダウンリストの選択に応じて異なる地図マーカーとポリラインを表示します
私がする必要があると思うのは、ユーザー入力に応じて異なるコードチャンクで実行するために、JavaScriptでスイッチ機能を設定することです。私はJavaScriptの初心者ですから、どうやってそれを行うのかは分かりません。
現在、私はドロップダウンリストとデフォルトのマップ表示のみを設定しています。アドバイスをいただければ幸いです。
<!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>