I've looked around for a solution but haven't quite found what i'm looking for.Basically I've got a google Map with several markers generated from a mysql table and then converted into xml to create an individual marker for each address.I'd like to create an individual link that appears inside the infobox for each marker.
Currently when the marker is clicked the infobox just shows the address but no link.I have been able to create a link that appears in the infowindow but this is the same link for each marker. Where the link created must be to another php file with the address ID for example:\[code\]www.mysite.com/newpage.php?ID=address_ID_from_table\[/code\]Thanks in advance!Here is the current code: \[code\]<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> //<![CDATA[var customIcons = { Highfield: { icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png', shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' }, bar: { icon: 'http://labs.google.com/ridefinder/images/mm_20_green.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(50.929602,-1.392002), zoom: 14, mapTypeId: 'roadmap' }); var infoWindow = new google.maps.InfoWindow; // Change this depending on the name of your PHP file downloadUrl("phpsqlajax_genxml2.php", function(data) { var xml = data.responseXML; var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers.getAttribute("name"); var address = markers.getAttribute("address"); var type = markers.getAttribute("type"); var point = new google.maps.LatLng( parseFloat(markers.getAttribute("lat")), parseFloat(markers.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>\[/code\]
Currently when the marker is clicked the infobox just shows the address but no link.I have been able to create a link that appears in the infowindow but this is the same link for each marker. Where the link created must be to another php file with the address ID for example:\[code\]www.mysite.com/newpage.php?ID=address_ID_from_table\[/code\]Thanks in advance!Here is the current code: \[code\]<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> //<![CDATA[var customIcons = { Highfield: { icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png', shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' }, bar: { icon: 'http://labs.google.com/ridefinder/images/mm_20_green.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(50.929602,-1.392002), zoom: 14, mapTypeId: 'roadmap' }); var infoWindow = new google.maps.InfoWindow; // Change this depending on the name of your PHP file downloadUrl("phpsqlajax_genxml2.php", function(data) { var xml = data.responseXML; var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers.getAttribute("name"); var address = markers.getAttribute("address"); var type = markers.getAttribute("type"); var point = new google.maps.LatLng( parseFloat(markers.getAttribute("lat")), parseFloat(markers.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>\[/code\]