0

Firefox アドオン Ubiquity で遊んでいます。プレビュー ページにカスタム Google マップを配置しようとしています。ページには次の内容が含まれている必要があります。

<html>
<head>
  <title>Google Maps Multiple Markers</title>
  <script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY" type="text/javascript"></script>
</head>
<body>
<div id="map" style="height: 400px; width: 500px;"></div>
<script type="text/javascript">
    var locations = ['Bondi Beach', 'Coogee Beach', 'Cronulla Beach', 'Manly Beach', 'Maroubra Beach'];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var marker, i;
    var geocoder = new google.maps.Geocoder();

    for (i = 0; i < locations.length; i++) {
        console.log("coding " + locations[i]);
        geocoder.geocode({'address': locations[i].toLowerCase()}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
    }
  </script>
</body>
</html>

ただし、locations変数は入力によって設定する必要があります。アイデアは、ユーザーが複数の場所をマップできるようにすることです (この機能はかつてそこにありましたが、私はそれを作り直そうとしています)。単純に設定してみましpblock.innerHTMLたが、入力は入っているようですが何も表示されません。デフォルトmapコマンドの機能をリバース エンジニアリングしてみましたが、その仕組みがわかりません。

4

1 に答える 1