Help with Google Maps

[Ted]

Weird one...

Try changing & to & in the google API url.

[Ted]

I was wondering about that, but I just assumed that it wouldn't be a problem.  Apparently so...

At least it's working. 

[martin42]

I'm still having trouble with this!  How are you doing it?

My first idea was to stick the Javascript into the Content page. But using the HTML editor (TinyMCE) you lose all the line breaks, and the Javascript lines passed to Google's code just don't work.

The only workaround I have so far is to write a User-Defined Tag to print the required javascript from PHP, but that's really ugly:-

Code: Select all

print '<div id="map" style="width: 650px; height: 650px"></div>' ."\n";
print '<__script__ type="text/javascript">' ."\n";
print '//<![CDATA[' ."\n";
print 'var map = new GMap(document.getElementById("map"));' ."\n";
print 'map.addControl(new GLargeMapControl());' ."\n";
print 'map.centerAndZoom(new GPoint(-3.63, 52.37), 9);'."\n";
print 'var marker1 = new GMarker(new GPoint(-3.11216, 51.63512)); map.addOverlay(marker1);'."\n";
print 'GEvent.addListener(marker1, "click", function(){marker1.openInfoWindowHtml("<a href=\"http://www.mbwales.com/cwm_carn/index.htm\">Cwm Carn</a");});'."\n";
print '//]]>'."\n";
print '</__script>'."\n";

This is a really ugly solution!  Is there a cool way I'm overlooking?

[Ted]

Well, TinyMCE and javascript don't mix...

I propose 2 solutions.

1. Turn off the WYSIWYG.  Make an html blob.  Called it google_map.  Put in your code and wrap it in {literal}{/literal} tags.  Turn the WYSIWYG back on.  Insert {html_blob name='google_map'} into your template/page.
2. Do the user defined tag anyway.  However, for the lazy, you can do:

Code: Select all

echo '
<div>
<__script__>
etc
</div>
';

[martin42]

That's much nicer - thank you!  And thanks for such a quick reply!

Whilst on the subject of TinyMCE... Is there some way to make relative links stay relative?

e.g. when you have a document containing ........ The HREF seems to get changed to absolute format, i.e. http://www.example.com/index.php?thingy ... _bit.  Not a big problem, but it's a shame to make pages absolute, as then renaming the site or altering the naming scheme requires each page to be edited.  Same applies to links like , these seem to get rewritten to absolute form too.

I guess it might be nice to have an Option flag on Content pages, to specify when a page is raw HTML: not to be post-processed, and to be edited raw, without newlines being stripped out or anything.

Thanks for a great CMS!  I have it working sweetly on FreeBSD 4, with the Postgres DBMS and the tiny webserver Mathopd.

[Ted]

There isn't much you can do.  As son as the WYSIWYG loads the HTML, it's starts messing with it.  My best advice for everyone is to just turn it off unless you absolutely need it. 

Thanks!

[danielbone1]

I just tried to figure this one out and could use some guidance.

I created an html blob and am going to go that route.  I guess I am confused as to what exactly I should put in the blob. 

Does the entire javascript go into here.  Meaning that I would start it with the script that call the page by using my api key from google, or does that part of it go somewhere else.

Any help would be appreciated.

Dbone

[martin42]

Hi,

Actually the API hasn't changed for a while - still "v=1".

Important notes:

1. Test in Firefox first!  MSIE has some nasty timing bugs which will only confuse you. So get it working in Firefox first, then worry about IE.  My sample code (below) has a little hack in it to deal with that. Maybe the OnLoad thing they're suggesting now is an alternative fix for that: the problem seemed to be that IE messed up if the Javascript started running before the page was fully drawn.  (Note also that you probably don't want your web server to do Zip compression of CSS files, otherwise this will also mess up IE intermittently.)

