title: Adding a clickable link to a Google Map marker
body: <p>I have a google map that pulls info from a database and populates it with markers, name, address, etc.  In the same database is a URL called "slug". I'd like to make the Name/Address popup for each marker be a clickable link taking you to "slug".</p>
  
  <p><a href="http://bio-medical.com/resources/map.html" rel="nofollow">Here's the map so far...</a></p>
  
  <p>And here's the code so far:</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
      &lt;title&gt;Google Maps AJAX + mySQL/PHP Example&lt;/title&gt;
      &lt;script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          //&lt;![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 &lt; 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 = "&lt;b&gt;" + first + "\xa0" + last + "&lt;/b&gt; &lt;br/&gt;" + line_1 + "&lt;br/&gt;" + (line_2 ? line_2 + "&lt;br/&gt;" : "") + (line_3 ? line_3 + "&lt;br/&gt;" : "") + 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() {}
  
          //]]&gt;
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onload="load()"&gt;
      &lt;div id="map" style="width: 100%; height: 100%"&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>