We just needed a little embedded Google map on the contact page. Every other Google maps plugin either had too many features, not enough features or just plain didn’t work. So we made our own. And we thought we’d share it with you.
How it works
Google recently released version 3 of their Maps API. The short story is they made it smaller and faster, but with less features. The biggest advantage is that it doesn’t require an API key. So all you have to do is install this plugin and set a few options! Lucky you.
There are two ways to put a map on your site. One is with shortcode inserted into any page or post. The other is as a widget in your sidebar.
The shortcode name is SGM and here are the options:
- lat [int] – the latitude of the marker and the center of the map.
- lng [int] – the longitude of the marker and the center of the map.
- zoom [int] – the zoom level (0-19).
- type [int] – the starting map type. Possible values are only ROADMAP, SATELLITE, HYBRID or TERRAIN and must be in uppercase
- directionsto [string] – the destination address for getting directions. Obviously you want this to be the address of your latitude longitude coordinates.
- content – what goes inside the infoWindow (speech bubble) that appears when the marker is clicked.
So with this sample shortcode :
SGM lat="28.022827" lng="-81.73127" zoom="14" type="TERRAIN" directionsto="62 4th St NW, Winter Haven, FL 33881" content="<b>Clark/Nikdel/Powell, Inc.</b><br>62 4th St NW, Winter Haven FL 33881<br>For directions enter your address below"]
… you would get something similar to this:
A few notes
- This plugin only allows for one map per page (a widget map counts as one) and one marker per map. It is simple, after all.
- The plugin inserts some CSS into your website’s <head> that is necessary for the map to appear so make sure your plugin has the wp_head() function in the header.php file. If nothing shows up when you insert a map, that is most likely the problem.
- You can edit or turn off the aforementioned CSS from the plugin’s settings page. Just make sure you at least define a width and height for div#SGM.
- The directions form is displayed only if you have the directions to value set.
- One of the features google left out of Maps API V3 was the info bubble’s ability to resize itself. So its width and height are defined by the width and height of the map. Somehow …
- If you wish to use HTML in the content value in shortcode, be sure and type it in visual mode (not HTML mode). The pointy brackets will be special HTML characters in HTML mode and are converted back into pointy brackets by the plugin.