Hi!
Here is the code for a small Google-Maps-Block (javascript/html):
<!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 (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 (http://www.kulturwochenende.com/forum) but this site is under construction..
Pic: (https://www.tinyportal.net/proxy.php?request=http%3A%2F%2Fwww.janwerthmann.de%2Fimages_extern%2Fgoogle_maps_block.jpg&hash=edd8a76a7f624d09f14ddbf4b1aa5fc56c4c7e34)
nice one ill try using it later with my membermap mod :D
That's cool! A map in a small window like that.
For our site we use Frappr - http://www.frappr.com/avalanchestyle
thats pretty need.
Added to block code index under "G" as "Google map block"
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
Put it in a scriptbox instead.
Ahhh... works!
Huge thanks.
anyway to put this in an article?
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:
<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!
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.
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
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. :)
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.
Okey, let`s bring on the javascript guys then. Where are they? :)
Could it be the div-tag thats screws up IE?
Andreas
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.
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
Anyone want to do this one? :)
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.
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>
Quote from: jessicac on November 10, 2006, 08:36:13 AM
Quote from: JPDeni on November 03, 2006, 03:47:41 PM
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.
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.
I had picked up an API key from Google and put the code into a block on my site, using my key. I did finally get it to stop giving me that error message, just by getting another key (and another and another IIRC), but it still wouldn't show me the map. It worked when I viewed the page from Netscape and Firefox, but when I viewed it from IE, I just got blankness.
I'll get another key and try again, using your code.
ETA: So far, so good. Thank you. :) I can play around with doing some other stuff with it now to see if I can get it to do what hsdk wanted.
Have you guys run into http://www.frappr.com/ ? This might be an interesting twist..
I got the same 'operation aborted ' in EI error, dug a bit further, and at smf there is a 'fix' for this...I don't think anoyone will mind if I post it here...
in yoursite/sources file replace googlemap.php with this one attached..
worked like a charm. ;)
Quote from: JPDeni on November 10, 2006, 02:53:28 PM
ETA: So far, so good. Thank you. :) I can play around with doing some other stuff with it now to see if I can get it to do what hsdk wanted.
Any luck yet? :) Christmas Present for meee? :)
I couldn't get it to work. I'm sorry.
Anyone have this set up with some other options like it shows on "Google Maps API Documentation". Most of that was just way over my head. Thanks.
(and does anyone know how to find the global coordinates of a location?)
sorry to bump, but it's been a while.
I got the map to install fine but is there a way to make it start on the usa when i first load the page so I dont have to scroll and find it everytime. It currently loads in europe somewhere
Quote from: JCphotog on November 13, 2006, 08:03:40 PM
Have you guys run into http://www.frappr.com/ ? This might be an interesting twist..
That's what we use :up:
Quote from: tick on February 18, 2007, 03:32:19 AM
I got the map to install fine but is there a way to make it start on the usa when i first load the page so I dont have to scroll and find it everytime. It currently loads in europe somewhere
You have to go into the code and change the lat/long coordinates to the starting point you want.
Quote from: RoarinRow on February 18, 2007, 03:50:40 AM
Quote from: JCphotog on November 13, 2006, 08:03:40 PM
Have you guys run into http://www.frappr.com/ ? This might be an interesting twist..
That's what we use :up:
Hi Roarin, did you just copy the code from Frappr into a php article and activate it? If not, can you please give me an idea what I need to do to get the Frappr map to open in the main TP frame?
Thanks
Quote from: tick on February 18, 2007, 03:32:19 AM
I got the map to install fine but is there a way to make it start on the usa when i first load the page so I dont have to scroll and find it everytime. It currently loads in europe somewhere
Hi!
Okay, your posting is a long time ago, but I answer anyway.
Edit the coords and the zoom in this line: map.setCenter(new GLatLng(50.8,10.0), 5);
50.8 is the coordinate for the north-south-direction and 10.0 for the west-east-direction. 5 is the zoom-factor.
Greetz, Wan
P.S.: SOMEWHERE is Germany by the way ^^ What do you learn in school? :2funny:
Just thought I would post the code I use for an article.
I found this code from a link on www.mapki.com under faq sidebar section.
I modified it to make it work for me.
Demo (http://houstoncanine.com/index.php?page=6)
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://maps.google.com/maps?file=api&v=2&key=your-key" type="text/javascript"></script>
<style type="text/css">v\:* {behavior:url(#default#VML);}</style>
</head>
<body onload="_OnLoad();">
<table width="100%" border=0>
<tr>
<td width="32%" valign="top">
<div id="side_bar"style=
"MARGIN-TOP: 5px;
MARGIN-LEFT: 5px;
MARGIN-RIGHT: 5px;">
</div><br>
<div class="smalltext">
clicking the above links will activate the info window
</div><br>
<div class="titlebg" style=
"padding: 3px 3px 3px 3px;">
Common Park Rules
</div>
<div style=
"padding: 3px 3px 3px 3px;">
• Some info below the markers.<br><br>
</div>
</td>
<td width="68%" valign="top">
<div id="map" style=
"MARGIN-TOP: 5px;
MARGIN-LEFT: 5px;
MARGIN-RIGHT: 5px;
HEIGHT: 450px;">
</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 Google Maps, enable JavaScript by changing your browser options, and then
try again.
</noscript>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var i = 0;
var gmarkers = [];
// this variable will collect the html which will eventualkly be placed in the side_bar
var side_bar_html = "";
// A function to create the marker and set up the event window
function createMarker(point,name,html) {
// use a custom icon with letter A - Z
var letter = String.fromCharCode("A".charCodeAt(0) + i);
var myIcon = new GIcon(G_DEFAULT_ICON, "http://www.google.com/mapfiles/marker" + letter + ".png");
myIcon.printImage = "http://maps.google.com/mapfiles/marker"+letter+"ie.gif"
myIcon.mozPrintImage = "http://maps.google.com/mapfiles/marker"+letter+"ff.gif"
var marker = new GMarker(point, {icon:myIcon});
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
// save the info we need to use later for the side_bar
gmarkers[i] = marker;
// add a line to the side_bar html
side_bar_html += '<b>'+letter+':</b> <a href="javascript:myclick(' + i + ')">' + name + '</a><br>';
i++;
return marker;
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
GEvent.trigger(gmarkers[i], "click");
}
function _OnLoad() {
// create the map
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallZoomControl());
map.addControl(new GMapTypeControl());
// change coordinates to center map
map.setCenter(new GLatLng(29.759609,-95.369568), 9);
// This adds a marker to the map and link in info window
var point = new GLatLng(30.17752,-95.46101);
var marker = createMarker(point,"some-name-for-sidebar","<a href='some-link' target='_blank'><b>some-name</b></a><br>some-info")
map.addOverlay(marker);
// put the assembled side_bar_html contents into the side_bar div
document.getElementById("side_bar").innerHTML = side_bar_html;
}
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
//]]>
</script>
</body>
</html>
i'M trying to get this code snippet to work, although, what is the type of bloc to use?
I tried using HTML/BBC, SCRIPTBOX and nothing shows the map...?!?
I have this one in a scriptbox showing in my left coloumn. I want to make a bigger map, and because of this I want to show the block in the middle. Is it possible to make a new site to put this block into? How do I do? ???
Can this be used to display satellite imagery as opposed to road maps? In the google maps site you can select Satellite so wondering if there is a way of implementing that a display as no road maps are available for my country.
Thanks
Found the code for this in case anyone is interested:
After
map.setCenter(new GLatLng(0.0,0.0), 7);
Add
map.setMapType(G_SATELLITE_MAP);
This will bring up the satellite view instead of the default Street names etc.
Other variables are:
map.setMapType(G_HYBRID_MAP);
Which brings up a mix of the two, quite useful if you let users scroll across to other area's which maybe don't have street info.
Or if you want users to be able to control it themselves instead of map.setMapType use this command instead of it
map.addControl(new GMapTypeControl());
However I found the above does not display well in a 170px wide panel.
This guide is very useful for anyone wishing to read further:
Tutorial Creating Your First Map Read From Section 4 (http://code.google.com/support/bin/answer.py?answer=74725&topic=11364)
Regards,
Skip
m771401
i got the map tp work (with my code)
but how do i get it to allow people to mark their places?
Anyone get this to work.