Adding a Google Map Image to your Mobile Website

Posted at November 16, 2009

I get many people asking how to put an image of a Google Map on their mobile website. This is a very easy task to do, and I will explain how.

First and foremost, you need to get an application key for your site. You can do so at Google’s website ( http://code.google.com/apis/maps/signup.html ).

After you have your application key, it’s as easy as adding an image to your website:

<img src="http://maps.google.com/maps/api/staticmap?center=10%20Main%20St%20Greenfield,MA&zoom=16&size=200x200&sensor=false&markers=blue|10%20Main%20St%20Greenfield,MA&maptype=roadmap&mobile=true&key=YOUR_KEY_HERE" width="200" height="200" alt="Google Map" />

Simply replace 10%20Main%20St%20Greenfield,MA with the address you wish to use. Remember to use %20 as a space, or you can URL Encode your address.

Easy, and straight forward!

Now if you want to allow the user to zoom in and out, we can use some simple PHP coding to achieve this. See below.

<?php
$gzoom = $_GET['zoom'];
if(empty($gzoom)) {
$zoom = 14;
}
else {
$zoom = $gzoom;
}
?>

<img src="http://maps.google.com/maps/api/staticmap?center=10%20Main%20St%20Greenfield,MA&zoom=<? echo $zoom; ?>&size=200x200&sensor=false&markers=blue|10%20Main%20St%20Greenfield,MA&maptype=roadmap&mobile=true&key=YOUR_KEY_HERE" width="200" height="200" alt="Google Map" />


<?php
$in = $zoom+2;
$out = $zoom-2;
?>
<br />
<a href="?zoom=<? echo $in; ?>">Zoom In</a> | <a href="?zoom=<? echo $out; ?>">Zoom Out</a>

The $gzoom variable get’s the current zoom value, and adds it to Google’s Map Image. Then we add 2 to zoom in, and subtract 2 to zoom out, and display the links. Easy? Yep!

Articles, Code Snippets

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Comments

4 Responses to “Adding a Google Map Image to your Mobile Website”

Leave Comment

You must be logged in to post a comment.