これのどこに問題があるのかわからないので、API の v3 を使用して、数か月前にカスタム マーカーを使用して Google マップを作成しました。当時、情報ウィンドウは機能していました。
私はそれを新しいサイトに移植していて、情報ウィンドウを開くことができません.jsはクリックイベントを作成するときに適切なポイントでアラートを出しますが、クリックイベントは発生しません.マップをドラッグするだけです.私が最後に行ったサイトで、現在も機能していません。
これを修正する方法がわからないので、情報ウィンドウを作成する必要があるコードは次のとおりです。
markersArray.push(marker);
markersPosArray.push(myLatLng);
// Wrapping the event listener inside an anonymous function
// that we immediately invoke and passes the variable i to.
(function(myData, marker) {
alert('creating listener for: '+marker);
// Creating the event listener. It now has access to the values of
// myData and marker as they were during its creation
google.maps.event.addListener(marker, 'click', function() {
//create thecontent for the infowindow
alert('creating info window');
var content = 'hello there'; //createContent(myData);
infowindow.setContent(content);
infowindow.open(map, marker);
});
})(myData, marker);
私が気付いていないAPIで何かが変更されたのでしょうか?
テストページはhttp://www.disposalknowhow.com/locator.phpで見ることができます。 ロケータでは、次を使用して結果を取得します。
タイプ: 電気/電子機器 - 品目: コンピュータ - 半径: 100 - 郵便番号: n11hl
私が行った前のものは動作していませんが、現在は次の場所で見ることができます: http://www.focus-on-plants.com/locator_icned.php (ここのフォームで任意のパラメーターを使用できます)
アップデート:
treffys の回答への返信:
マップを作成すると、情報ウィンドウが定義されます。
var myLatLng = new google.maps.LatLng(51.470, -0.00);
var bounds = new google.maps.LatLngBounds();
var geocoder = new google.maps.Geocoder();
var gotIcons = false;
var iconImageArray = {image:{}, size:{}, sizeX:{}, sizeY:{}, origin:{}, originX:{}, originY:{}, anchorpoint:{}, anchorpointX:{}, anchorpointY:{}};
var iconShadowArray = {image:{}, size:{}, sizeX:{}, sizeY:{}, origin:{}, originX:{}, originY:{}, anchorpoint:{}, anchorpointX:{}, anchorpointY:{}};
var iconShapeArray = {poly:{}, coord:{}};
var myIconArray = {icon:{}, shadow:{}, shape:{}}
var infowindow = new google.maps.InfoWindow();
var markersArray = []; // to store out markers
var markersPosArray = []; // to store lat/lang of markers for zooming function
var markersInfoArray = [];
// MAP OPTIONS
var myOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN,
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
}
};//end map options
var map = new google.maps.Map(document.getElementById("loc_map"), myOptions);