Menu
I have a big dilema. I want to load a .html file which contains javascript(google maps) code to render the div inside it.
maps.html look like this :
<script type="text/javascript">
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
var hash = getUrlVars();
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(hash['lat'],hash['lng']),
zoom: 14,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl("xmlout_carol.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length+1; i++) {
var name = markers[i].getAttribute("nume");
var address = markers[i].getAttribute("adresa");
var type = markers[i].getAttribute("id");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<font face='Tahoma' style='font-size:12px;'><div style='min-width:230px;'><b>" + name + "</b> <br/>" + address +"<a target='_top' href='../statii.php?id=" + type + "'><img style='float:right; border:0px; margin-left: 40px;' src='go.png' /></a><div/></font>";
var tip = markers[i].getAttribute("tip");
var icon = customIcons[tip] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
// shadow: 'shaddow.png'
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'mouseover', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
google.maps.event.addListener(map, 'click', function() {
infoWindow.close(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>
<body onload="load()">
<div id="map" style="width: 900px; height: 500px"></div>
</body>
this script render the map to the div.map
What i want to do is to load this .html into a div that is contained in another .php file like this :
$("div#insert_here").load("maps.html?lat=xxx&long=yyy");
It output the div contained in maps.html but with no map no java.
So the question is... How do I load a .html file using jquery in another .php file if the .html file already contains javascripts to output data to the div in .html file ???
Thanks a lot !
478
Instead of loading a file which has both HTML and JavaScript in it, can you load the JavaScript with the page initially, make an ajax call for the HTML, and call the JavaScript once the ajax request is complete? This will solve a lot of headaches with this issue.
128
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
