Member Avatar for loboman

April 13, 2008

I have a web-site that is a Google Map mash-up and I place my markers by listing them in the body right after the map loads (in a load function).

I convert my data from a spreadsheet to xml and then use a program to write the xml into a list that displays the information the way I want it. I do not insert the xml tags because I don’t want them in my html because I do not know how they would react, and I really don’t know where they would go once I pull the info out of the xml doc anyway. I insert the xml in with other text.

Right now I am cutting and pasting the data into my html but eventually I want to automate this. But I do not know how to “grab” the data since there are no tags or id’s. I think that it is in the tree somewhere but can anyone give me an idea where and how to identify this?

Typical lay-out in the html below. The code below “// add markers” is the code in which I am interested.

I hope this makes sense.

Thanks,

loboman

// ..... </head>

<body onload="load()"  >

// divs here

<script type="text/javascript">

function load() {
    if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(12.942,100.8888), 13);
    map.setMapType(G_NORMAL_MAP);
    map.addControl(new GLargeMapControl());

// add markers

var point = new GLatLng( 12.94675,100.88696);
var marker = createMarker(point,'Soi 1 Pattaya','soi','66');
map.addOverlay(marker);

var point = new GLatLng( 12.93307,100.88154);
var marker = createMarker(point,'Soi 10 Pattaya','soi','67');
map.addOverlay(marker);

var point = new GLatLng( 12.9317,100.88198);
var marker = createMarker(point,'Soi 11 Pattaya','soi','68');
map.addOverlay(marker);

//... etc.
Edited by mike_2000_17 because: Fixed formatting
  • 2 Contributors
  • 6 Replies
  • 118 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by ~s.o.s~
Member Avatar for ~s.o.s~

It is a bit fuzzy as to what you are trying to do here but as far as I can see, you need some way of automating the data which adds markers to the Javascript 'map' object on the fly by reading in data from some external XML file.

One way of doing this would be to dynamically write out Javascript using the server side language of your choice. Simply put; you read in the XML file using some SAX/DOM parser, run a loop which would dynamically write out the common three lines of javascript code with server side tags embedded in them so that once they are served to the client they contain the entire data you have in your XML/external file.

Member Avatar for loboman

S.O.S.,

Thank you for your response. I was afraid that my question might be a little fuzzy. I am at the stage where I know just enough about DOM to be dangerous.

I don’t want to up-date on the fly. I have done that with both json and xml feeds and I want to try something new.

What I want is to up-date more statically by every so often replacing in mass the section under the “// add marker”. I think that normally you would do this by using “getElementById()” or “getElementByTagName()” or by walking the node tree and getting or “grabbing” the element nodes and use something like “delete” and “new” to change them. . (I will eventually automate this process.)

My problem is that I don’t have the markers in a div or something else with a tag, so I don’t know how to find the nodeName.

Does this make anymore sense? Probably not but maybe a step in the right direction. I apologize for not knowing enough to ask my question more intelligently but I thank you and all for your help.

loboman

Member Avatar for loboman

April 14, 2008

Here is a little of what I think I understand. My “code” (as I am calling it which may not be the proper nomenclature), i.e. the markers, is in, document.html.body.script.text, where text is the whole load function.

Maybe that is as far as it can be isolated and to replace the “code” I have to replace the whole load function. I suppose I could do this, but is there a way to further isolate the “code” below the “// add markers”? Is there, or can I make, a child node containing the “code” within the function (text) without disrupting the flow of the load function?

Thanks again,

loboman

Member Avatar for ~s.o.s~

OK, let's look at things from a broader perspective. The 'replacing' which you keep on talking about is not the cause, it's the effect, an action done to produce certain result; which in our case being able to modify the contents of 'map' dynamically after the page has been loaded.

What kind of event would initiate this 'replace'? Would it be some background function which executes after fixed intervals of time or some function which is fired on a user initiated action (like a button click)?

The cod which you posted, below the //markers is nothing but adding / modifying the contents of the map variable. So, if you can effectively figure out a way of updating the 'map' after the page has completed loading, you have your solution. This I fear, depends a lot on how you are actually pulling in the data or making the external data available to Javascript. Assuming that your data is available to the program in a JSON string; you can iterate over its contents and update the contents of 'map' variable accordingly.

Member Avatar for loboman

S.O.S.,

Again thank you for your response and again I apologize for not making my question more clear.

The map works fine. If desired I can provide a link.

The situation is like this. As you are quite aware, there are several ways to supply the marker data to the map. It can be kept in SQL or in a spreadsheet on a server, which I have previously done, and the marker data is feed to the map dynamically as needed.

In this case I am not looking for a dynamic change of marker data.

In the experiment I am trying now, as you see, I have put the marker data directly into the body of the HTML.

Every so often, weeks, months, I up-date the marker data. In the first two cases (sql and ss) the new data is uploaded to the server. In this experiment I cut and paste the marker data into a new html file, upload the new file, replacing the old, and on we go.

I have written a program that takes the marker data from the original spreadsheet on which I store it and converts it to the marker data which you see in the “code”. Now I want to go one step further and have the program replace the marker data in the in the body of the HTML. This will not be done dynamically but every so often as needed.

That is why I want to “grab” the marker data specifically.

I’m sure many may ask why I want to do it this way but sufficient to say, it’s a learning experience.

Thanks again,

loboman

Member Avatar for ~s.o.s~

> In the experiment I am trying now, as you see, I have put the marker data directly into the
> body of the HTML.

You can definitely do it though I am pretty sure it won't be of any use as such since Javascript replaced that way won't be executed the way you are thinking it would. Plus it is craziness trying to do this client side when you can very well dynamically write out a Javascript. But since you are doing it for fun, you would be happy to know that you can grab hold of a <script> element the way you do it with normal elements by assigning it an ID.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv"Script-Content-Type" content="text/javascript">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Expires" content="0"> <!-- disable caching -->
    <title>Example</title>
    <script type="text/javascript">
    function showAll() {
      var txt = document.getElementById("targetScript");
      alert("script content: " + txt.text);
      alert("a: " + a);
    }
    function replace() {
      var oldScript = document.getElementById("targetScript");
      oldScript.text = "a = 100;";
    }
    </script>
    <script type="text/javascript" id="targetScript">
      a = 1; b = 2; c = 3;
    </script>
</head>
<body>
  <form id="frm" name="frm" action="#">
    <input type="button" value="Show All" onclick="showAll();">
    <br><br>
    <input type="button" value="Replace" onclick="replace();">
    <br><br>
    <div>Instructions: First click on 'Show All' and it will show you the 
    contents of the script. Then press 'Replace' to change the script
    contents and again press 'Show All'. Note that it still doesn't
    change the value of 'a'!
    </div>    
  </form>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.