Help with Google Maps

502 Posts

ajayre Reply #1, 18 years ago

I’m unsure how to integrate google maps. I want to use the PHP class described here:

http://www.phpinsider.com/php/code/GoogleMapAPI

Here is a simple static test web page that I have working:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o$
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<title>Maptest</title>
<?
require('GoogleMapAPI.class.php');

$map = new GoogleMapAPI();
$map->setAPIKey($apikey);
$map->setCenterCoords(-0.435, 53.841);
$map->setZoomLevel(13);

$map->printHeaderJS();
$map->printMapJS();

?>
<style type="text/css">
  v\:* {
    behavior:url(#default#VML);
  }
</style>
</head><body onload="onLoad()">
<p>Map</p>

<? $map->printMap(); ?>

</body></html>

I’m unsure how to split this up into snippets. How can I have a snippet for the header and one for the content that both use the same $map for example? Also I think that the printMap function echos javascript rather than returning it in a variable.

If there is a better way than using this API then I am willing to consider anything. Note that I want to pull data from the database and create markers dynamically, so I really need PHP controlling it. Thanks!

Andy

7,075 Posts

davidm Reply #2, 18 years ago

I think what you’re looking for already exist :
http://modxcms.com/forums/index.php/topic,2709.msg18758.html#msg18758

:)

.: COO - Commerce Guys - Community Driven Innovation :.

MODx est l'outil id

502 Posts

ajayre Reply #3, 18 years ago

David,

Google sitemaps are for submitting your site to Google’s index. Google maps are for displaying interactive, multi-layered maps on your web site. Thanks for replying though. Hopefully I can take advantage of this PHP API. Using a module perhaps?

Andy

MODX Staff
10,725 Posts

opengeek Reply #4, 18 years ago

Lots of possibilities here, one snippet should be fine; just save the stuff you want to output to different places in your templates to placeholders; then just stick the appropriate placeholder tags into your template, content, and/or template variables as appropriate for your chosen template/layout (i.e. might have a head TV to put the JS and style placeholders in, and then the map output placeholder goes into the [*content*]).

