[MapService] How to Embed Maps in Your Own Web Pages

Sat, 23 May 2015 05:32:44 +0000

To embed a map in your own web page, the common methods can be summarized as follows:

The Simplest Method – Using Google Maps’ “Link” Feature

If you only need to display a specific area on your page, such as your company’s location, without adding any extra content like markers or polylines, this is the easiest way to embed Google Maps.

Go to the Google Maps homepage, navigate to the area you want to display, then click “Link” in the upper left corner of the map. An info box will appear with two input fields – copy the content from the second input field into your page and you’re done.

This embed code is essentially an iframe declaration. Although the Maps homepage provides a customization and preview feature, it only allows you to customize the map size. If needed, you can manually modify the iframe declaration for further customization, such as adding custom styles to the iframe.
The Most Lightweight Method – Using Google Static Maps

If you need to display a specific area and add some markers or polylines, but don’t care whether the map on your page is draggable, then static maps are what you need.

A static map means what you embed in your page is actually just a GIF image, dynamically fetched from Google via a URL. This differs from the “dynamic” maps we commonly use, and loading such a map is much faster than loading a full interactive map.

To use a static map on your page, simply use an img tag and set its src attribute to the Google Static Maps URL.

Here’s a simple static map URL:
1

http://ditu.google.cn/staticmap?center=39.970981,116.314108&zoom=16&size=400×400&key=YOUR_API_KEY
In this URL, you can edit parameters like center, zoom, and size to specify the map’s center point, zoom level, map dimensions, and more. Of course, you can also add parameters for markers and polylines. Don’t worry about memorizing all these parameters – there’s a static map customization wizard that guides you through a few simple steps to get the URL you need. If interested, you can explore the Google Static Maps API documentation.

Strictly speaking, Google Static Maps is also a type of Google Maps API, so using static maps requires your Google Maps API key. If you’ve already registered a Maps API key, you can simply reuse it.
The Most Flexible Method – Using the Google Maps API

If neither of the above methods meets your needs, try the Google Maps API. Although the Google Maps API has been divided into JavaScript, Flash, Earth, Static, and other versions, in my view, the JavaScript API is the foundation of the Google Maps API. So unless otherwise specified, “Google Maps API” here refers to the Google Maps JavaScript API. With this API, you can display your data on the map in any feasible way you like, and you can even make your own map look better than Google Maps itself.

To embed a map in your page using this API, the basic steps are:
1. Import the Maps API library using a JavaScript tag;
2. Define an element on the page to hold the map, typically a div tag with specified width and height;
3. In your JavaScript code: new GMap2(document.getElementById("your map container's id"));
4. Use classes provided by the API such as GMarker, GPolyline, etc. to customize the markers, polylines, and other elements on the map.
For a detailed guide on creating Google Maps, see the “Creating Maps with JavaScript Guide” above. However, to use this API proficiently, you need a certain level of JavaScript knowledge and hands-on ability. Additionally, it’s strongly recommended to read the Google Maps JavaScript API Developer Guide first, which can answer many common questions. Of course, you can also find the information you’re looking for in this documentation.

Beyond the methods described above, there are some less commonly used ways to embed maps in web pages, which won’t be covered here.

MapService on Coinidea's Blog

[MapService] How to Embed Maps in Your Own Web Pages