0

カスタム公開 Google マップに地理位置情報を追加しようとしていますが、うまく機能させることができません。たとえば、ここにカスタム公開 Google マップがあります。

その地図にジオターゲティングを追加したいとしましょう。GoogleマップAPI Webサイトから直接離れたサイトに次のものがあります。

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

'.getElementsById' を '.getElementsByClassName' に変更した次のように:

    <script type="text/javascript">
var map;

function initialize() {
  var mapOptions = {
    zoom: 3,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementsByClassName('map-canvas'),
      mapOptions);

  // Try HTML5 geolocation
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);

      var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: 'Location found using HTML5.'
      });

      map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }
}

function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }

  var options = {
    map: map,
    position: new google.maps.LatLng(60, 105),
    content: content
  };

  var infowindow = new google.maps.InfoWindow(options);
  map.setCenter(options.position);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>

次に、ライトボックスにあるマップを呼び出します。

<a href="https://maps.google.ca/maps/ms?msa=0&msid=202458571791405992786.0004b9061a3fcd9461d42&lightbox[width]=70p&lightbox[height]=70p" class="map-canvas lightbox"><h2 class="dis">Where can I<br />get Rumble?</h2></a>

地図をうまく表示し、ジオターゲティングを要求しますが、この地図で機能しない理由は、API に含まれていないためだと思います。

誰かがこれに対する解決策を持っていることを望んでいました。

4

1 に答える 1

1

これは API ベースのマップではありません。そのマップの KML をAPI ベースのマップに表示できます

次に、ジオロケーション コードを使用してマップを中央に配置します (順序によっては、KmlLayer で preserveViewport:true オプションを使用する必要がある場合があります)。以下の関連コード。その他の例と情報については、ドキュメントを参照してください。

これは既存のページにあります (バージョンはそのままにしてください)

var myOptions = {
    zoom: 5,
    center: new google.maps.LatLng(0,0),
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };

var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

これを追加して、「カスタム マップ」のデータを表示します。

var kmlLayer = new google.maps.KmlLayer("https://maps.google.ca/maps/ms?ie=UTF8&msa=0&output=kml&msid=202458571791405992786.0004b9061a3fcd9461d42");
kmlLayer.setMap(map);
于 2013-07-02T18:12:48.613 に答える