There are lot’s of ways to do it, just depends on how you prefer to handle it. BTW, we used the Yahoo! Maps AJAX API (see http://modxcms.com/forums/index.php/topic,3251.0.html) to build this map with custom markers...

http://marquisliving.com/austin-univeristy-texas-ut-tx-apartments.html

using Javascript and a single snippet. Each location is a page with details stored in TV’s. Then the map page simply goes through the docs, and builds JSON representation of the objects for the Javascript API from Yahoo! to read, and to be used to build the navigation menu of the markers. Similar situation, though I imagine this will be much easier being all in PHP.

Hope that helps you get started and let me know if you have some specific questions implementing it.

Jason Coward
Chief Architect @ MODX
http://www.jasoncoward.com | http://twitter.com/drumshaman | https://github.com/opengeek

7,075 Posts

davidm Reply #5, 18 years ago

Quote from: ajayre at May 04, 2006, 02:28 AM

David,
Google sitemaps are for submitting your site to Google’s index. Google maps are for displaying interactive, multi-layered maps on your web site. Thanks for replying though. Hopefully I can take advantage of this PHP API. Using a module perhaps?

Andy

lol

I haven’t read carefully enough, was late sorry for the off-topic reply tongue

.: COO - Commerce Guys - Community Driven Innovation :.

MODx est l'outil id

674 Posts

jabiertxof Reply #6, 18 years ago

because a parse problem whith a class you need to put all code in a snippet and put into the body
hi

Jabiertxof (formerly XYZVISUAL)
My bussines: http://marker.es
https://www.youtube.com/user/jabiertxof/videos

502 Posts

ajayre Reply #7, 18 years ago

Thanks for the replies! I don’t quite understand placeholders yet - have to do some searching for examples. But don’t snippets require the HTML to be returned rather than echoed? Those function calls in the Google Maps API use echo.

Andy

502 Posts

ajayre Reply #8, 18 years ago

OK, the library code is simply enough to change the echos into returns, so I’ll give that a try. Hopefully I can get this working how I want. Ideally I would like to do the following:

[[googlemap?id=bigmap&....]]

then somewhere else:

[[googlemap?id=sidebarmap&...]]

so I think that common javascript would have to go into a single placeholder. So is it possible to detect if a placeholder has already been filled in?

Andy

502 Posts

ajayre Reply #9, 18 years ago

Here is the very basic snippet that I came up with that can easily be used as a starting point for something more sophisticated. It allows multiple maps per page. Add [+googlemapheader+] before the </head> tag and [+googlemapfooter+] before the </body> tag. I decided to ditch the PHP library - not flexible enough for my needs.

Example:

[[googlemap?id=bigmap&width=700&height=500]]
[[googlemap?id=smallmap&width=200&height=200]]

Snippet:

// outputs a google map
// parameters:
// id = id of div tag
// width, height = width and height of map

// defaults:
$default_id = 'map';
$default_width = 300;
$default_height = 300;

// notes:
// add [+googlemapheader+] before </head> tag
// add [+googlemapfooter+] before </body> tag

$id     = (isset($id))     ? $id     : $default_id;
$width  = (isset($width))  ? $width  : $default_width;
$height = (isset($height)) ? $height : $default_height;

// get current header
$header = $modx->getPlaceholder('googlemapheader');

// if no header defined then define and add one
if (!strlen($header))
{
  $header = '<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAwCGFNcsQZZaar4Ag_DD-TxRbjNzHaNEcWlqcrBNeLWsaQm0mURRkPNBjzXqEboBCoirHKg_hYUaj3w" type="text/javascript"></script>'."\n";
  $header .= '<style type="text/css">'."\n";
  $header .= '  v\:* {'."\n";
  $header .= '    behavior:url(#default#VML);'."\n";
  $header .= '  }'."\n";
  $header .= '</style>'."\n";

  $modx->setPlaceholder("googlemapheader", $header);
}

// get current footer
$footer = $modx->getPlaceholder('googlemapfooter');

// if no footer defined then define start
if (!strlen($footer))
{
  $footer  = '<script type="text/javascript">'."\n";
  $footer .= '//<![CDATA['."\n";

  $footer .= '// Creates a marker at the given point with the given number label'."\n";
  $footer .= 'function createMarker(point, name, url) {'."\n";
  $footer .= '  var marker = new GMarker(point);'."\n";
  $footer .= '  GEvent.addListener(marker, "click", function() {'."\n";
  $footer .= '    marker.openInfoWindowHtml("<b>" + name + "</b><br><small><a href=\"" + url + "\">View image</a>");'."\n";
  $footer .= '  });'."\n";
  $footer .= '  return marker;'."\n";
  $footer .= '}'."\n";

  $footer .= '//]]>'."\n";
  $footer .= '</script>'."\n";
}

$footer .= '<script type="text/javascript">'."\n";
$footer .= '//<![CDATA['."\n";

$footer .= 'var '.$id.' = new GMap2(document.getElementById("'.$id.'"));'."\n";
$footer .= $id.'.addControl(new GLargeMapControl());'."\n";
$footer .= $id.'.setCenter(new GLatLng(53.841, -0.435), 13);'."\n";

$footer .= 'var point = new GLatLng(53.841, -0.435);'."\n";
$footer .= $id.'.addOverlay(createMarker(point, "Guildhall", "guildhall.html"));'."\n";
$footer .= 'point = new GLatLng(53.851, -0.425);'."\n";
$footer .= $id.'.addOverlay(createMarker(point, "Minster", "minster.html"));'."\n";

$footer .= '//]]>'."\n";
$footer .= '</script>'."\n";

$modx->setPlaceholder("googlemapfooter", $footer);

$map = '<div id="'.$id.'" style="width: '.$width.'px; height: '.$height.'px;"></div>';

return $map;

96 Posts

Commodore64 Reply #10, 18 years ago

Nice snippet

Thank you! I can’t wait trying it - now that Google Maps has finally landed in Europe!

P.S. Placeholders are very, very handy wink

I discovered them too late...