SO Mobile Map Widget

This widget adds a mobile-optimised Google Static Map Image with a colored pin centered on a destination of your choosing.

SO Mobile Map Widget

SO Mobile Map Widget is meant for websites that target browsing via mobile devices. This widget adds a mobile-optimised Static Google Map Image with a colored pin centered on your destination. Once clicked it opens the Google mobile maps website where you can fill in your Current Location if it is not already there. Then you can see the directions from your location to the destination as well as the map with the route of your choice. Optimised for mobile use. Google Static Maps API-key is optional.

The reason I developed the SO Mobile Map Widget as a plugin, is because while implementing the widget for a mobile framework I am building for the hospitality industry, I realised that this widget can come in handy for many other scenarios too. You can include it on your company website to help people find your office location from wherever in the city they are. A travel information site can use it to include maps of tourist attractions, bars and restaurants can use it, you can use it to direct people to your new home, it can even come in handy for if you organise a party with a location that is kept secret till the very last moment!

I used the Static Maps API V2 Developer Guide to build the URLs needed to show the Static Map Image as well as the proper link.

Once activated you can go to your Widgets (under Appearance in your backend) and drag the SO Mobile Map Widget to the sidebar of your choice. When you have placed the widget in a sidebar you need to fill in the following data:

  1. Title (optional).
  2. Destination coordinates. The help text contains a link to [Google Maps API Example: Simple Geocoding](http://gmaps-samples.googlecode.com/svn/trunk/geocoder/singlegeocode.html) where you can fill in an address to easily find the coordinates of your destination. The map will also be automatically centered on this location.
  3. Color of the pin. You can choose from black, brown, green, purple, yellow, blue, gray, orange, red, white.
  4. Zoom level. From 0 (world view) to 21+ (streetview); from 15 and up seems to be good for locations in larger cities, but best to check and play around with it a bit.
  5. Width in pixels. The image width will be automatically scaled to optimise for mobile screens.
  6. Height in pixels.
  7. Google Static Maps API Key (optional). You can use the instructions in the above linked Developer Guide to activate the Static Maps API and create your key.
  8. Description (optional). You can use this field to add a description under the map image, for example to inform your visitors that the image is clickable.

Now you can save the widget and visit your website from a mobile device. When you click on the Static Map Image you will be directed to a Google Maps website that looks the same in almost all mobile browsers. If the site doesn’t automatically fill in your Current Location (it helps if you have your GPS turned on), you can always type it in. Then it will give you the different possible routes on how to get to the destination, by different modes of transport where available. Once you are looking at the map, you can also choose between the different available Map Layers.

You can of course also visit your site from a desktop or laptop computer, but as those devices do not have a GPS locator, they won’t automatically fill in your Current Location.