Javascript 谷歌地图API：标记链接不'；行不通

我一直在玩谷歌地图API，并设法做到我想要的。基本上，我正在使用HTML中的一些特定参数创建一个自定义映射。地图运行良好，标记弹出在正确的位置，但我有两个小问题无法解决：

标记的链接不起作用-我在日志中收到以下错误消息：Uncaught TypeError:无法读取未定义的属性“\u e3”

当页面加载时，首先将地图设置为默认位置，然后在函数运行时使用特定位置进行更新。我是否可以立即将其加载到正确的位置

以下是带有特定参数的HTML代码：

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

如果有人能帮我解决这两个问题，我将不胜感激。我在网上查找并尝试了我找到的解决方法，但我无法让它正常工作

---

谢谢

不确定链接失败的原因，但要使地图加载到正确的位置，您必须首先对该位置进行地理编码，一旦收到maps api的响应，您就可以使用正确的起始位置构建地图

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(geoLocation) {
    mapOptions = {
        zoom: 16,
        disableDefaultUI: true,
        center: geoLocation,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(mapElem, mapOptions);
}

function codeAddress() {
    geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        'address': mapAddress
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            initialize(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                url: mapUrl,
                title: 'Click here to enlarge the map',
                icon: image
            });
            google.maps.event.addListener(marker, 'click', function () {
                window.location.href = marker.url;
            });
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}
//Call codeAddress to initialize the geocoding.  When that returns it will initialize the map with the geocode location
codeAddress();

---

1：我会将

codeAddress（）

放在您的initialize中作为onload位。不要在初始化中设置中心，而是等待

codeAddress（）

查找并设置位置

2：您之所以会出现此错误，是因为您将标记的eventlistener放在了错误的位置。它不知道变量

标记是什么。您需要将其放置在创建标记的位置（在
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);

mapTypeId:google.maps.mapTypeId.ROADMAP}之后缺少分号
不确定这是否与此有关？@RobSchmuecker，你是什么意思？这是对象的一部分。因此它不需要分号。@putvande我刚刚运行了一个JSHint，它抱怨了！正如我所说的，不确定它是否与此有关！太棒了，地图现在显示在页面加载上的正确位置。但是链接对我仍然不起作用，我得到以下错误：未捕获引用错误：未定义标记。我尝试全局定义变量，但得到与以前相同的错误。你是否将其放在代码中我在答案中找到它的位置？是的，我复制了我刚才又试了一次，它工作得很好，这一定是早期的缓存问题。谢谢你的帮助-非常感谢！
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);