I'm completely new to both javascript and the googlemaps api but have had some great help on here the past few days and progressed my website a lot (thanks!). Now, I have a new problem. What I want to do, is load a set of markers from a database to a map, and then allow the user to input values into a form to filter the markers (For example, putting minimum and maximum length fields).
Here's my code, I hope it's understandable:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
var icons = {
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("map"), {
center: new google.maps.LatLng(51.5100, 0.0000),
zoom: 10,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
//min and max ride lengths sent from form
var minlength = document.getElementById("minlength").value;
var maxlength = document.getElementById("maxlength").value;
// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var length = markers[i].getAttribute("length");
if (minlength < length && length < maxlength) {
var date = markers[i].getAttribute("date");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>Date: " + date + "</b> <br/>Length: " + length;
var icon = icons;
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>
</head>
<link rel="stylesheet" type="text/css" href="style.css" />
<body onload="load()">
<div id="container">
<div id="maincontent">
<form name="findride">
Min length: <input type="number" id="minlength">(miles)<br>
Max length: <input type="number" id="maxlength">(miles)<br>
<input type="button" value="Update" onClick="load()"/>
<div id="map"></div>
</div>
</div>
The problem I am having, is that the map does not display the points before the user fills in the field and updates (I tried to set some initial maxlength and minlength values, but that didnt work either). After the user enters this data, the points are displayed, but the map keeps re-centering - I would prefer it to stay in the same position and just have the markers change.
Well, maybe this is a bit out of my reach but if it can be done simply, I would really appreciate the help.
Changing your HTML to this :
Min length: <input type="number" id="minlength" value="5">(miles)<br>
Max length: <input type="number" id="maxlength" value="5">(miles)<br>
I have added value="5" to both inputs this means that when the script runs on load it should add some markers - you may need to change the number 5 to a more suitable value
Should fix the markers on startup issue.
And by default the map doesnt centre when adding a marker - see this simple example I add a marker at the centre point on load and then add another maker 3 seconds later - the map doesnt centre ....
Related
I have this code below which draws a line on a google maps from co-ordinates from an XML file.
However I want it to show the first co-ordinate and the last coordinate with a place marker as well. I managed to do this without drawing the line by following the steps here:
https://developers.google.com/maps/articles/phpsqlajax_v3?csw=1
but can't seem to be able to integrate the 2. i.e Draw the line and have place markers at the start and finish.
I'm sure its just a tiny bit of code I have to add too the code I already have below but I'm wrecking my train trying to work it out. Any help would be greatly appreciated.
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>PHP/MySQL & Google Maps Example</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
}
};
function load() {
var point;
var flightPlanCoordinates=new Array();
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(50.431, -3.202),
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
});
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
flightPlanCoordinates[i]=point;
}
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
});
}
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>
</head>
<body onload="load()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
In the code that you posted above, you are never adding your markers to the map, which is done with the following code:
var marker = new google.maps.Marker({
map: map, //The Map Object
position: point //The location of the Marker
});
You would want to put this statement into your for loop as you iterate through the GPS points, and if it is the first iteration or the last iteration through the loop, than add your marker. You can than draw your polyline after the loop like you are doing in your posted example.
Actually I working on a website where user can add his business. And I want to give him a functionality to add any location on a map. As he saves his business details along with that map details should go to database so that after posting his business on website it should show that location on a map. In short, I want to allow the user to add his location on a map and on a website for that specific user map should show his location on a map.
As I am new to all this I am getting confused how to do this. So please help me out. I searched for it on google but I am not getting any help for my problem.
Thanks in advance....
Here is my tried code:
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-33.8688, 151.2195),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var input = /** #type {HTMLInputElement} */(document.getElementById('searchTextField'));
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map
});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
infowindow.close();
marker.setVisible(false);
input.className = '';
var place = autocomplete.getPlace();
if (!place.geometry) {
// Inform the user that the place was not found and return.
input.className = 'notfound';
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
marker.setIcon(/** #type {google.maps.Icon} */({
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(35, 35)
}));
marker.setPosition(place.geometry.location);
marker.setVisible(true);
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
var place = autocomplete.getPlace();
document.getElementById('city2').value = place.name;
document.getElementById('cityLat').value = place.geometry.location.lat();
document.getElementById('cityLng').value = place.geometry.location.lng();
var latitude = place.geometry.location.lat();
var longitude = place.geometry.location.lng();
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
infowindow.open(map, marker);
});
// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
function setupClickListener(id, types) {
var radioButton = document.getElementById(id);
google.maps.event.addDomListener(radioButton, 'click', function() {
autocomplete.setTypes(types);
});
}
setupClickListener('changetype-all', []);
setupClickListener('changetype-establishment', ['establishment']);
setupClickListener('changetype-geocode', ['geocode']);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#map-canvas, #map_canvas {
height: 400px;
width: 900px;
}
#media print {
#map-canvas, #map_canvas {
height: 400px;
width: 900px;
}
}
</style>
</head>
<body>
<?php
/*
* Smarty plugin
* -------------------------------------------------------------
* File: function.map.php
* Type: map
* Name: Map
* Purpose: Accept the keyword & find it on a map.
* -------------------------------------------------------------
*/
function smarty_function_map($params, &$smarty)
{
?>
<div id="panel">
<label>Location/Area*</label><input id="searchTextField" type="text" size="50" placeholder="Enter Location/Area">
<input type="text" id="city2" name="city2" />
<input type="text" id="cityLat" name="cityLat" />
<input type="text" id="cityLng" name="cityLng" />
</div>
<div id="map-canvas"></div>
<?php
}
?>
</body>
</html>
To allow users to add a marker to the map by clicking on it, you'll need to setup an event listener that will listen for any clicks on the map. Example:
var marker;
google.maps.event.addListener(map, 'click', function(event) {
if ( marker ) {
marker.setPosition(event.latLng);
} else {
marker = new google.maps.Marker({
position: event.latLng,
map: map,
draggable:true
});
}
});
You'll also want to enable the user to drag the marker after they've plotted it. You can do this by setting the marker to draggable (I did this in the above example). You'll also need to listen for any changes by attaching an event listener to the marker in question:
google.maps.event.addListener(marker, 'dragend', function(){
//Do something because marker has been dragged somewhere...
});
Finally, every time the map is clicked or a marker is dragged, you'll need to save the resulting latitude and longitude values in a hidden field(s) so that you can save the position in your database.
Hey again fine peoples!
I'll start at the top, with my XML file! I have a XML layed out like this:
<?xml version="1.0" encoding="UTF-8"?>
<markers>
<watersource>
<marker name="Large private dam - Plenty of water. Access from whatever Rd." lat="-35.844630" lng="146.313416" type="1"/>
</watersource>
<watersource>
<marker name="Small water tank with fire fighting fittings - Plenty of water. Access from whatever Rd." lat="-35.844630" lng="146.313416" type="1"/>
</watersource>
</markers>
Then I have php file like this to read the XML and display the markers on google maps (irrelevant stuff stripped out):
<?php
{
?>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript">
var infowindow;
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-37.855677, 145.316076);
var myOptions = {
zoom: 13,
center: myLatlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
downloadUrl("watersourcedata.xml", function(data) {
var markers = data.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(markers[i].getAttribute("name"), latlng);
}
});
}
var image = 'images/watersource.png';
function createMarker(name, latlng) {
var marker = new google.maps.Marker({position: latlng, map: map, icon: image});
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: name});
infowindow.open(map, marker);
});
return marker;
}
</script>
</head>
<body onload="initialize()">
<FONT SIZE="2">NOTE: Water Source Map Is Under Construction.<BR>
This map once completed will allow brigades to make and maintain a map of major water sources like dams, wells, tanks ect. in their local areas.<BR>
<BR>
Watersource Legend:<BR>
A creek, dam, river, pond ect.(drafting needed) = <img src='images/watersource.png'> <BR>
A water tank, pump ect (drafting NOT needed) = <img src='images/waterwellpump.png'>
<BR>
</FONT>
<div id="map_canvas" style="width:950px; height:450px;"></div>
<?
}
?>
Now, that works all fine however in the XML i have a type. Type 1 (watersource.png) and Type 2 (waterwellpump.png). What I need to do is if it's type 1 in the XML display map marker image 1.. Type 2, marker image 2.. I'm kinda new to this XML caper and am a little lost!! If anyone could point me in the right direction I would be most grateful!
Thanks!
When you are sending the information to create marker, send the image type like this
createMarker(markers[i].getAttribute("name"), latlng, markers[i].getAttribute("type"));
In your createMarker function change it to decide which image to select.
function createMarker(name, latlng, type) {
if(type == 1)
image = 'images/watersource.png';
else
image = 'images/waterwellpump.png';
var marker = new google.maps.Marker({position: latlng, map: map, icon: image});
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: name});
infowindow.open(map, marker);
});
return marker;
}
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 11 years ago.
I am trying to build a script that pulls in data from a database using
php/mysql. And I want to create a sidebar with the locations in
my database. Kind of like the example in the link underneath
http://www.geocodezip.com/v3_MW_example_map15c.html
I am able to pull in data and display the locations on my map just
fine ... but the sidebar is not displaying any of my markers I am pretty sure there is a problem with the part of my code that creates the markers.. i'm new to javascript though so could be wrong though. That part of the code can be found on line 36 ... starts off something like
function createMarker(latlng, name, html) {
Here's a link to my script
http://onlineworkplace.info/googlemaps/testing.php
And here is the actual script.
<script type="text/javascript">
var customIcons = {
c: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
u: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
// this variable will collect the html which will eventually be placed in the select
var select_html = "";
// arrays to hold copies of the markers
// because the function closure trick doesnt work there
var gmarkers = [];
// global "map" variable
var map = null;
// A function to create the marker and set up the event window function i am pretty sure something is not right here
function createMarker(latlng, name, html) {
var ContentString = html;
var markers = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(ContentString);
infowindow.open(map,marker);
});
// ======= Add the entry to the select box =====
select_html += '<option> ' + name + '<\/option>';
// ==========================================================
// save the info we need to use later
gmarkers.push(markers);
return markers;
}
// ======= This function handles selections from the select box ====
// === If the dummy entry is selected, the info window is closed ==
function handleSelected(opt) {
var i = opt.selectedIndex - 1;
if (i > -1) {
google.maps.event.trigger(gmarkers[i],"click");
}
else {
infowindow.close();
}
}
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(29.760, -95.387),
zoom: 10,
mapTypeId: 'hybrid'
});
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("skatespots");
// ==== first part of the select box ===
select_html = '<select onChange="handleSelected(this)">' +
'<option selected> - Select a location - <\/option>';
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var confirmed = markers[i].getAttribute("confirmed");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b>";
var icon = customIcons[confirmed] || {};
// i think the varmarker bit is not right not here not sure though
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
// ===== final part of the select box =====
select_html += '<\/select>';
document.getElementById("selection").innerHTML = select_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() {}
// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/
// http://econym.org.uk/gmap/
// from the v2 tutorial page at:
// http://econym.org.uk/gmap/basic3.htm
Any help or maybe hints as to what is going wrong would be appreciated
Thanks
This answer makes the assumption that by sidebar you mean the select combo box
The original version called
function createMarker(latlng, name, html)
which adds the option to the select box.
You are no longer calling createMarker, but are instead calling
function bindInfoWindow(marker, map, infoWindow, html)
which only adds the 'click' listener, but doesn't do anything else (like adding the option to the select_html variable).
You could just modify your loop:
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var confirmed = markers[i].getAttribute("confirmed");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b>";
var icon = customIcons[confirmed] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
// I have been added so I populate the select combo box.
select_html += '<option> ' + name + '<\/option>';
}
First of all you have inconsistency in createMarker() - first it's 'markers':
var markers = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5 // btw do you really need this??
});
then 'marker':
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(ContentString);
infowindow.open(map,marker);
});
Then, you redeclare your map variable in load() function's scope:
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(29.760, -95.387),
zoom: 10,
mapTypeId: 'hybrid'
}); // creates another variable in local scope
// instead use global variable, meaning you don't redeclare it (don't use 'var'):
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(29.760, -95.387),
zoom: 10,
mapTypeId: 'hybrid'
}); // creates another variable in local scope
Next: you again use inconsistent variables for info window:
var infoWindow = new google.maps.InfoWindow; // btw this one should be global like map
// and elsewhere:
function handleSelected(opt) {
var i = opt.selectedIndex - 1;
if (i > -1) {
google.maps.event.trigger(gmarkers[i],"click");
}
else {
infowindow.close();
}
}
And finally you loop markers got with AJAX and create markers in place instead of using createMarker() function, so replace this:
// i think the varmarker bit is not right not here not sure though
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
with:
createMarker(point, name, html, icon);
and forge createMarker definition as you wish to set icon:
function createMarker(latlng, name, html, icon) {
var ContentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5,
icon: icon.icon,
shadow: icon.shadow
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(ContentString);
infowindow.open(map,marker);
});
// ======= Add the entry to the select box =====
select_html += '<option> ' + name + '</option>';
// ==========================================================
// save the info we need to use later
gmarkers.push(marker);
return marker;
}
Also declare select_html as global variable.
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 !
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.
As the others said, load JS particularly, or do the eval() function ;).
That parses the JS and makes it possible to be executed initially.
I dont use load and get much it almost always seems better to use $.ajax or $.post (more flexibility, I also suggest calling json and using the dataType:"json". Again more flexible).
Use callbacks after success to run the javascript you need once the ajaxed html is loaded into the page. You call use beforeSend to load script you need (although unless there is a good reason just add those scripts to the page along with everything else (more robust/cacheable)).
If google_statii.js needs dynamic variables one way would be use hidden inputs on the page with values populated server side and then call them within the script.
ie. var x = $("input#myHiddenVariable");