Solved

Insert Coordinates from External File into Google Maps.

Posted on 2010-11-11
8
808 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 2

Author Comment

by:marietto2008
ID: 34122719
Yeah,I'm looking for someone that wants to help me writing the code.
0
 
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

Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

738 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