2013-06-07 11 views
15

をgoogle.mapするのonclickイベントを追加:(私はグーグルマップは、JSの少しを把握しようと、私はこだわっているマーカー

var myCenter=new google.maps.LatLng(53, -1.33); 

function initialize() 
{ 
var mapProp = { 
    center:myCenter, 
    zoom: 14, 
    draggable: false, 
    scrollwheel: false, 
    mapTypeId:google.maps.MapTypeId.ROADMAP 
}; 

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

var marker=new google.maps.Marker({ 
    position:myCenter, 
    icon:'images/pin.png', 
    url: 'http://www.google.com/', 
    animation:google.maps.Animation.DROP 
}); 
marker.setMap(map); 
} 

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

を持っているしかし、私はonclickのをフックに見えることはできませんマーカーURLのイベント?

私はそれが

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

しかし、今まで、私はそれがマップが表示されないようにするか、マーカーが表示されなくなり置く。

を追加することとは何かを持って知っています
+0

のwheresあなたの情報ウィンドウ? –

+0

@Alex infoWindowは必要ありません。私はマーカー(ピン)にURLクリックイベントを追加することについて話しています。しかし、ありがとう。私はSkellyが答えを持っていると思う。 – Mark

答えて

12

がinitialize()の外で定義されていることを確認してください。それ以外の場合は、クリックリスナーをinitialize()の外に割り当てようとすると、undefinedになります。

また、URL www.google.comを読み込もうとすると、同じ問題が発生する可能性がありますが、ローカルURLで正常に動作するはずです。

更新されたコード

var myCenter=new google.maps.LatLng(53, -1.33); 

var marker=new google.maps.Marker({ 
    position:myCenter, 
    url: '/', 
    animation:google.maps.Animation.DROP 
}); 

function initialize() 
{ 
var mapProp = { 
    center:myCenter, 
    zoom: 14, 
    draggable: false, 
    scrollwheel: false, 
    mapTypeId:google.maps.MapTypeId.ROADMAP 
}; 

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

marker.setMap(map); 
} 

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

Working Demo on Bootply

0

ここに私が過去にしたことがあります。私のコードとあなたのものの間に見られる唯一の違いは、マーカーオプションをマーカーマップに設定し、marker.setMap(Map)で設定していることです。

var marker = new window.google.maps.Marker({ 
     position: markerPosition, 
     map: map, 
     draggable: false, 
     zIndex: zIndex, 
     icon: getNewIcon(markerType != "archive", isBig) 
     , animation: markerAnimation 
    }); 


    window.google.maps.event.addListener(marker, 'click', function() { 
     // do stuff 
    }); 
0

ないコンテンツがあるが、あなたは次のことを行う必要があるだろう場所を確認してください...

var yourContent = new google.maps.InfoWindow({ 
    content: 'blah blah' 
}); 

google.maps.event.addListener(marker, 'click', function() { 
    yourContent.open(map,marker); 
}); 
4

これは私が使用したいものです。

var latLng = new google.maps.LatLng(53, -1.33); 

var map = new google.maps.Map(document.getElementById('map_canvas'), { 
    center: latLng, 
    draggable: false, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    scrollwheel: false, 
    zoom: 14 
}); 

var marker = new google.maps.Marker({ 
    animation: google.maps.Animation.DROP, 
    icon: 'images/pin.png', 
    map: map, 
    position: latLng 
}); 

google.maps.event.addDomListener(marker, 'click', function() { 
    window.location.href = 'http://www.google.co.uk/'; 
}); 

私はありませんMarkerオブジェクトでurlプロパティを格納できるかどうかを確認してください。

あなたが(API呼び出しからIE)複数のマーカーを表示する必要があるなら、あなたはこのようなforループを使用することができます:あなたはこのページに行けば

for (var i = 0; i < markers.length; i++) { 
    (function(marker) { 
     var marker = new google.maps.Marker({ 
      animation: google.maps.Animation.DROP, 
      icon: 'images/pin.png', 
      map: map, 
      position: market.latLng 
     }); 

     google.maps.event.addDomListener(marker, 'click', function() { 
      window.location.href = marker.url; 
     }); 
    })(markers[i]); 
} 
0
var myLatlng = new google.maps.LatLng(-25.363882, 131.044922); 
var mapOptions = { 
    zoom: 4, 
    center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

var marker = new google.maps.Marker({ 
    position: myLatlng, 
    map: map, 
    title: 'Hello World!', 
    url: 'http://www.google.com' 
}); 
google.maps.event.addListener(marker, 'click', function() { 
    window.location = marker.url; 
}); 

を:https://google-developers.appspot.com/maps/documentation/javascript/examples/full/marker-simple

上記のコードをコンソールに貼り付けると、動作することがわかります。あなたの初期化関数の内部で

google.maps.event.addListener(marker, 'click', function() { 
    window.location = marker.url; 
}); 

は、私はあなたがこの行を配置する必要があり、あなたは持っている問題は次のようだと思います。

関連する問題