Archive for the 'Uncategorized' Category

Published by Shawn on 13 Apr 2008

Google Maps API; A Tutorial

Step 1: Google Maps API Key

Note: this didn’t come out as expected during the Wordpress migration :(

In order to get a map on your site you must first sign up for a Google Maps API Key. There is no charge for this. Just make sure you follow the Google Maps Terms and Conditions.

The official Google Maps Documentation contains specifc API commands for more advanced users.

The “Hello World” of Google Maps
For the most part, basic Google Maps are fairly trivial. It’s when you’re handling 2 million data points is when it gets a bit tricky.

See Example
*note: I like to stick with the latest web standards, hence the strict DOCTYPE*

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/2001/REC-xhtml11-20010531/DTD/xhtml11-flat.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/javascript;
charset=iso-8859-1″ />
<meta name=”description” content=”Google Maps Basic Example” />
<meta name=”keywords” content=”" />
<title>My First Google Map</title>
<script
src=”http://maps.google.com/maps?file=api&v=2.44&key=your_map_key”
type=”text/javascript”></script>
<script type=”text/javascript”>
//<![CDATA[

// this is the javascript that is responsible for generating the map
function load_map() {
if (GBrowserIsCompatible()) {

// assign an id to the location in the html,
// in this case it is a div element
var map = new GMap2(document.getElementById("map"));

// latitude and longitude of center of map, on load
// the 18 is for the zoom level
map.setCenter(new GLatLng(41.902277, -87.62832), 18);
}
}

//]]>

</script>
</head>

<body onload=”load_map()” onunload=”GUnload()”>

<div id=”map” style=”width: 500px; height: 300px”></div>
<br/>
</body>
</html>

Google Map Controls

In order to zoom or pan or view different versions of the map (Satellite or Hybrid) you need to add some more JavaScript.

This adds basic zoom and pan controls to your map (See Example)

function load_map() {
if (GBrowserIsCompatible()) {

// assign an id to the location in the html,
// in this case it is a div element
var map = new GMap2(document.getElementById(”map”));

map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

// latitude and longitude of center of map, on load
// the 18 is for the zoom level
map.setCenter(new GLatLng(41.902277, -87.62832), 8);
}
}

Add a Marker and Info Window

Generally speaking, data points can be sent in XML format and loaded onto the map. This is just the basic way to include a data point (marker) and it’s corresponding Info Window.

// Adds a marker at the given point with an info window
function createMarker(point, data) {
var marker = new GMarker(point);
GEvent.addListener(marker, “click”, function() {
marker.openInfoWindowHtml(data);
});
return marker;
}

function load_map() {
if (GBrowserIsCompatible()) {

// assign an id to the location in the html,
// in this case it is a div element
var map = new GMap2(document.getElementById(”map”));

// this will add a larger zoom control to the map
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

// latitude and longitude of center of map, on load
// the 8 is for the zoom level
map.setCenter(new GLatLng(41.902277, -87.62832), 8);

// Add a marker with an Info Window
var point = new GLatLng(41.91862,-87.86590);

// you can also style the info window
var html = ‘<div style=”color:#005;width:200px;”>’;
html += ‘Check out our other maps at ‘;
html += ‘<a href=”http://www.fishing-locations.com”‘;
html += ‘title=”Fishing Locations and Google Maps”>’;
html += ‘fishing-locations.com</a></div>’;
var marker = createMarker(point,html);

// add the marker to the map
map.addOverlay(marker);
}
}

This adds a marker and corresponding info window. (See Example)

AJAX Your Google Map

One of the cool features of Google Maps API is that it allows you to grab the data using Asynchronous Javascript and XML, better known as AJAX.

This allows you to update the map without refreshing the page. This example gives a basic outline of the request and response activity when the user loads the page.

This adds a marker and corresponding info window. (See Example)

function load_map() {
var map = new GMap2(document.getElementById(”map”));
// this will add a larger zoom control to the map
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

// latitude and longitude of center of map, on load
// the 8 is for the zoom level
map.setCenter(new GLatLng(41.902277, -87.62832), 4);

// Read the data from example.xml
var request = GXmlHttp.create();
request.open(”GET”, “data.xml”, true);

// this is how the ajax is performed
// this part of the script sends a request to the server
// and receives the data.xml file
request.onreadystatechange = function() {
if (request.readyState == 4) { // when all is clear
var xmlDoc = request.responseXML;

// get the marker array and parse the data
var markers = xmlDoc.documentElement.getElementsByTagName(”marker”);

// for each marker, get the attributes and the infowindow data
for (var i = 0; i < markers.length; i++) {
// parse the marker attributes
var lat = parseFloat(markers[i].getAttribute(”lat”)); // lat
var lng = parseFloat(markers[i].getAttribute(”lng”)); // long
var point = new GLatLng(lat,lng); // create the point
// get the infowindow data
var html = GXml.value(markers[i].getElementsByTagName(”infowindow”)[0]);
// create the marker
var marker = createMarker(point,html);
// add the marker to the map
map.addOverlay(marker);
}
}
}
// this sends the ajax request
request.send(null);

} // end load_map()

Here are some of my favorite resources for building Google Maps.

Check out a few of the Google Maps Extended APIs

Uncategorized

Published by Shawn on 13 Apr 2008

HTACCESS Wrappers Tutorial

Instead of naming your PHP .php, you have the option of keeping the file extension as .html or .htm.

This only takes a few lines of code in the .htacces file, and a few more lines of code in the PHP script that runs the show.

Here is the code for the .htaccess file:

AddHandler pagex.htm
AddHandler pagex.html
Action pagex/page.php

The first two lines tell Apache to designate files of type .htm or .html to a type called ‘pagex’.

The last line instructs the web server to execute the page.php script when either of the files listed above are requested.

The path is relative, so if the script was in directory http://www.example.com/scripts/page.php, the line would read Action pagex /scripts/page.php

Now the magic…

In this tutorial we will identify the name of the file being requested, and serve the relevant content (wrapped in valid XHTML of course!).

The following is the code for page.php:

<?php

$file = $_SERVER["PATH_INFO"];

switch($file){

case “/index.html”:

include(‘index.php’);

break;

case “/shawngo.html”:

include(’shawngo.php’);

break;

}

?>

$file = $_SERVER["PATH_INFO"]; returns the file name of the requested file in the form “/filename.html”. We could do some fancy string work, but that is out of scope.

The switch statement switches on $file and the corresponding .php file is included using the include statements.

Here is an example of the index.php file:


<?php

// define a few variables

$title=“Web Development is Fun!”;

$description = “PHP Scripts, Google Maps API Tutorials And More!”;

$keywords = “KML, Google Maps API, Tutorials”;

?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/2001/REC-xhtml11-20010531/DTD/xhtml11-flat.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

<head>

<title><?=$title?></title>

<meta http-equiv=”Content-Type” content=”text/xml; charset=iso-8859-1″ />

<meta name=”description” content=”<?=$description?>” />

<meta name=”keywords” content=”<?=$keywords?>” />

<meta name=”title” content=”<?=$title?>” />

</head>

<body>

<div id=”wrapper”>

<h1>Hello World</h1>

</div>

</body>

</html>

Wasn’t That Fun?

There are many different applications for this type of modifications. This offers the ability to insert ads into the header or footer of any or all pages of your webste. This is how some of the free hosts add advertising to the free websites they host.

My most recent application of this obfuscation is I See You Marketing where all the html pages are served up this way.

Have fun and share your code! :)

Uncategorized

Next »