2. You MUST use your own Google Maps API Key (one that is assigned to your web server's IP address).

3. Do some initial tests with a simple static web page (no CMSMS).  Once you use CMSMS, be sure to view the source code to make sure you see exactly what was sent, in case CMSMS doesn't quite do what you expect.  I'm not sure I entirely trust "View Source" in some web browsers, so you might want to use something like Burp Proxy to monitor the raw comms from web server to web browser.

Now, this is how I do things for my map from CMSMS.  Not pretty, but it works!  I'm making things more complicated by parsing a text file on the server-side to bang out some clickable markers onto the map. When you click on a marker, you get a little pop-up containing some info plus the odd clickable link.

1. I have a special version of my normal CMS site template.  I used "Layout/Templates" menu in CMSMS to copy my normal template and then edit it.  I've pasted these at the bottom of this post, so see below.

2. In the web page itself, the only page content is:

Code: Select all

{MapStart}{MapDataChallengeTrailsWales}{MapDataChallengeTrailsEngland}{MapDataChallengeTrailsScotland}{MapDataEnd}

to invoke my user-defined tags.  Also, under "Options"/"Head Tags" for that page, I have:

Code: Select all

<__script__ src="http://maps.google.com/maps?file=api&v=1&key=xxxx" type="text/javascript"></__script>

3. My user-defined tags say:
MapStart:

Code: Select all

echo '
<__script__ type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.centerAndZoom(new GPoint(-2.95, 54.5), 11);
';

MapDataChallengeTrailsWales

Code: Select all

$data = file("/usr/local/xxx/yyy/zzz/mapdata/Wales.txt");
$marker = 200;
foreach ($data as $line)
{
  $marker = $marker + 1;
  // Expect to read a line like: Coed y Brenin, Dolgellau::52.798329::-3.899949::www.mbwales.com/coed_y_brenin::www.streetmap.co.uk/blah::4::5
  // i.e. name::lat::long::url:mapurl::trailrating:facilitiesrating
  //        0      1     2     3   4            5             6
  // want to print:                                                      long       lat
  //             var marker1 = new GMarker(new GPoint(-3.11216, 51.63512)); 
  //             map.addOverlay(marker1);
  //             GEvent.addListener(marker1, "click", function() {
  //                  marker1.openInfoWindowHtml("<a href=\"http://www.mbwales.com/cwm_carn/\">Cwm Carn</a>"); });
  $fields = explode("::", $line);
  echo 'var marker'.$marker.' = new GMarker(new GPoint(';
  echo $fields[2];    // long
  echo ', ';
  echo $fields[1];    // lat
  echo ')); 
map.addOverlay(marker'.$marker.');
GEvent.addListener(marker'.$marker.', "click", function() {
marker'.$marker.'.openInfoWindowHtml("<a href=\"http://';
  echo htmlspecialchars($fields[3]);
  echo '\" target=\"_new\" >';
  echo $fields[0];
  echo '</a><br/><a href=\"http://';
  echo htmlspecialchars($fields[4]);
  echo '\" target=\"_new\" >OS map</a>';
  echo '<br/>Trails: ';
  for ( $i = 0; $i < $fields[5]; $i++) { echo '∗'  ;} 
  echo '    ';
  echo 'Facilities: ';
  for ( $i = 0; $i < $fields[6]; $i++) { echo '∗'  ;} 
  if (strcmp($fields[7],"Y") == 0) 
  { echo '<br/><a href=\"/index.php?page=Shop_Publications\">Leaflet available from IMBA-UK</a>'; };
  echo '"); });
  ';
};

Just to make the effect clear, this is the output that that bit of code produces at present:

Code: Select all

var marker201 = new GMarker(new GPoint(-3.703029, 51.642785));
map.addOverlay(marker201);
GEvent.addListener(marker201, "click", function() {
marker201.openInfoWindowHtml("<a href=\"http://www.mbwales.com/afan_forest\" target=\"_new\" >Afan Argoed, Swansea</a><br/><a href=\"http://www.streetmap.co.uk/streetmap.dll?G2M?X=282255&Y=195150&A=Y&Z=4\" target=\"_new\" >OS map</a><br/>Trails: ∗∗∗∗∗    Facilities: ∗∗∗∗<br/><a href=\"/index.php?page=Shop_Publications\">Leaflet available from IMBA-UK</a>"); });
  var marker202 = new GMarker(new GPoint(-4.060395, 51.984224));
map.addOverlay(marker202);
GEvent.addListener(marker202, "click", function() {
marker202.openInfoWindowHtml("<a href=\"http://www.forestry.gov.uk/website/ourwoods.nsf/LUWebDocsByKey/WalesCarmarthenshireNoForestBrechfaAbergorlechPicnicSiteAbergorlechRedMountainBikeTrail\" target=\"_new\" >Brechfa, Llandovery</a><br/><a href=\"http://www.streetmap.co.uk/streetmap.dll?G2M?X=258603&Y=233757&A=Y&Z=4\" target=\"_new\" >OS map</a><br/>Trails: ∗∗∗    Facilities: ∗"); });
   ...
   etc
   ...
  var marker210 = new GMarker(new GPoint(-3.885300, 52.414151));
map.addOverlay(marker210);
GEvent.addListener(marker210, "click", function() {
marker210.openInfoWindowHtml("<a href=\"http://www.mbwales.com/nant_y_arian\" target=\"_new\" >Nant yr Arian, Aberystwyth</a><br/><a href=\"http://www.streetmap.co.uk/streetmap.dll?G2M?X=271870&Y=281245&A=Y&Z=4\" target=\"_new\" >OS map</a><br/>Trails: ∗∗∗∗    Facilities: ∗∗∗<br/><a href=\"/index.php?page=Shop_Publications\">Leaflet available from IMBA-UK</a>"); });

MapDataEnd

Code: Select all

echo '
//]]>
</__script>
';

Here is the template Content (with a little of my site text removed for clarity):

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>IMBA UK - {title}</title>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Language" content="en-us" />
  {stylesheet}
</head>
</__body>
<div id="top"><img src="/uploads/images/WebHead.gif" alt="" /></div>
<div class="leftsidebar">  {cms_module module='cssmenu'} </div>

<div class="thebody">
       <!-- Nasty hack to workaround IE bug: moved "content" down to end of body -->
       <!-- so that page loads before Google's Javascript starts running -->
<br/>
<h4>MTB Challenge Trails</h4>
       <div id="map" style="height:700px"></div>
</div>

{content}
<__body>
</__html>

Here's the corresponding Stylesheet in the Template. Nothing clever, you just need to define the styles for any DIVs you use above.

Code: Select all

body {
  color: #000000;
  background-color:#FFFFFF;
  font-size: 80%;
  font-family: helvetica, verdana, arial, sans-serif;
  margin: 0; 
}

h1 {font-weight: bold; font-size: 1.80em;   } 
h2 {font-weight: bold; font-size: 1.60em;   } 
h3 {font-weight: bold; font-size: 1.40em;   } 
h4 {font-weight: bold; font-size: 1.20em;   } 
h5 {font-weight: bold; font-size: 1.00em;   } 

a:link     {color: #0000FF;}
a:visited {color: #0000FF;}
a:hover  {
  color: #FFFFFF; 
  background-color: #000077; 
  text-decoration: none;
}
a:active {
  color: #FF0000;
  background-color: #000077; 
  text-decoration: none;
}

#top
{
  padding: 0;
  border-bottom: 1px solid #000077;
  text-align: left;
  background-color:#C6DBEF;
}

div.leftsidebar { 
  width: 170px; 
  background-color: #6B9EBD;
  background-color: #C6DBEF;
  padding: 0px;
  color: #000077;
  z-index: 9999;

  position: absolute; 
  top: 110px; 
  left: 0px;
}

.breadcrumbs {
    font-size: 8pt; 
    margin-left: 174px; 
    padding: 2px 0 2px 9px; 
    color: #000077;
    text-transform: uppercase;
}

div.thebody { 
  padding: 0px; 
  z-index: 1 ; 

  position: absolute; 
  top: 110px; 
  left: 170px;
  width: 100%;
}
div.imbacontent {
  margin-left: 9px;
  margin-right: 12px;
  margin-bottom: 25px;
}

Hope that helps, and doesn't put you off!  Just start small with a static (non-CMSMS) page, and work up from there. The Google documentation site (and message forum) should help you a lot.

PS, I guess we should really be calling "GBrowserIsCompatible" and printing a message if people are using horrible old browsers that aren't compatible.

[danielbone1]

Thanks for the advice and I will be hard at work trying to make sense of all of this.


Dbone