Mario Zio
asked on
Insert Coordinates from External File into Google Maps.
Hi everyone!
I seem to have a Javascript problem, probably due to sheer inexperience. I'm trying to feed specific coordinates into Google Maps javascript. The coordinates come from a specific file on my web server (coords.txt). The Javascript I have set up so far will read the coordinates file (coords.txt) and display it in text form within the HTML page. That's great (at least I know I don't have a file reading issue). I guess my question is: How do I define a javascript variable THAT Google Maps CAN USE from the contents of my coords.txt text file ? The vision is to dynamically save and load the map coordinates on the coords.txt file everytime that someone clicks on the map, and draws a line from a point to the next one,thus updating the map for web page visitors as soon as location updates become available. I attached the code to fix :
I seem to have a Javascript problem, probably due to sheer inexperience. I'm trying to feed specific coordinates into Google Maps javascript. The coordinates come from a specific file on my web server (coords.txt). The Javascript I have set up so far will read the coordinates file (coords.txt) and display it in text form within the HTML page. That's great (at least I know I don't have a file reading issue). I guess my question is: How do I define a javascript variable THAT Google Maps CAN USE from the contents of my coords.txt text file ? The vision is to dynamically save and load the map coordinates on the coords.txt file everytime that someone clicks on the map, and draws a line from a point to the next one,thus updating the map for web page visitors as soon as location updates become available. I attached the code to fix :
<script type="text/javascript">
function ajaxFunction()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert("Problem! Your browser does not support XMLHTTP or AJAX!");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
document.getElementById('coords').innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","coords.txt",true);
xmlhttp.send(null);
}
//<![CDATA[
var map;
var polyShape;
var polygonMode;
var polygonDepth = "20";
var polyPoints = [];
var marker;
var geocoder = null;
var fillColor = "#0000FF"; // blue fill
var lineColor = "#000000"; // black line
var opacity = .5;
var lineWeight = 4;
var kmlFillColor = "7dff0000"; // half-opaque blue fill
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(43.23920036180898, 43.75213623046875), 9);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.addMapType(G_PHYSICAL_MAP);
GEvent.addListener(map, 'click', mapClick);
geocoder = new GClientGeocoder();
}
}
// mapClick - Handles the event of a user clicking anywhere on the map
// Adds a new point to the map and draws either a new line from the last point
// or a new polygon section depending on the drawing mode.
function mapClick(marker, clickedPoint) {
// Push onto polypoints of existing polygon
polyPoints.push(clickedPoint);
drawCoordinates();
}
// Clear current Map
function clearMap(){
map.clearOverlays();
polyPoints = [];
document.getElementById("coords").value = "Click on the map to start drawing a line";
}
// Delete last Point
// This function removes the last point from the Polygon and redraws
// map.
function deleteLastPoint(){
map.removeOverlay(polyShape);
// pop last element of polypoint array
polyPoints.pop();
drawCoordinates();
}
// drawCoordinates
function drawCoordinates(){
//Re-create Polygon
polyShape = new GPolyline(polyPoints,lineColor,lineWeight,opacity);
map.clearOverlays();
// Grab last point of polyPoints to add marker
marker = new GMarker(polyPoints[polyPoints.length -1]);
map.addOverlay(marker);
map.addOverlay(polyShape);
}
</script>
</body>
</html>
ASKER
check here,this is my web site :
http://208.53.158.14/~youeswap/a2.html
what I really want to do is to save the coordinates of the points clicked by the visitors of my website into a txt file,so that the lines drawn by them remains impressed over the locations clicked.
http://208.53.158.14/~youeswap/a2.html
what I really want to do is to save the coordinates of the points clicked by the visitors of my website into a txt file,so that the lines drawn by them remains impressed over the locations clicked.
It would be possible to draw the lines and save them with a TXT file by figuring out the pixel position of the cursor on screen (you use javascript to do this). However there are two problems, if the person moves the map, which google map hand is designed to do (not draw lines), the line coordinates won't move with them, so everything will be off.
The other major problem I see here is that the google map interface does not preserve the STATE of anything. So when you come back to it, the state of the previous map session is lost. That is how it is designed. The only way I have seen to get back to a previous map is to save the LAT-LONG coordinates of the map VIEW, append that to the google maps string, and then you can come back to a CLEAN view of the map as it was before you did anything -- such as your original link to open this map.
So I don't see how you can do what you want to do -- restore map lines.
The other major problem I see here is that the google map interface does not preserve the STATE of anything. So when you come back to it, the state of the previous map session is lost. That is how it is designed. The only way I have seen to get back to a previous map is to save the LAT-LONG coordinates of the map VIEW, append that to the google maps string, and then you can come back to a CLEAN view of the map as it was before you did anything -- such as your original link to open this map.
So I don't see how you can do what you want to do -- restore map lines.
ASKER
Yeah,I'm looking for someone that wants to help me writing the code.
ASKER
Anyway for the first problem you said,if you check here :
http://208.53.158.14/~youeswap/a2.html
you will see that the hand moves the map and at the same time it moves the placeholder.
http://208.53.158.14/~youeswap/a2.html
you will see that the hand moves the map and at the same time it moves the placeholder.
OK I see that, so this is the biggest problem gone -- the placeholders do stay pinned to the map.
Did you notice that as you move the map inland, the est side is not filling in with new data, but it should.
Did you notice that as you move the map inland, the est side is not filling in with new data, but it should.
ASKER
It works good for me,can you make a screenshot and send me it so that I see exactly what happens ?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
var loc = "http://maps.google.com/maps?hl=en&tab=nl"
loc = loc + "this is your country string and state" ;
loc = loc + "these are your variables";
when you have composed the entire string, then you submit it.