Google Maps Mapping :: webdev

Adding Custom Google Maps To Your Website

Getting the Coordinates

As I do not expect you to know the precise coordinates of your location, I will explain a very quick way Google has provided to do this. When you know the exact address, you can put it in an URL of this form:


						http://maps.google.com/maps/geo?q=1+Infinite Liip,+Cupertino,+CA+95014,+USA&output=csv&oe=utf8&sensor=false&key=your_google_maps_api_key

When you enter this in your address bar, you will see this:


						200,8,37.3311980,-122.0307250

The coordinates of Apple's head quarter in Cupertino

The first number is the status code, and 200 means that everything is okay. The second number shows how accurate the address is—in this case the number is 8, which is good. The last two numbers are latitudes and longitudes, which are the numbers we need.

Cartographer.js - thematic mapping for Google Maps

Google Maps API Concepts

XHTML and VML

We recommend that you use standards-compliant XHTML on pages that contain maps. When browsers see the XHTML DOCTYPE at the top of the page, they render the page in "standards compliance mode," which makes layout and behaviors much more predictable across browsers. Pages without that definition may render in "quirks mode" which can lead to inconsistent layout.

If you want to show polylines on your map (like the lines used by Google Maps to show driving directions), you need to include the VML namespace in your XHTML document to make everything work properly in Internet Explorer. The beginning of your XHTML document should look like this:


						<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
						   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
						<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

Google Maps Mapping :: webdev