谷歌地圖標記鏈接低於地圖

-1

我已經看到類似這樣的問題 - 但在答案中，他們正在使用JavaScript來生成一個鏈接列表，然後點擊「跳轉」在地圖上的標記，例如：http://www.geocodezip.com/v3_MW_example_map2.html 谷歌地圖標記鏈接低於地圖

我想要做的是創建我自己的鏈接，在地圖的同一頁上做同樣的事情，但我不想要生成列表，因爲我需要將鏈接放在頁面上的不同位置。

我的地圖代碼是：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Locations</title> 
    <meta charset="utf-8"> 
    <script src="js/jquery-1.7.min.js"></script> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script> 
<script type="text/javascript"> 
var infowindow = null; 
    $(document).ready(function() { initialize(); }); 

    function initialize() { 
     var centerMap = new google.maps.LatLng(-25.274398, 133.775136); 
     var myOptions = { 
      zoom: 4, 
      center: centerMap, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 

     var map = new google.maps.Map(document.getElementById("map"), myOptions); 

     var sites = [ 
      ['location 16', -37.814107 , 144.96328, 6, 'Description in info window','images/map_mobile.png'], 
      ['location 5', -37.911394 , 145.189584, 5, 'Description in info window','images/map_store.png'], 
      ['location 4', -33.963542 , 151.134273, 4, 'Description in info window','images/map_store.png'], 
      ['location 3', -33.923960 , 150.921158, 3, 'Description in info window','images/map_store.png'], 
      ['location 2', -34.065619 , 150.796491, 2, 'Description in info window','images/map_mobile.png'], 
      ['location 1', -33.752178 , 150.6910478, 1, 'Description in info window','images/map_mobile.png'] 
     ]; 

     var markers = setMarkers(map, sites); 

     infowindow = new google.maps.InfoWindow({ 
       content: "loading..." 
      }); 

     var mc = new MarkerClusterer(map, markers); 
    } 



    function setMarkers(map, sites) { 
     var markers = []; 

     for (var i = 0; i < sites.length; i++) { 
      var site = sites[i]; 
      var siteLatLng = new google.maps.LatLng(site[1], site[2]); 
      var marker = new google.maps.Marker({ 
       position: siteLatLng, 
       map: map, 
       title: site[0], 
       zIndex: site[3], 
       html: site[4], 
    //icon: site[5] // commented so we can see the original marker icon 
      }); 
      markers.push(marker); 

      google.maps.event.addListener(marker, "click", function() { 
       //alert(this.html); 
       infowindow.setContent(this.html); 
       infowindow.open(map, this); 
      }); 
     } 
     return markers; 
    } 
</script> 
</head> 
<body onload="initialize()"> 
<div id="map" style="width: 620px; height: 600px;"></div> 
</body> 
</html>

來源

2014-05-11 user3625223

這傢伙已經是非常接近的，只是不知道如何使它與我的代碼:(http://stackoverflow.com/questions/18333679/google-maps-open-info-window-after-click-on-a-link – user3625223

這裏是你的代碼示例

<html lang="en"> 
<head> 
    <title>Locations</title> 
    <meta charset="utf-8"> 
    <script src="js/jquery-1.7.min.js"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script> 
    <script type="text/javascript"> 
    var markers = []; 
    var infowindow = null; 
    //$(document).ready(function() { initialize(); }); 

    function initialize() { 
     var centerMap = new google.maps.LatLng(-25.274398, 133.775136); 
     var myOptions = { 
      zoom: 4, 
      center: centerMap, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 

     var map = new google.maps.Map(document.getElementById("map"), myOptions); 
     var marker, i; 
     var sites = [ 
      ['location 16', -37.814107 , 144.96328, 6, 'Description in info window','images/map_mobile.png'], 
      ['location 5', -37.911394 , 145.189584, 5, 'Description in info window','images/map_store.png'], 
      ['location 4', -33.963542 , 151.134273, 4, 'Description in info window','images/map_store.png'], 
      ['location 3', -33.923960 , 150.921158, 3, 'Description in info window','images/map_store.png'], 
      ['location 2', -34.065619 , 150.796491, 2, 'Description in info window','images/map_mobile.png'], 
      ['location 1', -33.752178 , 150.6910478, 1, 'Description in info window','images/map_mobile.png'] 
     ]; 

     var markers = setMarkers(map, sites); 

     infowindow = new google.maps.InfoWindow({ 
       content: "loading..." 
      }); 

     var mc = new MarkerClusterer(map, markers); 
    } 

    function setMarkers(map, sites) {  

     for (var i = 0; i < sites.length; i++) { 
      var site = sites[i]; 
      var siteLatLng = new google.maps.LatLng(site[1], site[2]); 
      var marker = new google.maps.Marker({ 
       position: siteLatLng, 
       map: map, 
       title: site[0], 
       zIndex: site[3], 
       html: site[4], 
      //icon: site[5] // commented so we can see the original marker icon 
      }); 
      markers.push(marker); 

      google.maps.event.addListener(marker, "click", function() { 
       //alert(this.html); 
       infowindow.setContent(this.html); 
       infowindow.open(map, this); 
      }); 
     } 
     return markers; 
    } 
    // The function to trigger the marker click, 'id' is the reference index to the 'markers' array. 
    function myClick(id){ 
     google.maps.event.trigger(markers[id], 'click'); 
    } 
</script> 
</head> 
<body onload="initialize()"> 
<div id="map" style="width: 620px; height: 600px;"></div> 
<a href="#" onclick="myClick(0);">Open Info Window</a> 
<a href="#" onclick="myClick(1);">Open Info Window2</a> 
<a href="#" onclick="myClick(2);">Open Info Window3</a> 
<a href="#" onclick="myClick(3);">Open Info Window4</a> 
<a href="#" onclick="myClick(4);">Open Info Window5</a> 
<a href="#" onclick="myClick(5);">Open Info Window6</a> 
</body> 
</html>

問候

來源

2014-05-12 05:56:38 user3627209

非常感謝.... – user3625223

谷歌地圖標記鏈接低於地圖

回答

相關問題