2017-01-01 4 views
-5

マウスオーバーで各マーカーに1つの情報ウィンドウを開き、クリックでさらに詳細な情報を持つルートリンクマーカーで地図を作成しようとしています。 より詳細には私のバージョンは私が現在、クリックの情報ウィンドウを持っているものを変更しようとするまで...そして、それをすべて停止または私はマーカーやポリラインを失う作品 Google Maps Info Windows詳細な複数の情報ウィンドウを入力するには

のようになります。..

私が持っています私がこれまでに発見したすべての答えを試みたが成功せず、私は間違って何かを持って考えて....

var map; 
var clicked = false; 
var locations = [ 
    //start of locations list 

    ['Sydney', -33.8688197, 151.2092955, 1, 'https://en.wikipedia.org/wiki/Sydney'], 
    ['Vancouver', 49.2827291, -123.1207375, 2, 'https://en.wikipedia.org/wiki/Vancouver'], 
    ['Vancouver', 49.2827291, -123.1207375, 3, 'https://en.wikipedia.org/wiki/Vancouver'], 
    ['Kamloops', 50.6745220, -120.3272674, 4, 'https://en.wikipedia.org/wiki/Kamloops'], 
    ['Jasper,Canada', 52.8736786, -118.0813581, 5, 'https://en.wikipedia.org/wiki/Jasper,Canada'], 
    ['Banff', 51.1783629, -115.5707694, 6, 'https://en.wikipedia.org/wiki/Banff'], 
    ['Lake Louise,Canada', 51.4253705, -116.1772552, 7, 'https://en.wikipedia.org/wiki/Lake Louise,Canada'], 
    ['Calgary', 51.0486151, -114.0708459, 8, 'https://en.wikipedia.org/wiki/Calgary'], 
    ['Canadian Rockies', 54.1521752, -120.1585339, 9, 'https://en.wikipedia.org/wiki/Canadian Rockies'], 
    ['Niagara Falls', 43.0962143, -79.0377388, 10, 'https://en.wikipedia.org/wiki/Niagara Falls'], 
    ['New York', 40.7127837, -74.0059413, 11, 'https://en.wikipedia.org/wiki/New York'], 
    ['Rockerfeller Building', 40.7587402, -73.9786736, 12, 'https://en.wikipedia.org/wiki/Rockerfeller Building'], 
    ['Statue Of Liberty', 40.6892494, -74.0445004, 13, 'https://en.wikipedia.org/wiki/Statue Of Liberty'], 
    ['Empire State Building', 40.7484405, -73.9856644, 14, 'https://en.wikipedia.org/wiki/Empire State Building'], 
    ['Washington D.C.', 38.9071923, -77.0368707, 15, 'https://en.wikipedia.org/wiki/Washington D.C.'], 
    ['Utah', 39.3209801, -111.0937311, 16, 'https://en.wikipedia.org/wiki/Utah'], 
    ['Arches National Park', 38.7330810, -109.5925139, 17, 'https://en.wikipedia.org/wiki/Arches National Park'], 
    ['Las Vegas', 36.1699412, -115.1398296, 18, 'https://en.wikipedia.org/wiki/Las Vegas'], 
    ['Bryce National Park', 37.5930377, -112.1870895, 19, 'https://en.wikipedia.org/wiki/Bryce National Park'], 
    ['Zion national Park', 37.2982022, -113.0263005, 20, 'https://en.wikipedia.org/wiki/Zion national Park'], 
    ['San Francisco', 37.7749295, -122.4194155, 21, 'https://en.wikipedia.org/wiki/San Francisco'], 
    ['Alcatraz', 37.8269775, -122.4229555, 22, 'https://en.wikipedia.org/wiki/Alcatraz'], 
    ['Yosemite', 37.8651011, -119.5383294, 23, 'https://en.wikipedia.org/wiki/Yosemite'], 
    ['San Francisco', 37.7749295, -122.4194155, 24, 'https://en.wikipedia.org/wiki/San Francisco'], 
    ['Sydney', -33.8688197, 151.2092955, 25, 'https://en.wikipedia.org/wiki/Sydney'], 


    //end of locations list 
]; 

function initialize() { 
    var mapOptions = { 
    zoom: 4, 
    center: new google.maps.LatLng(-33.868819, 151.2092966) 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
    mapOptions); 

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

    var marker, i; 

    for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     map: map 
    }); 

    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) { 
     return function() { 
     infowindow.setContent(locations[i][0]); 
     infowindow.open(map, marker); 
     } 
    })(marker, i)); 

    google.maps.event.addListener(marker, 'mouseout', function() { 
     if (!clicked) { 
     infowindow.close(); 
     } 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     clicked = true; 
     infowindow.setContent("Coming !!"); 
     infowindow.open(map, this); 
    }); 
    google.maps.event.addListener(infowindow, 
     'closeclick', 
     function() { 
     clicked = false 
     }) 
    } 

    var lineCoordinates = locations.map(function(val) { 
    return new google.maps.LatLng(val[1], val[2]); 
    }); 

    var tripPath = new google.maps.Polyline({ 
    path: lineCoordinates, 
    geodesic: true, 
    strokeColor: '#000', 
    strokeOpacity: 1.0, 
    strokeWeight: 2 
    }); 

    tripPath.setMap(map); 
} 

