background preloader

Maps, street directories, navigation

Facebook Twitter

OpenStreetMap - an alternative to google maps. This is How You Use the Google Maps API – screencast | Nettuts+ (2008) So your client emails you and asks, "Can you put one of those flashy maps on my contact page so that users can actually see our building from a satellite's view? ". You've used Google maps many times, but there is only one problem: you have no idea how to use the API.

Well get out your spoon and dig in! Step 1: Obtain a Unique API Key If you were to download the source code that is provided with this article, you would find that it doesn't work on your website. Never fear. That's it! You'll also find a script path that will look like: Yours will be different from mine because it will contain your own specific key value. You might want to bookmark the link to the API documentation. Step 2: Setting Up Your HTML For the sake of simplicity, we'll create a bare bones layout. In a real world situation, you should move the styling to an external file (like I did in the video). Step 3: Javascript Next, add the following to your Javascript file. To take this code line by line: Step 4: Refining Our Map.

Static Maps API - Google Code. The Google Static Maps API lets you embed a Google Maps image on your web page without requiring JavaScript or any dynamic page loading. The Google Static Map service creates your map based on URL parameters sent through a standard HTTP request and returns the map as an image you can display on your web page. New! The Google Static Maps API Usage Limits have changed. Creating an API key and including it in your request allows you to track usage in the APIs Console, and to purchase additional quota if required. This document details the Static Maps API v2.

To update your v1 URLs, please consult the Upgrade Guide. A Quick Example The following example contains the URL of a static map image of downtown New York City, which is displayed below: Notice that you don't need to do anything "special" to get this image to show up on the page. Audience API Key The Static Maps API uses an API key to identify your application. Usage Limits URL Size Restriction. The Google Maps Javascript API | Google Code. Embedding Google Maps.