<?php
require_once 'Google/Maps.php';
$map = Google_Maps::create('static');
$map->setKey(trim(file_get_contents('api_key.txt')));
$map->setSize('540x300');
$coord_1 = new Google_Maps_Coordinate('58.378700', '26.731110');
$coord_2 = new Google_Maps_Coordinate('58.379646', '26.764090');
$marker_1 = new Google_Maps_Marker($coord_1);
$marker_2 = new Google_Maps_Marker($coord_2);
$map->addMarker($marker_1);
$map->addMarker($marker_2);
$map->zoomToFit();
$zoom = Google_Maps_Control::create('zoom');
$map->addControl($zoom);
$pan = Google_Maps_Control::create('pan');
$map->addControl($pan);
$bubble_1 = new Google_Maps_Infowindow('Foo Bar');
$bubble_2 = new Google_Maps_Infowindow('Pler pop');
$bubble_1->setMarker($marker_1);
$bubble_2->setMarker($marker_2);
$map->addInfowindow($bubble_1);
$map->addInfowindow($bubble_2);
$map->setProperties($_GET);
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Static Map Controls and Infowindow Demo</title>
<link href="http://www.appelsiini.net/stylesheets/screen.css" rel="stylesheet" type="text/css" />
<link href="http://www.appelsiini.net/stylesheets/main.css" rel="stylesheet" type="text/css" />
<link href="css/controls.css" rel="stylesheet" type="text/css" />
<link href="css/infowindow.css" rel="stylesheet" type="text/css" />
<link rel="alternate" type="application/atom+xml" href="http://feeds.feedburner.com/tuupola" title="Atom feed" />
</head>
<body>
<div class="container">
<!-- header -->
<div id="header" class="span-20">
<div class="span-11">
<h1>PHP Google Static Maps</h1><br />
<p>Programmatically Create Google Static Maps With PHP.</p>
</div>
<div class="span-9 last">
<ul id="nav">
<li id="first"><a href="http://www.appelsiini.net/">weblog</a></li>
<li><a href="http://www.appelsiini.net/projects" class="last">projects</a></li>
<!--
<li><a href="http://www.appelsiini.net/cv" class="last">cv</a></li>
-->
</ul>
</div>
</div>
<!-- /header -->
<!-- content -->
<div class="span-14" id="content">
<div class="entry">
<div class="entrytitle">
<h2>Add Controls and Infowindow to Static Map</h2>
<h4>There is no JavaScript in this page (except Google Analytics)</h4>
</div>
<div class="entrybody">
<?php print $map->toHtml(); ?>
<br /><br />
<p>
Try to click markers and zoom or pan. There is no JavaScript (except Google Analytics)
used in this page. Above map is created using code below.
</p>
<p>
<pre>require_once 'Google/Maps.php';
$map = Google_Maps::create('static');
$map->setKey(API_KEY);
$map->setSize('540x300');
$coord_1 = new Google_Maps_Coordinate('58.378700', '26.731110');
$coord_2 = new Google_Maps_Coordinate('58.379646', '26.764090');
$marker_1 = new Google_Maps_Marker($coord_1);
$marker_2 = new Google_Maps_Marker($coord_2);
$map->addMarker($marker_1);
$map->addMarker($marker_2);
$map->zoomToFit();
$zoom = Google_Maps_Control::create('zoom');
$map->addControl($zoom);
$pan = Google_Maps_Control::create('pan');
$map->addControl($pan);
$bubble_1 = new Google_Maps_Infowindow('Foo Bar');
$bubble_2 = new Google_Maps_Infowindow('Pler pop');
$bubble_1->setMarker($marker_1);
$bubble_2->setMarker($marker_2);
$map->addInfowindow($bubble_1);
$map->addInfowindow($bubble_2);
$map->setProperties($_GET);</pre>
<h3>Where's the Source?</h3>
<p>
Code uses work in progress <a href="http://github.com/tuupola/php_google_maps/tree">Simple Static Maps PHP class</a>.
It aims to make working with static maps jolly good. Code is still alpha quality.
API might change any time. Use at your own risk.
</p>
<p>
If you like this you might also want to see <a href="http://www.appelsiini.net/2008/10/simple-zoom-and-pan-controls-with-static-maps">walkthrough</a> and <a href="http://www.appelsiini.net/2008/10/simple-static-maps-with-php">other features</a>.
</p>
</div>
</div>
<hr class="space" />
</div>
<!-- /content -->
<!-- sidebar -->
<div class="span-5 push-1 last" id="sidebar">
<br /><br />
<a href="http://twitter.com/tuupola"><img src="http://www.appelsiini.net/images/twitter3.png" alt="@tuupola" /></a>
</div>
<!-- /sidebar -->
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
/*
$(function() {
$('map area').bind('click', function() {
$('.bubble').hide();
var id = '#' + $(this).attr('name');
$(id).show();
return false;
});
});
*/
</script>
<script src="/mint/?js" type="text/javascript"></script>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-190966-1";
urchinTracker();
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
) is private.