initialize(); 

Current jsfiddle version

+1

を含む詳細情報ウィンドウを追加してくださいヨーヨーを示す[mcve] ur問題。どのように "クリック"リスナーを変更しようとしていますか? – geocodezip

答えて

0

私はないです私が最終的に何を修正したのか、またはオリジナルがどこに間違っていたのかを完全に確かめました。

他の誰かが同じアイデアへの回答を見つけるのに苦労している場合は、ここに新しいバージョンのコピーがあります。

Working Fiddle

var map 
    var clicked = false 
    var locations = [ 
    ['Sydney', -33.8688197, 151.2092955, 1,'https://en.wikipedia.org/wiki/Sydney'], 
['Vancouver', 49.2827291, -123.1207375, 2,'https://en.wikipedia.org/wiki/Vancouver'], 
['Vancouver', 49.2827291, -123.1207375, 3,'https://en.wikipedia.org/wiki/Vancouver'], 
['Kamloops', 50.6745220, -120.3272674, 4,'https://en.wikipedia.org/wiki/Kamloops'], 
['Jasper,Canada', 52.8736786, -118.0813581, 5,'https://en.wikipedia.org/wiki/Jasper,Canada'], 
['Banff', 51.1783629, -115.5707694, 6,'https://en.wikipedia.org/wiki/Banff'], 
['Lake Louise,Canada', 51.4253705, -116.1772552, 7,'https://en.wikipedia.org/wiki/Lake Louise,Canada'], 
['Calgary', 51.0486151, -114.0708459, 8,'https://en.wikipedia.org/wiki/Calgary'], 
['Canadian Rockies', 54.1521752, -120.1585339, 9,'https://en.wikipedia.org/wiki/Canadian Rockies'], 
['Niagara Falls', 43.0962143, -79.0377388, 10,'https://en.wikipedia.org/wiki/Niagara Falls'], 
['New York', 40.7127837, -74.0059413, 11,'https://en.wikipedia.org/wiki/New York'], 
['Rockerfeller Building', 40.7587402, -73.9786736, 12,'https://en.wikipedia.org/wiki/Rockerfeller Building'], 
['Statue Of Liberty', 40.6892494, -74.0445004, 13,'https://en.wikipedia.org/wiki/Statue Of Liberty'], 
['Empire State Building', 40.7484405, -73.9856644, 14,'https://en.wikipedia.org/wiki/Empire State Building'], 
['Washington D.C.', 38.9071923, -77.0368707, 15,'https://en.wikipedia.org/wiki/Washington D.C.'], 
['Utah', 39.3209801, -111.0937311, 16,'https://en.wikipedia.org/wiki/Utah'], 
['Arches National Park', 38.7330810, -109.5925139, 17,'https://en.wikipedia.org/wiki/Arches National Park'], 
['Las Vegas', 36.1699412, -115.1398296, 18,'https://en.wikipedia.org/wiki/Las Vegas'], 
['Bryce National Park', 37.5930377, -112.1870895, 19,'https://en.wikipedia.org/wiki/Bryce National Park'], 
['Zion national Park', 37.2982022, -113.0263005, 20,'https://en.wikipedia.org/wiki/Zion national Park'], 
['San Francisco', 37.7749295, -122.4194155, 21,'https://en.wikipedia.org/wiki/San Francisco'], 
['Alcatraz', 37.8269775, -122.4229555, 22,'https://en.wikipedia.org/wiki/Alcatraz'], 
['Yosemite', 37.8651011, -119.5383294, 23,'https://en.wikipedia.org/wiki/Yosemite'], 
['San Francisco', 37.7749295, -122.4194155, 24,'https://en.wikipedia.org/wiki/San Francisco'], 
['Sydney', -33.8688197, 151.2092955, 25,'https://en.wikipedia.org/wiki/Sydney'], 

    ]; 

    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
     zoom: 4, 
     center: new google.maps.LatLng(-33.92, 151.25), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

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

    var marker, i; 

    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     map: map 
     }); 

    google.maps.event.addListener(marker, 'click', (function (marker, i) { 
    return function(){ 
    clicked = true; 
    infowindow.setContent(locations[i][4]); 
    infowindow.open(map, marker); 
    setTimeout(function() { infowindow.close(); }, 8000); 

    } 
    })(marker, i)); 



    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) { 
     return function() { 
      infowindow.setContent(locations[i][0]); 
      infowindow.open(map, marker); 
     } 
     })(marker, i)); 

     google.maps.event.addListener(marker, 'mouseout', function() { 
     if (!clicked) { 
      infowindow.close(); 
     } 
     });  




var lineCoordinates = locations.map(function(val) { 
    return new google.maps.LatLng(val[1], val[2]); 
    }); 

    var tripPath = new google.maps.Polyline({ 
    path: lineCoordinates, 
    geodesic: true, 
    strokeColor: '#000', 
    strokeOpacity: 1.0, 
    strokeWeight: 2 
    }); 

    tripPath.setMap(map); 
} 

initialize(); 

次の私のリスト上の

"タブ付きの" 情報ウィンドウ

て写真をライトボックスタイプの窓で

オープン情報ウィンドウのリンク

関連する問題