Google Maps/SQL - добавление ссылок на поле в информационной панели

Question

У меня только что есть API Карт Google, все подключенные к базе данных mySQL, но у меня есть только одна вещь, которую я не смог понять, поскольку мой фон isn ' t действительно в javascript.

У меня есть рабочая страница поиска здесь:

http://www.quakerquest.org/meeting_place_search_map/

Так что, если вы будете искать в Лондон, он должен найти немало.

Все, что я хотел бы добавить, чтобы довести до выключения сделать имя места в информационной панели активной ссылку на страницу с информацией на сайте,

например http://www.quakerquest.org/meeting_place_details/index.php?VenueID=190

код API на странице выглядит следующим образом:

<script src="https://maps.googleapis.com/maps/api/js" 
      type="text/javascript"></script> 
<script type="text/javascript"> 
//<![CDATA[ 
var map; 
var markers = []; 
var infoWindow; 
var locationSelect; 

function load() { 
    map = new google.maps.Map(document.getElementById("map"), { 
    center: new google.maps.LatLng(53.3836, -1.4665), 
    zoom: 8, 
    mapTypeId: 'roadmap', 
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU} 
    }); 
    infoWindow = new google.maps.InfoWindow(); 

    locationSelect = document.getElementById("locationSelect"); 
    locationSelect.onchange = function() { 
    var markerNum = locationSelect.options[locationSelect.selectedIndex].value; 
    if (markerNum != "none"){ 
     google.maps.event.trigger(markers[markerNum], 'click'); 
    } 
    }; 
    } 

    function searchLocations() { 
var address = document.getElementById("addressInput").value; 
var geocoder = new google.maps.Geocoder(); 
geocoder.geocode({address: address}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
    searchLocationsNear(results[0].geometry.location); 
    } else { 
    alert(address + ' not found'); 
    } 
}); 
} 

function clearLocations() { 
infoWindow.close(); 
for (var i = 0; i < markers.length; i++) { 
    markers[i].setMap(null); 
} 
markers.length = 0; 

locationSelect.innerHTML = ""; 
var option = document.createElement("option"); 
option.value = "none"; 
option.innerHTML = "See all results:"; 
locationSelect.appendChild(option); 
} 

function searchLocationsNear(center) { 
clearLocations(); 

var radius = document.getElementById('radiusSelect').value; 
var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' +  center.lng() + '&radius=' + radius; 
downloadUrl(searchUrl, function(data) { 
    var xml = parseXml(data); 
    var markerNodes = xml.documentElement.getElementsByTagName("marker"); 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0; i < markerNodes.length; i++) { 
    var name = markerNodes[i].getAttribute("Venue"); 
    var address = markerNodes[i].getAttribute("address"); 
    var distance = parseFloat(markerNodes[i].getAttribute("distance")); 
    var latlng = new google.maps.LatLng(
      parseFloat(markerNodes[i].getAttribute("lat")), 
      parseFloat(markerNodes[i].getAttribute("lng"))); 

    createOption(name, distance, i); 
    createMarker(latlng, name, address); 
    bounds.extend(latlng); 
    } 
    map.fitBounds(bounds); 
    locationSelect.style.visibility = "visible"; 
    locationSelect.onchange = function() { 
    var markerNum = locationSelect.options[locationSelect.selectedIndex].value; 
    google.maps.event.trigger(markers[markerNum], 'click'); 
    }; 
    }); 
} 

function createMarker(latlng, name, address) { 
    var html = "<b>" + name + "</b> <br/>" + address; 
    var marker = new google.maps.Marker({ 
    map: map, 
    position: latlng 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, marker); 
    }); 
    markers.push(marker); 
} 

function createOption(name, distance, num) { 
    var option = document.createElement("option"); 
    option.value = num; 
    option.innerHTML = name + "(" + distance.toFixed(1) + ")"; 
    locationSelect.appendChild(option); 
} 

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.responseText, request.status); 
    } 
    }; 

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

function parseXml(str) { 
    if (window.ActiveXObject) { 
    var doc = new ActiveXObject('Microsoft.XMLDOM'); 
    doc.loadXML(str); 
    return doc; 
    } else if (window.DOMParser) { 
    return (new DOMParser).parseFromString(str, 'text/xml'); 
    } 
} 

function doNothing() {} 

//]]> 

Где

var name = markerNodes[i].getAttribute("Venue"); 

Место это строка, я хотел бы быть активная ссылка.

Если бы кто-нибудь мог помочь в этом, я бы очень признателен. Благодарю.

Answer 1

function createMarker(latlng, name, address, venueId, nameId) { 

    // this is what you change to update the infowindow 
    var html = "<a href='http://www.quakerquest.org/meeting_place_details/index.php?VenueID="+venueId+"&nameID="+nameId+"'>" + name + "</a>" 

    var marker = new google.maps.Marker({ 
    map: map, 
    position: latlng 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, marker); 
    }); 
    markers.push(marker); 
} 

Теперь я предполагаю, что вы хотите, чтобы ссылка быть динамичной и происходит из данных XML, так что вы должны добавить этот параметр в createMarker(), а затем динамически изменять HREF атрибута.