Я работаю над вымышленным сайтом управления событиями. На этом сайте я получаю информацию из своей базы данных, используя XML для подачи значений lat и long на карту Google для создания различных маркеров по всему миру.
код, который создает маркеры:
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("../php/phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("eventName");
var series = markers[i].getAttribute("eventSeries");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("eventLat")),
parseFloat(markers[i].getAttribute("eventLong")));
var html = name + "<br>" + series + "<br>" + "test";
var marker = new google.maps.Marker({
map: map,
position: point
});
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);
}
Когда вы щелкаете по любому из маркеров, появляется небольшое «информационное окно» с указанием имени события и серии событий.
Есть ли способ добавить ссылку html внизу окна вместо test
? Я хотел сделать HTML-ссылку, сгенерированную с помощью php, примерно так:
<?php
$queryEvents = "SELECT * FROM events GROUP BY eventStart DESC";
$resultEvents = $mysqli->query($queryEvents);
while($rowEvents = $resultEvents->fetch_assoc()){
echo "<tr>";
echo "<td>{$rowEvents['eventName']}</td>";
echo "<td><a href=\"../php/viewEvent.php?eventID={$rowEvents['eventID']}\">View</a></t
d>";
echo "<td><a href=\"edit.php?eventID={$rowEvents['eventID']}\">Edit</a></td>";
echo "<td><a href=\"delete.php?eventID={$rowEvents['eventID']}\">Delete</a></td>";
echo "</tr>";
}
?>
Где бы это взять eventName
значение и используйте значение post его идентификатора для создания другой, внешней, php-страницы, которая отображает информацию о событии. Это возможно?
Для обычной, не такой захватывающей информационной панели вы можете использовать InfoWindow, как вы уже это делаете. Но чтобы оживить его с помощью HTML, лучше использовать уже доступный компонент InfoBox.
Он вставляется в ваш код так же просто, как InfoWindow. Дополнительная информация здесь: http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/docs/examples.html
<script src="[YOUR PATH]/infobox.js" type="text/javascript"></script>
<script>
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";
var myOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "url('tipbox.gif') no-repeat",
opacity: 0.75,
width: "280px"},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
var ib = new InfoBox(myOptions);
ib.open(theMap, marker);
</script>
Этот и другие варианты также обсуждаются в аналогичном вопросе здесь: https://stackoverflow.com/a/9257003/390421
может быть попытаться так
var html = name + "<br>" + series + "<br>" + "<a href="<?php echo "test.php?";?>"> TEST </a>";