Jump to content

How do you make a link in a infowindow on google maps?


Go to solution Solved by frank_solo,

Recommended Posts

Does anyone know how to make link? let's say one clicks on on a pin and an info window pops up. I would like the the title in the window to become a link to the listing itself. In other words to <a href="apt.php?=<? echo "" . $row['id'] . "";>echo "" . $row['title'] . ""</a>

This is what I have:

The XML file:

 

<?php
require("../config.php");

function parseToXML($htmlStr) 
{ 
$xmlStr=str_replace('<','<',$htmlStr); 
$xmlStr=str_replace('>','>',$xmlStr); 
$xmlStr=str_replace('"','"',$xmlStr); 
$xmlStr=str_replace("'",''',$xmlStr); 
$xmlStr=str_replace("&",'&',$xmlStr); 
return $xmlStr; 
} 

// Opens a connection to a mySQL server
$connection=mysql_connect (DB_HOST, DB_USER, DB_PASSWORD);
if (!$connection) {
  die('Not connected : ' . mysql_error());
}

// Set the active mySQL database
$db_selected = mysql_select_db(DB_NAME, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

// Select all the rows in the markers table
$query = "SELECT * FROM places WHERE unit='Residential' AND county='New Jersey'";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

// Start XML file, echo parent node
echo '<markers>';

// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
  // ADD TO XML DOCUMENT NODE
  echo '<marker ';
  echo 'title="' . $row['title'] . '" ';
  echo 'id="' . $row['id'] . '" ';
  echo 'lat="' . $row['lat'] . '" ';
  echo 'lng="' . $row['lng'] . '" ';
  echo 'space="' . $row['space'] . '" ';
  echo 'amount="$' . $row['amount'] . '" ';
  echo '/>';
}

// End XML file
echo '</markers>';

?>

The Map:

 

<script type="text/javascript">
    //<![CDATA[

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

    function load() {
      var map = new google.maps.Map(document.getElementById("map2"), {
        center: new google.maps.LatLng(40.9167, -74.1722),
        zoom: 11,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP file
      downloadUrl("commphpsqlajax_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("title");
          var address = markers[i].getAttribute("amount");
          var type = markers[i].getAttribute("space");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          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>
  • Solution

Ok so I need to first add the variable from the xml file onto to the map:

 

var id = markers[i].getAttribute("id");

Then like kicken said I had the html to include the tag like so:

 

var html = "<b>" + name + "</a></b> <br/>" + address +"<br /><a href='apt.php?id=" + id +"'>View Listing</a><br /><b></b>" ;

Thanks for the guidance.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.