0

私は Google Maps API をいじって、やりたいことができました。基本的に、HTML の特定のパラメーターを使用してカスタム マップを作成しています。マップはうまく機能し、マーカーは正しい位置に表示されますが、修正できない小さな問題が 2 つあります。

  1. マーカーのリンクが機能しません - ログに次のエラー メッセージが表示されます: Uncaught TypeError: Cannot read property '_ e3 ' of undefined

  2. ページが読み込まれると、マップは最初にデフォルトの場所に設定され、関数が実行されると特定の場所で更新されます。とにかく、一度に正しい場所でロードできるようにすることはできますか?

特定のパラメーターを含む HTML コードを次に示します。

<div id="map" data-map-address="120-124 Curtain Road, London, EC2A 3SQ" data-map-link="http://my-destination-link.com"></div>

マップの生成に使用する JavaScript は次のとおりです。

var map,
    geocoder,
    mapElem = document.getElementById('map'),
    mapHolder = $('#map'),
    mapAddress = mapHolder.attr("data-map-address"),
    mapUrl = mapHolder.attr("data-map-link"),
    image = new google.maps.MarkerImage('http://my-marker-link.com/marker.png',
        new google.maps.Size(123, 123),
        new google.maps.Point(0,0),
        new google.maps.Point(11, 96));

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(51.51121, -0.11982),
        mapOptions = {
        zoom: 16,
        disableDefaultUI: true,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(mapElem, mapOptions);
}

function codeAddress() {
    geocoder.geocode( { 'address': mapAddress}, 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,
                url: mapUrl,
                title: 'Click here to emlarge the map',
                icon: image
            });
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, 'load', codeAddress);
google.maps.event.addListener(marker, 'click', function() {
    window.location.href = marker.url;
});

誰かがこれら2つの問題を解決するのを手伝ってくれたら本当にありがたいです. オンラインで見つけた回避策を試してみましたが、正しく動作しませんでした。

ありがとう！

4

2 に答える 2

1

1: codeAddress()onload ビットの初期化を内部に配置します。初期化ではまだ中心を設定せずに、 がcodeAddress()場所を見つけて設定するのを待ちます。

2: マーカーのイベントリスナーを間違った場所に配置しているため、このエラーが発生します。そこには、変数が何であるかがわかりませんmarker。マーカーが作成された場所 (関数内) に配置する必要がありますcodeAddress()。

var map,
    geocoder,
    mapElem = document.getElementById('map'),
    mapHolder = $('#map'),
    mapAddress = mapHolder.attr("data-map-address"),
    mapUrl = mapHolder.attr("data-map-link"),
    image = new google.maps.MarkerImage('http://my-marker-link.com/marker.png',
        new google.maps.Size(123, 123),
        new google.maps.Point(0,0),
        new google.maps.Point(11, 96));

function initialize() {
    geocoder = new google.maps.Geocoder();
    var mapOptions = {
            zoom: 16,
            disableDefaultUI: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
    map = new google.maps.Map(mapElem, mapOptions);

    codeAddress();
}

function codeAddress() {
    geocoder.geocode( { 'address': mapAddress}, 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,
                url: mapUrl,
                title: 'Click here to emlarge the map',
                icon: image
            });

            // Add your event listener 
            google.maps.event.addListener(marker, 'click', function() {
                window.location.href = marker.url;
            });
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });


}

google.maps.event.addDomListener(window, 'load', initialize);
于 2013-08-29T12:31:16.950 に答える