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

Recent

User

Welcome to TinyPortal. Please login or sign up.

June 05, 2023, 08:36:55 PM

Login with username, password and session length

Stats

Members
Stats
  • Total Posts: 194,367
  • Total Topics: 21,157
  • Online today: 110
  • Online ever: 3,540
  • (September 03, 2022, 01:38:54 AM)
Users Online
Users: 1
Guests: 66
Total: 67

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.

Print
Go Down Pages1 2 ... 4
User actions

Wantonio

July 25, 2006, 01:40:21 AM Last Edit: July 25, 2006, 02:53:39 AM by Wantonio
Hi!
Here is the code for a small Google-Maps-Block (javascript/html):

Code Select
<!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>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=HERE-YOUR-KEY"
            type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallZoomControl());
        map.setCenter(new GLatLng(50.8,10.0), 5);
      }
    }
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
  <div id="map" style="overflow:hidden; height: 280px"></div>
</html>

First you have to sign up with your URL at google.
Here is the link: http://www.google.com/apis/maps/signup.html
After that, you have to replace the part above with: "HERE-YOUR-KEY" with your own key...
That's all ;)

For your own controls look at the API on the google-maps sites.
Edit the coords and the zoom in this line: map.setCenter(new GLatLng(50.8,10.0), 5);

Have fun
Greetz Wan

//EDIT: If you want to see how this works in action have a look at www.kulturwochenende.com/forum but this site is under construction..

Pic:

akulion

#1
July 25, 2006, 01:44:18 AM
nice one ill try using it later with my membermap mod :D

RoarinRow

#2
July 25, 2006, 02:46:30 AM
That's cool! A map in a small window like that.

For our site we use Frappr - http://www.frappr.com/avalanchestyle

SMF 2.0 RC3
TP 1.0 beta 5-1
Wordpress 3.0

Max

#3
July 25, 2006, 05:28:26 AM

thats pretty need.

akulion

#4
July 26, 2006, 10:32:16 AM
Added to block code index under "G" as "Google map block"

crewzer

#5
September 01, 2006, 12:52:16 AM
Hi,

Looks great on your site but I have a silly question.
When I put your code into a block (html type) content area and display the block I get some of the text from the block. No map!

Do you put the code in a separate file and call that file from the block?
If so, what code do you use to call it?

Thanks,
crewzer

IchBin

#6
September 01, 2006, 01:32:14 AM
Put it in a scriptbox instead.

crewzer

#7
September 01, 2006, 03:04:15 AM
Ahhh... works!
Huge thanks.

jessicac

#8
October 24, 2006, 11:03:57 PM
anyway to put this in an article?

hsdk

#9
November 03, 2006, 02:30:17 PM
I have a google map in a php article, i also have  a data.xml wich the map reads markers from and shows them on the map.

Could someone with the right skills create a form witch sends new markers to the xml file. That way users could add markers to my map :)

The xml file looks like this:

Code Select

<markers>
 
<marker lat="65.605349" lng="9.459274"> Text / URL </marker>
   
<marker lat="67.605349" lng="6.459274"> Text / URL </marker>
   
<marker lat="69.605349" lng="8.459274"> Text / URL </marker>
   
<marker lat="61.605349" lng="7.459274"> Text / URL </marker>
   
</markers>


I have my map working in the article, and my markers showing up. But i would like this form below my article to adde more markers :)


hope someone will help!
Print
Go Up Pages1 2 ... 4
User actions