Simple Google Map
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.
Sample example
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 directionsto 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.
73 Comments
wow this is great! thank you very much!
Very usefull, thx lads.
Excellent plugin. Many thanks for your open source contribution.
I hate to turn this into a support forum as often happens when someone releases something that people can’t quite figure out, but are you prepared to offer advice as to why I can’t actually get anything to display in this div?
http://dynamicpilates.co.nz/contact/
(Feel free to contact me offline if you’re prepared but don’t want to do this over the comments…)
… sorry, really dumb copy&paste error whereby the line breaks in the address details above were in my HTML, causing a jscript error. Simple. Thanks, this is awesome!
I must be being dumb but I installed this plugin, added the CSS above and tried the above sample short code on a Wordpress page and just getting a blank yellow edged box. Any as to what I might be doing wrong much appreciated :-( GG
Gulumbit, could you provide a link to your page?
I have the same comment as Gulumbit. Everything should be hooked up correctly, but I only get the yellow box. There is a javascript error on the page.
disregard my post. It was the extra breaks in the HTML. Thanks! This is great!!!!
What if I want this to be show in a widget? Any ideas?
Love the simplicity. Any chance of being able to have the marker and the centre set separately and specifying the default view (map/satellite etc)? A.
Hmm – and in Safari 4 on the Mac (not checked others) the directions form gets cropped. I think it might be a Google Maps API issue: There’s a div with an inline style that has a tight height set on it. A.
== Installation ==
1. Upload `SimpleGoogleMap.php` to the `/wp-content/plugins/` directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. Insert the shortcode into your posts or pages.
The installation instructions do not mention that one needs to copy and paste code into the CSS file. Perhaps i’m a newbie and didn’t realise that this is the case? That took me a few hours of head banging work out, never the less this is a great plugin, respect to the dev!
I’m having an issue with it using wordpress 2.8.4 – after installing it, all pages have this at the top (including the admin pages):
‘, $content); $return = ”
“; return $return; } ?>
Todd : Glad you could work it out!
Mcometa : Good idea. I’ll add that in the next update.
Andy Macaulay-Brook : Thanks for the ideas and heads up. I’ll add those/address the cropping problem in the next update.
Richard : Good point. I think since I’m a developer I built the plugin to cater to developers. I will add more user friendly features in the next update.
Nick : That is just plain bizarre. I’ll check my syntax, but if I can’t replicate that problem myself I don’t know what to tell you. But I’ll see what I can find.
Thanks to everyone for the feedback!
@Nick & @CNP: I’ve also encountered same problem. What I did was I changed the opening php tag to <?php (line #1). Try it, it worked for me and hope it does work for you too.
@All, I’ve found a way to make this to work on a sidebar/widget area. Just add this line of code to your “functions.php”
add_filter(’widget_text’, ‘do_shortcode’);
Then copy and paste your shortcode to your Widget area. Try it. :)
Source:
http://englishmike.net/2008/07/07/wordpress-quick-tips-3adding-a-shortcode-to-a-sidebar-widget/
http://www.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/
Good luck! @CNP, thanks for the simple yet wonderful google map plugin.
Great Plugin…
Is there a way of getting the map to start in the hybrid mode?
Cheers
http://www.mirefootwebdesign.com
Nice plugin – thanks much.
I was initially having trouble getting the map to display. Eventually, I realized it was an apostrophe in the value of the content option that was causing an error. Dashes cause the same problem.
I am lost. Where is the css file?
Eldred : There isn’t as of now, but it is a feature we will be including in the next update
Laura : Thanks for the heads up. That will be fixed in the next update as well.
Tony : Currently the plugin isn’t very friendly to our friends without programming skills. That will also change in the next update.
Everyone : Hopefully the next update will come very soon. It will address everyone’s requests!
I finally got this plugin to work after getting some clues in the comments above.
Here my problems:
Couldn’t find a settings interface on Wordpress. Found out, there’s none!
Didn’t know where to find the latitude and longitude of my map. Finally found it.
Got yellow box but no map. Found out, that apostrophes and dashes cause an error. Worked fine after removing these.
There are no option to get directions on the map. Would be nice to have this option.
My suggestion for a future release:
A simple copy and paste of the Google Code into a plugin app creates the shortcode that can be copied and pasted into the page.
Thanks!
Also, this plugin doesn’t work in IE. No problems in Firefox.
Everyone : Version 2.0 has been released! I hope you enjoy it and if there are any questions, comments, or suggestions they are much welcome.
Anja : There was no settings page, but there is now. I use this site to get latitude and longitude from an address (it’s the first hit on google if you search for “latitude and longitude from address”). Thank you for the note on apostrophes and dashes, that is now fixed. There was always a form to get directions in the info bubble (maybe you needed to scroll down to see it?), but now it only appears when the directionsto value is defined. A shortcode generator is a good idea, I will consider that for the next update. I have tested the plugin in IE 6, 7, and 8 and all my tests were successful. If updating to version 2.0 does not solve your IE problem, please supply a link to your site that has the problem and I’ll take a look at it for you.
Hi
I tried placing the map at my about page using a shortcode but it didnt work. Widget seems to be OK. What could go wrong?
http://www.zubirjamal.com/about
Zubir : That is peculiar. I see “[SGM]” appearing on your page and all by itself in the source code. That makes me think wordpress is having issues parsing the shortcode. Have you made any changes to the core Wordpress files? I see you are running Wordpress 2.8.4, maybe upgrading to 2.8.5 could help?
Hi
I just discovered your plugin.
I was wondering if some developer would soon create a google maps version 3 plugin and you did it! I think I’ll like it.
Yet, I have one question: will you add the possibility to use an address instead of lat and lng inside the shortcode?
Thank you
Raphael
I haven’t looked far enough into V3 to know if it will translate an address into latitude and longitude. I will look into it for the next release. If it doesn’t, there was a suggestion of having a shortcode generator in the admin page. That would also prevent everyone from having to look up the latitude and longitude.
Hi
Thanks for the reply.
In the Services part of the Maps API V3 Developer Guide, it is about geocoding requests. I guess it should be possible to convert an address into latitude and longitude.
Awesome! Thanks for the heads up.
Great plugin, thanks. Only thing is the marker (or pin) on my map appears as a plain white rectangle. Actually when the page loads the correct pin graphic briefly appears but is quickly replaced by the white rectangle. Any ideas?
Thanks
I fixed the disappearing icon by adding a google custom icon
SO I’ve read all the posts and everyone tells you they have fixed their issues without telling you how!
Dowlnloaded the latest version and the plugin installed fine. Map displays ok (ie no yellow box) as a widget. However I want to change the width and height of the widget. At the moment it is tall and thin.
I can find no settings panel that lets me do this, and despite being an experienced developer (bit new to wordpress) i remain unclear as to where to go to change the css around this.
So could someone please tell me how to change the CSS for the widget version. In simple steps for someone as stupid as me but that might be then useful for others reading this post later!
I have cut and pasted your example and all I get is the string itself appear. The plugin is activated. The head function is there. Stumped.
Alan : Very strange, I’m glad you were able to find a solution, what to do there escapes me.
Marco : In version 2.0 I added the ability to edit the CSS. Go to Settings > Simple Google Map, click the checkbox next to “I want to edit the Simple Google Map CSS”, and text box will drop down with the CSS in it. Edit the CSS, click Save Changes, and refresh your front-end page. This CSS applies to both widget maps and maps inserted into posts/pages with the shortcode.
IanF : Strange. That makes me think Wordpress is having issues parsing the shortcode. Are you running the latest version of Wordpress? Have you made any changes to the core Wordpress files? Also, do you have a link you could share? Don’t know if I might see anything from your source code.
Hi. Thanks for the plugin – it’s very simple to use and is just what I was looking for. I have the same problem as Alan above – the pin icon is missing. Take a look at this page
http://www.free-city-guides.com/bath/the-roman-baths/
I don’t understand Alan’s solution I’m afraid either – can anyone help?
Cheers
Andy : Try using the exact same SGM shortcode on another (preferably fresh) install of Wordpress. I’m wondering if the CSS for your site is somehow effecting the marker. If you don’t have one, paste the shortcode here and I’ll test it.
Testing the plugin and the pointer doesn’t display.
Using the Atahualpha theme – not sure if this is conflicting.
Otherwise, great plugin!
Hi again. Here’s the SGM code I’m using…
[SGM lat="51.3813894" lng="-2.3598293" zoom="15" type="ROADMAP" content="The Roman BathsAbbey Church Yard, Bath, BA1 1LZ"]I’ve tried this on a new page too and it does the same. I’m using Wordpress 2.8.5 and I’ve only just updated to this version before installing the plugin. I’m not sure what you mean about a new install of Wordpress? Thanks for your help!
Hi,
I got mine working now. It was due to the theme that i used.
Great plugin!
Thank you for your sharing your work. Works great for me with Chrome, but does not display map in IE or FF. I have tried everything. I even removed the parsing error from the in the content var but no map. Any suggestions?
Rick, Andy, & Damon : your problems reside in your CSS files. The easiest way to add the styles I give you below would probably be in the SGM admin page. In your Wordpress admin drop down the Settings menu and go to the Simple Google Maps page. Check the checkbox “I want to edit the Simple Google Map CSS” and paste the CSS I give you below in the box that appears. Click save changes and see if your problem is resolved. Then come back here and let me know if it worked!
Rick & Andy : It looks as though you got your themes from the same place. To fix your problems add the following CSS : #SGM img {padding:0; border:0; background-color:transparent;}
Damon : To fix your problem add the following CSS : #SGM img{max-width:none;}
Zubir : Glad you could get it to work!
I like the feel and look of the widget. Good job. The only tweak I would like is the option to set the height of the widget different from the display size in the post and some control over the size of the content box.
Thanks for a great plugin. I keep tinkering under the hood.
Kirby
Is there a way to get my content to show up without clicking my marker?
Hi. It works! Here’s a link to prove it!
http://www.free-city-guides.com/bath/bath-assembly-rooms/
Thanks for all your guidance and a great plugin!
Hi
I found the way to create maps with your plugin using directly an address in the shortcode.
I could take a bit of code from another plugin: Google Maps Geocoder. It uses the version 2 of Google Maps so there is a need for an API key. But only for the geocoding, not for the creation of the map.
Tell me the best way to give you the code I added, if you want it.
Raphael
Yes, thank you for the clear directions. Worked like a charm!
To make CSS changes persist on reactivation:
admin_sidebar->plugins->SGM_edit
replace line:
–#SGM input.text {border:solid 1px #ccc; background-color:#fff; padding:2px;}
with:
++#SGM input.text {border:solid 1px #ccc; background-color:#fff; padding:2px;}
#SGM img{max-width:none;}
(or whatever #SGM line you are adding )
Thanks again!
Very cool.. nice work.
Kirby : Setting custom map-specific heights sounds reasonable. If by content box you are referring to the info bubble that appears when the marker is clicked, please refer to the second bullet under Additional Notes in the plugin’s readme or the fifth bullet under A Few Notes on this page. The bubble’s size is determined by the size of the map.
Tom : Meaning getting the info bubble to appear as soon as the page loads? I’m not sure, I can look into Google’s API to see if that is supported in this version 3 beta.
Andy : Awesome! You are most welcome.
Raphael : If the geocoding requires an API key for each domain, then I do not wish to add it to the plugin. My goal with this plugin was to keep everything simple, the exclusion of obtaining an API key being the foundation of that simplicity. Thank you for the offer, however, and I’m glad you were able to find a desirable solution for your site.
Damon : Great! I’m glad I could help. And I think on the next release of the plugin I’m going to prevent the plugin from resetting the CSS upon deactivation so no one has to re-enter it upon reactivation. Thanks for the note.
blis : Thanks!
Hello,
Thanks for the plugin! It works fine for me on WordPress 2.8.5. It does not work on WordPress MU 2.8.5. (I tried it it on a vanilla WPMU install, with no other plugins, using default theme).
Any ideas?
Thanks!
RE: previous comment
I used visual mode as recommended above. I think at some point (perhaps a line wrap), the formatting kicks in and messes up the shortcode. I used HTML mode and had no problems.
Perhaps the WP vs. WPMU difference was triggered by the formatting in one and not in the other…
I’ve never used WPMU, so I haven’t tested it in that installation. I’m glad you got it to work, though!
works great! THX!
Hey, nice plugin.
Unfortunately, it is too simple for my requirements.
Another plugin that works very nicely is MapPress, which features same page driving directions, multiple locations, and multiple maps!
Oh hey, and this site is awesome! Very nice site! Love the style and design, and your portfolio is stunning.
:)
Using it for a client web site. I’m a copy writer by trade and was able to use your plug in with ease. Cheers. Much appreciated.
Thanks to everyone for the kind notes. I’m so glad the plugin is helpful to all of you.
Poe Jea : All of those great features available in MapPress are made possible because of the Google Maps API key required for that plugin. The purpose of this plugin was to provide a simple alternative for those who wish to show a map without all the bells and whistles and the complex settings that go along with them. Thank you for the note on our work!
Fabulous plug-in. True to it’s name. Simple? Indeed!
Thanks for making it easy!!!
I’ll definitely watch for more plug-ins and such from CNP.
Hello,
Will this plug-in work in Wordpress 2.8.6? If so, please do let me know.
Thanks!
Great plugin! Worked nice at this page. I was worried about the size of the map but I saw that it fit itself into the div. I used the #SGM div to put in new text coloring though, because it used my body text color which was white originally and didn’t show up against the bubble background. I’ll definitely this plugin on sites in the future.
Rene : Yes, it works in 2.8.6.
[...] Simple Google Map [...]
Hello,
I have seen the example of the plug-in and it looks great. Unfortunately, I can’t get it to work on my church’s website. I sure would appreciate any help you could offer in regards to getting this widget to display. It shows the box but no map. I am newbie to Wordpress, but I have gotten other widgets to work though. Any help you can offer would be greatly appreciated. The website is http://www.harvest-fellowship.com/beta. It is a widget called Map on the sidebar.
Thanks,
Rene Amador Jr.
Got a problem under IE…
Using with artisteer.
Thank you for your help
Rene : Unfortunately the conflict cannot be entirely resolved. It has something to do with the jquery and/or the css on the page. There are a couple workarounds.
1) Make the map widget the default widget to slide down when the page loads. If your theme doesn’t have an admin option for that, go to /wp-content/themes/wpchurch/scripts.js and change this line :
jQuery("#sidebar .widget:nth-child(1)").children(".widgetcontent").slideDown("slow");to this :
jQuery("#sidebar .widget:nth-child(3)").children(".widgetcontent").slideDown("slow");2) Make the map widget display when the page loads in addition to the service times widget. Add the following css somewhere :
#sidebar .SGMwidget .widgetcontent {display:inherit;}You could put it at the bottom of your style.css file or use the Simple Google Maps admin page. Go to Settings > Simple Google Map and select the checkbox “I want to edit the Simple Google Map CSS”.
Bertrand : Could I have a link?
Thanks for looking into my problem. I will try the recommendations that you suggested. Thanks again for your time and effort! I appreciate it very much.
I tried your recommendations, #2 to be exact, and the widget worked! Thanks very much!
Nice plugin, but I have 2 problems with it. First, I can’t get it to work in pages and articles, only as a widget. The code shows up as plain text.
And I’m not sure how to change the info bubble font color, as it is white on white. Can anyone help me, please?
Thank you.
Thank you very much for this great plugin, my clients love this Google map stuff.
Greets
Dave
Thanks for this very “simple” to use plugin. When you create a google map with API v3, the ’scrollwheel’ option is enabled by default. I didn’t want this behavior so I had to modify your code. What do you think about providing a way to control all possible options (scrollwheel, noclear, scaleControl, draggable, etc…)?
Alex : Do you have a link to an example of your problem?
Steph : I have not seen those features in v3, but now that I am aware of them, it is certainly possible they will appear in the next update of the plugin.
[...] new plugin, Simple Google Map, gives the possibility to add maps with the API version 3. Using a shortcode your insert in your [...]