Web Development Blog

Google Maps Static Images, How to Create

Creating Google maps images to display on your website are really neat. They load really fast and can really give visitors a good idea of where something is located. I personally like to use them on contact us pages to show the location of a company.

Creating them is a blast and relatively easy. First you will need to know the location of the company or whatever your looking to create a map for. Next have an idea of what type of dimensions you want the map to be and finally if you want markers on it you will need to know the latitude and longitude of the spot the market should go.

After you’ve compiled all that data together now is the easy part, just replace your data with what is in the below URL.

http://maps.google.com/staticmap?size=300x115&center=mars+pa&zoom=13&markers=40.6958996,-80.0117254
&key=YOUR_KEY_HERE

This gives you:

You will also notice there is a zoom reference in the URL above. With that you can set how close or far out the zoom level is for the screen shot of the map.

If you are clueless and scratching your head when you look at this URL and don’t get how to put the data in, here are some helpful hints. Directly after each & symbol in the URL is what is called a parameter. This basically is a “label” that you can define. For example in URL above you will see “size” this is a parameter that we can set, simple add your dimensions after the equals sign (make sure you keep the same format).

So now you have a basic understanding of the syntax of the URL you might be wondering what the parameter “center” is for… well that’s the address for the company or place you want a map of. And of course “marker” is the latitude and longitude of where the marker should fall on the map. Also make sure to replace the YOUR_KEY_HERE with the key get from signing up with Google Maps API.

Lastly take the URL and put it into an image’s source tag as follows:

<img src="http://maps.google.com/staticmap?size=300x115&center=mars+pa&zoom=13&markers=40.6958996,
-80.0117254&key=YOUR_KEY_HERE" alt=""/>

I’ve also found a good reference for creating these maps really quickly if you’re still having trouble, can’t calculate the lat and long for the market, or just want something faster/easier then try Google Static Map Wizard.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Request A Free Quote

GET OUR PRICING GUIDE

Enter your email address below, and we'll send you our current pricing guide immediately.