通過點擊html鏈接顯示谷歌地圖上的infowindow

有沒有辦法從外部鏈接激活谷歌地圖上的信息窗口？下面是html和js代碼。通過點擊html鏈接顯示谷歌地圖上的infowindow

我想要一個簡單的外部鏈接來激活infowindow的標記。

任何幫助將衷心感謝

Sajja :)

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Map</title> 
<style> 
#map{ 
    width:640px; 
    height: 480px; 
    border:6px solid #6f5f5e; 
    margin:20px auto 30px auto; 
} 


</style> 
</head> 

<body> 


    <div class='container'> 

    <div id="map">&nbsp;</div> 

</div> 
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script> 

<script> 
var markers = [ 
    ['Marker 1', 13.988719,100.617909], 
    ['Marker 2.', 13.662811,100.43758], 
    ['Marker 3', 13.744961,100.535073], 
    ['Marker 4', 13.801981,100.613864], 
    ['Marker 5', 13.767507,100.644024], 
]; 

$(document).ready(function() { 
    var myOptions = { 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     mapTypeControl: false 
    }; 
    var map = new google.maps.Map(document.getElementById("map"),myOptions); 
    var image = new google.maps.MarkerImage('img/marker.png', 
     new google.maps.Size(65, 32), 
     new google.maps.Point(0,0), 
     new google.maps.Point(18, 42) 
    ); 
    var infowindow = new google.maps.InfoWindow(); 
    var marker, i; 
    var bounds = new google.maps.LatLngBounds(); 

    for (i = 0; i < markers.length; i++) { 
     var pos = new google.maps.LatLng(markers[i][1], markers[i][2]); 
     bounds.extend(pos); 
     marker = new google.maps.Marker({ 
      position: pos, 
      map: map, 
      icon: image 
     }); 

     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
      return function() { 
       infowindow.setContent(markers[i][0]); 
       infowindow.open(map, marker); 
      } 
     })(marker, i)); 
    } 
    map.fitBounds(bounds); 
}); 
</script> 
</body>

來源

2013-09-30 TinSajja

可以使用，

function infoOpen(i) 
{ 
    google.maps.event.trigger(markers[i],'click'); 
}

使用此功能元素的onclick

例如。

<a href="javascript:void(0);" onclick="infoOpen('1');">open it</a>

這裏我張貼的完整代碼

<html> 
    <head> 
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=en"></script> 
     <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script> 
     <script> 
      function infoOpen(i) 
      { 

       google.maps.event.trigger(gmarkers[i], 'click'); 
      } 
      var gmarkers = []; 
      var markers = []; 
      markers = [ 
       ['0', 'Marker 1', 13.988719, 100.617909], 
       ['1', 'Marker 2', 13.662811, 100.43758], 
       ['2', 'Marker 3', 13.744961, 100.535073], 
       ['3','Marker 4', 13.801981, 100.613864], 
       ['4', 'Marker 5', 13.767507, 100.644024]]; 

      $(document).ready(function() { 
       var myOptions = { 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
        mapTypeControl: false 
       }; 

       var map = new google.maps.Map(document.getElementById("map"), myOptions); 
       var image = new google.maps.MarkerImage('img/marker.png', 
       new google.maps.Size(65, 32), 
       new google.maps.Point(0, 0), 
       new google.maps.Point(18, 42)); 
       var infowindow = new google.maps.InfoWindow(); 
       var marker, i; 
       var bounds = new google.maps.LatLngBounds(); 

       for (i = 0; i < markers.length; i++) { 
        var pos = new google.maps.LatLng(markers[i][2], markers[i][3]); 
        var content = markers[i][1]; 
        bounds.extend(pos); 
        marker = new google.maps.Marker({ 
         position: pos, 
         map: map 
        }); 
        gmarkers.push(marker); 
        google.maps.event.addListener(marker, 'click', (function(marker, content) { 
         return function() { 
          infowindow.setContent(content); 
          infowindow.open(map, marker); 
         } 
        })(marker, content)); 
       } 


       map.fitBounds(bounds); 
      }); 
     </script> 
     <style> 
      body { 
       text-align: center 
      } 
      #map { 
       width:640px; 
       height: 480px; 
       border:6px solid #6f5f5e; 
       margin:20px auto 30px auto; 
      } 
     </style> 
    </head> 
    <body> 
     <div> 
      <a href="javascript:void(0);" onclick="infoOpen('0');">mark 1</a> <a href="javascript:void(0);" onclick="infoOpen('1');">mark 2</a> <a href="javascript:void(0);" onclick="infoOpen('2');">mark 3</a> <a href="javascript:void(0);" onclick="infoOpen('3');">mark 4</a> <a href="javascript:void(0);" onclick="infoOpen('4');">mark 5</a> 

      <div id="map">&nbsp;</div> 
     </div> 
    </body> 
</html>

我已經加入gmarkers.push(marker)

來源

2013-09-30 09:07:04

希望以上代碼將工作正常！ –

非常感謝你 – TinSajja

如果你沒有弄錯，請標記爲答案;） –

是的，它的作品！ http://jsfiddle.net/tinsajja/nXkXA/43/

好的，比方說，我在地圖上有很多標記。我如何管理製作人員，儘管我嘗試了，但它並沒有激活信息框。

由於我的編碼技能剪貼所以我搜索和代碼

$('#listdiv').append('<p><a href="javascript:show(' + i + ')" id="link' + i + '">' + locations[i][0] + '</a></p>');

我嘗試添加

<select><option><a href="javascript:show(' + i + ')"...

來到這個http://jsfiddle.net/tinsajja/ezSUF/67/

但結果產生5選擇框。請教我如何做到這一點。

謝謝， Sajja

來源

2013-10-01 14:17:34 TinSajja

通過點擊html鏈接顯示谷歌地圖上的infowindow

回答

相關問題