TP-Docs
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

Welcome to TinyPortal. Please login or sign up.

Members
  • Total Members: 3,963
  • Latest: BiZaJe
Stats
  • Total Posts: 195,917
  • Total Topics: 21,308
  • Online today: 884
  • Online ever: 8,223 (February 19, 2025, 04:35:35 AM)
Users Online
  • Users: 0
  • Guests: 435
  • Total: 435

Google Maps

Started by Wantonio, July 25, 2006, 01:40:21 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

JPDeni

#10
So that's all that's in the file? Nothing before or after the <markers> tags? And the file is named ???.xml. That shouldn't be too hard.

You would need four form fields, right? Latitude, longitude, text and URL.

Actually, it would be great if you could post your entire php article code. I could just build on that and put the form below the map.

hsdk

Hmm, i have a normal article with html, not php. (was wrong when i said php earlier) :)
This is my code, You need a API key of your own from google as mentiont earlier in the post. And there is ana example xml file at googles documentation page here: http://www.google.com/apis/maps/documentation/  look at "Using XML and Asynchronous HTTP with Maps"

My map page is here : http://www.hsdk.no/v2/smf/index.php?page=19 For some reason the page won`t show the map in IE, but i havent had the time to look at it yet. As mentiont my coding skills aren`t exactly... yeah.. you see :)

Hope you we could make this work :)


<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>HSDK OVERSIKTSKART - AV ABS</title>

  </head>
  <center><body onload="load()" onunload="GUnload()">
<div id="map" style="width: 600px; height: 600px"></div>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAQcPduNCN2ziibIsH7ilrzRSM3Liyn2kG4PRjyONz0sHd28JnNRTCMNPvqXmTB_0Afd7oaL3nHAITjg"
      type="text/javascript"></script>
    <script type="text/javascript">

    //<![CDATA[

   
var map = new GMap2(document.getElementById("map"));
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
map.addControl(new GLargeMapControl());

map.setCenter(new GLatLng(62.605349, 6.459274), 9);

// Download the data in data.xml and load it on the map. The format we
// expect is:
// <markers>
//   <marker lat="37.441" lng="-122.141"/>
//   <marker lat="37.322" lng="-121.213"/>
// </markers>
GDownloadUrl("http://www.hsdk.no/data.xml", function(data, responseCode) {
  var xml = GXml.parse(data);
  var markers = xml.documentElement.getElementsByTagName("marker");
  for (var i = 0; i < markers.length; i++) {
    var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                            parseFloat(markers[i].getAttribute("lng")));
    map.addOverlay(new GMarker(point));
  }
});

    //]]>
    </script>
  </body>
</html>



You need more info? :)

Andreas

JPDeni

I think I have it. Thanks. :)

A real problem that it won't work in IE. I've been trying to get it to work and it keeps saying that my API key doesn't match the website. Maybe that's an IE issue as well.

I'll play around with it a bit and see if I can get it to work.

With an html file, you can probably add the form and then have some sort of separate file to process it. I'll have to think about it a bit. :)

JPDeni

I think I'm going to have to defer to someone who knows more about javascript. Since the map uses javascript, it would probably be better to have it read the form and write the data, rather than trying to mix javascript and php.

hsdk

Okey, let`s bring on the javascript guys then. Where are they? :)

Could it be the div-tag thats screws up IE?

Andreas

JPDeni

I don't know what the problem is with IE. I was looking in their discussions and it seems that a lot of people can only get it to work with IE. I'm thinking with our particular situation it may be that IE doesn't like having multiple <html> and <body> tags. But it could be something else. The phase of the moon, or something. :)

It would be a fun thing to have, but the vast majority of my members use IE, so unless I can figure out how to get to work with IE, it wouldn't be a whole lot of use.

hsdk

I have seen it used on a another site, and it works throug IE there. link: http://www.dykkesiden.com/vrak/mapOverview.php
soooo, i don`t know, it must be somthing we "do" :)

Hope someone will fix this, my useres really likes this one :)

A

hsdk

Anyone want to do this one? :)

jessicac

Quote from: JPDeni on November 03, 2006, 03:47:41 PM
I think I have it. Thanks. :)

A real problem that it won't work in IE. I've been trying to get it to work and it keeps saying that my API key doesn't match the website. Maybe that's an IE issue as well.

I'll play around with it a bit and see if I can get it to work.

With an html file, you can probably add the form and then have some sort of separate file to process it. I'll have to think about it a bit. :)
That actually doesn't have anything to do with you. It has to do with the referrer. If the page you're testing is on a server (or just on your desktop), you will get this error message every time. It's to prevent extreme bandwidth consumption and to prevent others from using your API key. The best way to test would be to have hsdk setup a temp ftp login and folder for you to test off of or to have hsdk list your IP address as a referrer in hdsk's google API config.

jessicac

P.S. I'm not using xml. I'm never going to update my page so I didn't need it but here's the basics... You can view at http://www.sadisticpleasures.org/index.php?page=11


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Directions</title>
      <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjwyk52kPEnTpFXlVtZ7oVRQE5tjgmX7JmIEqaJcC3pqnIHB9kxTKqciiklBWq5BE_bEJU-7TGRPPYQ"
            type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
       function createMarker(point,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        return marker;
      }

      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(29.526337,-95.127961),13);
      var point = new GLatLng(29.527091,-95.126249);
      var marker = createMarker(point,'<div style="width:140px; text-align:center;"><b>20833 Gulf Fwy</b><br>Webster, TX<br>77598-6402, US</div>')
      map.addOverlay(marker);
     } else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }
  }
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
<table border=0 cellspacing=4 cellpadding=4>
<tr><td><img src="images/directions.jpg" align=right>The Rocky Horror Picture Show is performed by the Sadistic Pleasures Cast live every Saturday at midnight at the NASA Premiere 8 Cinema at I-45 and Nasa Road One in Webster, Texas. It's right beside the large first-run Cinemark theater, in the center behind Cavender's Boot City.

<p>From Galveston, exit Nasa Road One and watch for the theater on the right.

<p>From Houston, exit Nasa Road One and go under the overpass. Make an immediate right which will take you over the freeway. Follow Nasa Road One one block to Kobayashi Road and turn right (look for Chevron and Motel 6), then take a right Texas Avenue (a stop sign on a rather empty street that goes between both theaters.)

<p>Admission is $4.00. Audience members must be seventeen or older, unless accompanied by a parent or legal guardian.
</td></tr>
<tr><td align=center>
    <div id="map" style="overflow:hidden; width: 400px; height: 400px"></div>
</td></tr>
</table>

    <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
      However, it seems JavaScript is either disabled or not supported by your browser.
      To view these directions, enable JavaScript by changing your browser options, and then
      try again.
    </noscript>
  </body>
</html>

This website is proudly hosted on Crocweb Cloud Website Hosting.