Solved

Insert Coordinates from External File into Google Maps.

Posted on 2010-11-11
8
801 Views
Last Modified: 2012-05-10
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 :


<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>

Open in new window

0
Comment
Question by:marietto2008
  • 4
  • 4
8 Comments
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 34117237
You don't have to define a specific variable -- google strings to the maps are just maps.google.com with all the parameters appended in the usual escape sequence for web strings.  then you just concatenate the pieces you want onto that string --

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.

0
 
LVL 2

Author Comment

by:marietto2008
ID: 34119251
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.
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 34122528
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.
0
 
LVL 2

Author Comment

by:marietto2008
ID: 34122719
Yeah,I'm looking for someone that wants to help me writing the code.
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 2

Author Comment

by:marietto2008
ID: 34123875
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.
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 34125482
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.
0
 
LVL 2

Author Comment

by:marietto2008
ID: 34126472
It works good for me,can you make a screenshot and send me it so that I see exactly what happens ?
0
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 500 total points
ID: 34128769
It eventually did, it just took a long time, like a minute.  Not sure if google was slow or your site.

The only way I can see to accomplish what you want is if you get the google LAT-LONG coordinates of the point they click on -- otherwise, I don't see any way to coordinate the screen position of the click with how far they moved the map.

Since google is keeping track of the click points, their MAP API must have a way to retrieve coordinates.

http://code.google.com/apis/maps/documentation/javascript/v2/reference.html
http://code.google.com/apis/maps/documentation/javascript/v2/overlays.html
http://code.google.com/apis/maps/documentation/javascript/v2/overlays.html

Those three should get you to where you can get and save the coordinates.
I would save it as a cookie on the user's HDD, as javascript works will with cookies.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This video teaches users how to migrate an existing Wordpress website to a new domain.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now