Google Maps API：マーカーをクリックするとURLリンクを開く方法 - mySqlデータベースのマーカー

Question

Googleマップを作成し、名前と住所のあるレストランのマーカーを用意しました。マーカはmysqlデータベースから取得されています。

マーカーの名前の後ろにレストランのURLリンクを入れようとしています。マーカーをクリックすると、ブラウザがウェブサイトに開きます。

これは、マップのHTMLコードです：

function initMap() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
      center: new google.maps.LatLng(51.8980, -8.4737), 
      zoom: 16 
     }); 
     var infoWindow = new google.maps.InfoWindow; 

      downloadUrl('locator.php', function(data) { 
      var xml = data.responseXML; 
      var markers = xml.documentElement.getElementsByTagName('marker'); 
      Array.prototype.forEach.call(markers, function(markerElem) { 
       var id = markerElem.getAttribute('id'); 
       var name = markerElem.getAttribute('name'); 
       var address = markerElem.getAttribute('address'); 
       var type = markerElem.getAttribute('type'); 
       var point = new google.maps.LatLng(
        parseFloat(markerElem.getAttribute('lat')), 
        parseFloat(markerElem.getAttribute('lng'))); 

       var infowincontent = document.createElement('div'); 
       var strong = document.createElement('strong'); 
       strong.textContent = name 
       infowincontent.appendChild(strong); 
       infowincontent.appendChild(document.createElement('br')); 

       var icon = customLabel[type] || {}; 
       var marker = new google.maps.Marker({ 
       map: map, 
       position: point, 
       label: icon.label 
       }); 
       marker.addListener('click', function() { 
       infoWindow.setContent(infowincontent); 
       infoWindow.open(map, marker); 
       }); 
      }); 
      }); 
     } 


     function downloadUrl(url, callback) { 
     var request = window.ActiveXObject ? 
      new ActiveXObject('Microsoft.XMLHTTP') : 
      new XMLHttpRequest; 

     request.onreadystatechange = function() { 
      if (request.readyState == 4) { 
      request.onreadystatechange = doNothing; 
      callback(request, request.status); 
      } 
     }; 

     request.open('GET', url, true); 
     request.send(null); 
     } 

私は、データベースへのリンク変数を追加し、それがこのコードを使用して、マーカー上に表示するために取得しようとしているが、それは動作しませんでした。とにかく私はこれを行うことができますか？

Answer 1

あなたのAJAXリクエストの回答にurlという値があるとします。ただ、各マーカーのプロパティとしてそれを追加し、そのURLにリダイレクトするためにクリックイベントハンドラを修正：あなたは情報ウィンドウのURLを取得しているところ

downloadUrl('locator.php', function(data) { 
    var xml = data.responseXML; 
    var markers = xml.documentElement.getElementsByTagName('marker'); 
    Array.prototype.forEach.call(markers, function(markerElem) { 
     var type = markerElem.getAttribute('type'); 
     var point = new google.maps.LatLng(
      parseFloat(markerElem.getAttribute('lat')), 
      parseFloat(markerElem.getAttribute('lng'))); 


     var icon = customLabel[type] || {}; 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     label: icon.label, 
     url: markerElem.getAttribute('url'); 
     }); 
     marker.addListener('click', function() { 
     window.location.href = this.url; 
     }); 
    }); 
}); 

Answer 2

また、私は表示されません。試してみてください：

var url = putYourUrlHereSomehow; 
var urlLink = document.createElement("a"); 
urlLink.setAttribute('href', url);  
var t = document.createTextNode(url);  
urlLink.appendChild(t);         
infowincontent.appendChild(urlLink); 

を。これは、クリック可能なリンクを作成して、それを設定します。

marker.addListener('click', function() { 
       infoWindow.setContent(infowincontent); 
       infoWindow.open(map, marker); 
       });