Добавление кликабельной ссылки на марку Google Map

-1

У меня есть карта google, которая извлекает информацию из базы данных и заполняет ее маркерами, именем, адресом и т. Д. В той же базе данных есть URL-адрес, называемый «slug». Я бы хотел, чтобы всплывающее окно «Имя/адрес» для каждого маркера было кликабельным, что привело вас к «slug».Добавление кликабельной ссылки на марку Google Map

Here's the map so far...

А вот код до сих пор:

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>Google Maps AJAX + mySQL/PHP Example</title> 
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
    <script type="text/javascript"> 
     //<![CDATA[ 

     var customIcons = { 
      restaurant: { 
       icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png', 
       shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
      }, 
      bar: { 
       icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png', 
       shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
      } 
     }; 

     function load() { 
      var map = new google.maps.Map(document.getElementById("map"), { 
       center: new google.maps.LatLng(47.6145, -122.3418), 
       zoom: 5, 
       mapTypeId: 'roadmap' 
      }); 

      var infoWindow = new google.maps.InfoWindow; 

      // Change this depending on the name of your PHP file 
      downloadUrl("phpsqlsearch_genxml.php", function(data) { 
       var xml = data.responseXML; 
       var markers = xml.documentElement.getElementsByTagName("marker"); 
       for (var i = 0; i < markers.length; i++) { 
        var first = markers[i].getAttribute("first"); 
        var last = markers[i].getAttribute("last"); 
        var line_1 = markers[i].getAttribute("line_1"); 
        var line_2 = markers[i].getAttribute("line_2"); 
        var line_3 = markers[i].getAttribute("line_3"); 
        var city = markers[i].getAttribute("city"); 
        var state = markers[i].getAttribute("state"); 
        var zipcode = markers[i].getAttribute("zipcode"); 
        var address = markers[i].getAttribute("address"); 
        var type = markers[i].getAttribute("type"); 
        var point = new google.maps.LatLng(
         parseFloat(markers[i].getAttribute("lat")), 
         parseFloat(markers[i].getAttribute("lng"))); 
        var html = "<b>" + first + "\xa0" + last + "</b> <br/>" + line_1 + "<br/>" + (line_2 ? line_2 + "<br/>" : "") + (line_3 ? line_3 + "<br/>" : "") + city + "\xa0" + "," + state + "\xa0" + zipcode; 
        console.log(html); 
        var icon = customIcons[type] || {}; 
        var marker = new google.maps.Marker({ 
         map: map, 
         position: point, 
         icon: icon.icon, 
         shadow: icon.shadow 
        }); 
        bindInfoWindow(marker, map, infoWindow, html); 
       } 
      }); 
     } 

     function bindInfoWindow(marker, map, infoWindow, html) { 
      google.maps.event.addListener(marker, 'click', function() { 
       infoWindow.setContent(html); 
       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); 
     } 

     function doNothing() {} 

     //]]> 
    </script> 
</head> 

<body onload="load()"> 
    <div id="map" style="width: 100%; height: 100%"></div> 
</body> 

</html>

источник

2015-06-30 Erik Onyski

После:

var html = "<b>" + first + "\xa0" + last + "</b> <br/>" + line_1 + "<br/>" + (line_2 ? line_2 + "<br/>" : "") + (line_3 ? line_3 + "<br/>" : "") + city + "\xa0" + "," + state + "\xa0" + zipcode;

добавить:

var slug = markers[i].getAttribute("slug"); 
html = "<a href='" + slug + "'>" + html + "</a>";

Это сделает весь текст внутри всплывающего окна кли ckable link

источник

2015-06-30 13:11:45

Мне пришлось добавить 'var' перед второй строкой, но это отлично работает. Спасибо, Яроманда! –

вам не нужно, это просто повторное использование уже объявленного var html –

Добавление кликабельной ссылки на марку Google Map

ответ

Смежные вопросы