Home > Articles

Creating Your First Google Maps Mashup

  • Print
  • + Share This
Google Maps mashups let you map your own locations on an interactive Google Map. In this article, Google expert Michael Miller shows you how to program your own Google Maps mashup — and place the resulting custom map on your own website.
Like this article? We recommend

Google Maps is not only one of the best sites for maps and directions, it’s also the front end to an entire universe of custom maps—called mashups. That’s because you can mash together your own personal data with a Google map, and place the resulting mashup on your own website. In essence, you’re creating an overlay for your data, from the information in the Google Maps database, and that overlay is displayed on top of the appropriate Google map.

What kind of data can you map on a Google Maps mashup? You might want to create a map of your company’s headquarters, so that visitors can see where you are. Or you could get really fancy and map a collection of different locations on a single map—multiple retail stores, for example, or maybe properties for sale or rent in a given area.

Whatever you want to map, it’s relatively easy to do. All you need to know is the location’s latitude and longitude coordinates (which you can get from Google Maps itself), along with a basic knowledge of HTML and JavaScript. Then you use the Google Maps API to embed the custom maps you create into your own web pages.

In this article, I’ll show you how to create a basic single-location map mashup. But if you want to create more sophisticated mashups, you just add more sophisticated code. For example, the Google Maps API lets you add custom markers, info windows, and overlays to your maps. Each element is added via a distinct line of code, which then uses the Google Maps API to retrieve the appropriate map from Google.

And here’s the best thing: It doesn’t cost a dime to create your own personal Google Maps mashups. The use of the Google Maps API is totally free for non-commercial use.

Obtaining a License Key

To use the Google Maps API, you have to obtain a license key. This key can be used only on the web domain you specify—so if you plan on using a practice board or another website for development, you’ll want to get a key for that site in addition to your main site.

You obtain your Google Maps API key at http://www.google.com/apis/maps. This is also where you download the API’s documentation, access online help files, and link to the official Google Maps API Blog.

To obtain a license key, you’ll need to have a Google account, and then enter the domain of your website. Google will then email you the key, which you’ll include in all your Google Maps code.

  • + Share This
  • 🔖 Save To Your Account