Contribute  :  Support  :  Downloads  :  Forum  :  Links  :  Polls  :  Calendar  :  Directory  :  Advanced Search  
Geeklog The Ultimate Weblog System
Welcome to Geeklog
Friday, May 16 2008 @ 12:26 AM EDT
   

Making a google map to go along with your articles

GeeklogYou are blogging about your latest trip and you want everyone know where you actually went. You might want to link to google maps, but why make the people go away from your page if you can integrate Google maps on your page? This is how to do it:

1. Get a google maps key at http://www.google.com/apis/maps/signup.html
2. Create a static page and paste in the following code:

----------------------------
$code = "xxxxxxx";
$point_a = $_GET['point_a'];
$point_b = $_GET['point_b'];
$zoom = $_GET['zoom'];

?>

<script src="http://maps.google.com/maps?file=api&v=1&key=<;? echo $code; ?>" type="text/javascript"></script>

<div id="map" style="width:600px; height:400px"></div>
<script type="text/javascript">

//<![CDATA[

var map = new
GMap(document.getElementById("map"));
map.setMapType(G_SATELLITE_TYPE);
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(<? echo $point_a . ',' . $point_b .'), '. $zoom;?>);

//]]>
</script>

<?
--------------------

3. Set the code in the first line (xxxxx) to the code you got from google.
4. Set the page to execute PHP (not return)
5.save it with the ID "maps"
6.now, if you can include links in your articles such as: http://example.com/staticpages/index.php/maps?point_a=114.155&point_b=22.285&zoom=1

change the zoom (larger is further away) and the coordinates to the point you want. you might need to download google earth to find the coordinates of your desired location.

Thats it!

Story Options

Trackback

Trackback URL for this entry: http://www.geeklog.net/trackback.php/google-maps

Here's what others have to say about 'Making a google map to go along with your articles':

Making a google map to go along with your articles - Portal Blog
Tracked on Saturday, March 11 2006 @ 06:57 AM EST

Making a google map to go along with your articles | 8 comments | Create New Account
The following comments are owned by whomever posted them. This site is not responsible for what they say.
Making a google map to go along with your articles
Authored by: kreative on Thursday, March 09 2006 @ 05:48 AM EST
Making a google map to go along with your articles
Authored by: eg0master on Thursday, March 09 2006 @ 08:03 AM EST
If you check the source of the page I think it is obvious that there is a slight error in the code above. (which seams to be a geeklog bug adding the extra semi-colon between the < and ? just before echo $code).

it should be "<? echo" and not "<;? echo".

---
Long Live Space Moose
Making a google map to go along with your articles
Authored by: kreative on Friday, March 10 2006 @ 01:22 AM EST
Great, now it works...
I removed all ";" before the "<" (3 times) and now it's ok... ;)

P.S. If you are using the advanced FCK editor, disable javascript and edit the static
page with the standard editor, and remove the ; ....
Making a google map to go along with your articles
Authored by: ProsperoDK on Saturday, March 11 2006 @ 12:40 PM EST
I still can't get it to work.

I get a syntax error even though i deleted the 1 extra ; that was mentioned and added a ; after "var map = new".

Until i added the last ; i couldn't view the page, now i just get a syntax error.
Making a google map to go along with your articles
Authored by: Anonymous on Tuesday, March 14 2006 @ 09:49 PM EST
Can you say what syntax error you get?

---
tokyoahead.com
Making a google map to go along with your articles
Authored by: ProsperoDK on Thursday, March 16 2006 @ 04:46 PM EST
It just tells me that theres a syntax error in line 423.

Heres the html code when I view the source of the page.

<table border="0" width="100%" cellspacing="0" cellpadding="3">
<tr>
<td align="left" class="blockheader">&nbsp;Google Maps Test</td>
<td align="right" class="blockheader">&nbsp;</td>
</tr>
<tr>
<td colspan="2" class="blockcontent">
<script src="http://maps.google.com/maps?file=api&v=1&key=xxxxxx"; type="text/javascript"></script>

<div id="map" style="width:600px; height:400px"></div>
<script type="text/javascript">

//<![CDATA[

var map = new;
GMap(document.getElementById("map"));
map.setMapType(G_SATELLITE_TYPE);
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(114.155,22.285), 1);

//]]>
</script>

<p align="center"><br>Sidst Opdateret Saturday Mar 11, 2006 @18:34 <a href="http://www.reneboe.dk/staticpages/index.php/maps/print"><img src="http://www.reneboe.dk/layout/Smooth_Blue/images/print.gif"; alt="Se Printervenlig Version" title="Printable Format" border="0"></a><br><a href="http://www.reneboe.dk/admin/plugins/staticpages/index.php?mode=edit&amp;sp_id=maps">Rediger</a></p>; </td>
</tr>
</table>

And when i enter the microsoft script editor the cursor is at the start of the line with "var map = new;"

I have replaced my key with xxxxx

I can't figure out where the ssyntax error is.
Making a google map to go along with your articles
Authored by: ProsperoDK on Thursday, March 16 2006 @ 04:47 PM EST
I can see that theres an extra ; in the <script> line thats not in my source code.
Making a google map in staticpages
Authored by: tekko on Monday, May 08 2006 @ 11:14 PM EDT