Pin Me

Google Maps API Tutorial

written by: Winston Smith•edited by: Mark Muller•updated: 4/22/2011

Putting a map on your website helps customers find your business, but who wants to make a map from scratch. By using this Google Maps API tutorial, you can learn how to embed high quality maps on your website.

  • slide 1 of 4

    Google's map tools are widely used and respected for their ease of use, accuracy and ease of customization. There are many uses for an online map including providing directions, showing local landmarks and finding out travel time. Google maps can also be used to organize special events like conferences, seminars and even weddings - any event where you have out of town attendees who need to figure out where to go. Using Google Maps also gives a professional look to a website since you don't need to worry about scaling, color and other map design issues.

    Like any powerful technology, Google Maps can be customized in many different ways depending on the user's needs. The first choice is between using a traditional map or Google Earth which uses satellite images and other advanced mapping information. In most circumstances, using a traditional map is recommended since that is what most people expect. This Google Maps API tutorial will focus on the "static map" option, but it is not the only map tool available from Google.

  • slide 2 of 4

    Google Static Maps API

    Google Maps of New York City (Image Credit: Google) The Google Static Maps API (Application Programming Interface) is the most basic Google Maps option but it can be configured in a number of ways. The image shown to the left shows the southern part of Manhattan in New York City. Google Maps tends to be particularly detailed for urban areas in the United States and other developed countries, but it does have some information in other areas as well. To see if Google Maps covers your area, enter your address into the Google Maps website.

  • slide 3 of 4

    Options and Customization

    There are many different ways that a static Google Map can be customized. Most of these options can be configured by writing some JavaScript code; Google provides detailed instructions on how to customize the maps so that non-programmers can use the tool.

    • File type: Maps can be displayed in three different file types (JPEG, GIF, or PNG)
    • Locations: Locations can be indicated on a map either by an address (preferable for urban locations) or coordinates (i.e. latitudes and longitudes). If you use an address, test it first since the errors sometimes occur when addresses are plotted onto a map.
    • Image Size: Choosing the right image size is an important consideration since you do not want the map to overwhelm the rest of the website. The maximum static image size available is 640 x 640.
    • Map Type: Four different map types are offered (roadmap, satellite, terrain and hybrid); roadmaps are the best choice for urban locations or if you need to provide directions.
    • Markers: You can place colored markers on your map to indicate specific locations (e.g. Marker A for the conference venue, Marker B for the conference hotel and Marker C for the city's airport).
    • Style and color: The map shown in the previous section is a standard Google Map, but the colors and presentation can be further customized and changed (e.g. brightness and gamma correction).

  • slide 4 of 4

    Resources and References

    Now that you have learned the basics in this Google Maps API tutorial, you can learn more about how to code and deploy maps on your website. Explore these Google resources to find out about your options.

    Google Static Maps Developer Guide,

    Google Maps API Family,

    Image Credit: Google/Google Static Maps Developer Guide