Display a link in the info window of google maps marker

Question

I'm working on a fictional events management website. On this site, I get the information from my database using XML to feed the lat and long values into the google map in order to create various markers around the world.

code that creates the markers:

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);
    }

When you click any of the markers, a little 'infowindow' will pop up stating the event name and the event series.

Is there a way for me to add an html link at the bottom of the window instead of test? What I wanted to do is to make it an html link that's generated using php, similar to this:

<?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>";
}
?>

Where it would take the eventName value and use the post value of it's ID in order to generate another, external, php page which displays the event information. Is this possible?

score 0 · Accepted Answer · edited May 23 '17 at 12:00

For a normal, not-so-exciting info panel, you can use InfoWindow as you already are doing. But to spice it up with custom html it's better to use the already available InfoBox component instead.

It slots into your code as simple as InfoWindow. Additional information here: 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>

This and other options are also discussed in a similar question here: https://stackoverflow.com/a/9257003/390421

score 0 · Answer 2 · answered Feb 19 '16 at 09:48

0

may be try like this .

var html = name + "<br>" + series + "<br>" + "<a href="<?php echo "test.php?";?>"> TEST </a>";

answered Feb 19 '16 at 09:48

Amit Chauhan

682
7
22

Display a link in the info window of google maps marker

2 Answers2