-2

私は自分のウェブサイトで Google マップを利用しています。ユーザー インターフェイスを備えた Google マップが必要です。つまり、ユーザーが場所を選択し、送信ボタンを押した後にマップに場所が表示されます。このために、私はコードを書きました。しかし、それは正しく機能していません。このコードを適切に記述して動作させるのを手伝ってくれる人はいますか?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false"></script>
<script type="text/javascript">

        function initialize() {
        var latlng = new google.maps.LatLng(0, 0);
        var myOptions = {
                zoom: 1,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
        };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
        position: latlng,
        map: map,
            });
  }

function selectedLocation() {
 var selected = document.getElementById("location").value;
  if (selected == "Location 1") {
        var location1 = new google.maps.LatLng(48.017, 37.914);
        map.setCenter(location1);
        map.setZoom(12);
}
 else if (selected == "Location 2") {
        var location2 = new google.maps.LatLng(50.269, 28.665);
        map.setCenter(location2);
        map.setZoom(12);
}
}
</script>
</head>
<body onload="initialize()">

  <p>
        <form action="#" >
    <select  id="location">
        <option value="None">-</option>
        <option value="Location 1">Location 1</option>
        <option value="Location 2">Location 2</option>
    </select>
<button type="button" onclick="selectedLocation()">submit</button>
</form>
  </p>
  <div id="map_canvas" style="width:600px; height:400px"></div>
</body>
</html>
4

1 に答える 1

1

コードに 2 つのエラーがあります。

エラー #1 コピー/貼り付けエラーが発生したようです。これにより、オプションのフラグメントが表示されます (以下のアスタリスク間を参照)。

var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
        **position: latlng,
        map: map,
            });**

エラー #2変数 に関連付けられたスコープに問題がありmapます。グローバルでなければならないので、初期化関数の外で宣言する必要があります。

以下の作業コード：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false"></script>
<script type="text/javascript">
var map;
        function initialize() {
        var latlng = new google.maps.LatLng(0, 0);
        var myOptions = {
                zoom: 1,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
        };
    map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  }

function selectedLocation() {
 var selected = document.getElementById("location").value;
  if (selected == "Location 1") {
        var location1 = new google.maps.LatLng(48.017, 37.914);
        map.setCenter(location1);
        map.setZoom(12);
}
 else if (selected == "Location 2") {
        var location2 = new google.maps.LatLng(50.269, 28.665);
        map.setCenter(location2);
        map.setZoom(12);
}
}
</script>
</head>
<body onload="initialize()">

  <p>
        <form action="#" >
    <select  id="location">
        <option value="None">-</option>
        <option value="Location 1">Location 1</option>
        <option value="Location 2">Location 2</option>
    </select>
<button type="button" onclick="selectedLocation()">submit</button>
</form>
  </p>
  <div id="map_canvas" style="width:600px; height:400px"></div>
</body>
</html>
于 2012-05-11T05:42:29.403 に答える