0

ユーザーの位置に焦点を当てたマップを作成しました。マップには、情報ウィンドウを備えた 1 つのマーカーがあります。ユーザーが情報ウィンドウをクリックすると、情報ページ (info.html) へのハイパーリンクが表示されます。ユーザーが情報ページからマップに戻ることができるオプションを作成したいと考えています。マップは、(現在の場所ではなく) 同じマーカーにフォーカスする必要があります。基本的に逆に進んでいます。かなり単純に聞こえますが、これをコーディングする方法がわかりません。マーカーごとに異なるマップを作成できると思いますが、それが正しい解決策になる可能性はほとんどありません。どんな助けでも大歓迎です。

これはスクリプトを使用した私の試みです(initialize2()動作しません): 

$(document).ready(function() {
    getLocation();
});

var map;
var jones = new google.maps.LatLng(40.59622788325198, -73.50334167480469);

function getLocation() {
    navigator.geolocation.getCurrentPosition(
        function(position) {
            var myLatLng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
            map.setCenter(myLatLng);   
        },
        function() {
            alert("Please enable location detection on your device");
        }
    );
}

function initialize() {
    var mapOptions = {
        center: map,
        zoom: 9,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    var infowindow = new google.maps.InfoWindow({
    });

    var marker1 = new google.maps.Marker({
        position: jones,
        map: map
    });

    google.maps.event.addListener(marker1, 'click', function() {
        infowindow.setContent('<h4>Jones Beach</h4><a href="info.html">See info</a>');
        infowindow.open(map,marker1);   
    });
}

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

// this is my attempt to focus on the marker
// there will be a button that will evoke this function from info.html
function initialize2() {
  var mapOptions2 = {
    zoom: 14,
    center: new google.maps.LatLng(40.59622788325198, -73.50334167480469),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions2);
}

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

1 に答える 1

2

URLでハッシュを使用するのはどうですか?

" http://students.example.com/test.html#one "を使ってみてください:

$(function() {

    var places = {
        one: [40.59622788325198, -73.50334167480469],
        two: [50.59622788325198, -71.50334167480469]
    };

    var div = $('#map-canvas');

    var map = new google.maps.Map(div.get(0), {
        center: map,
        zoom: 9,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = {};

    $.each(places, function(name) {

        markers[name] = new google.maps.Marker({
            position: new google.maps.LatLng(this[0], this[1]),
            map: map
        });

    });

    var place = location.hash.substr(1);

    if(place in places) {

        map.setCenter(markers[place].getPosition());

    }

});
于 2013-04-28T19:12:17.730 に答える