Inline Google Maps for WordPress
There are several WordPress plugins for showing Google maps on blog pages exist, but unfortunately, they are all kind of do "too much" :) Like displaying your posts on a Google map, or something like that. What I needed is just a simple plugin which would allow me to embed a Google map into my WordPress blog pages, anywhere I want, preferrably with a single line of simple code. There was nothing like that so I have wrote my own plugin. It's easy to use and install, and works fine so.. here we go :)
A NEW VERSION 2.0 IS AVAILABLE! FOLLOW THIS LINK.
Inline Google Maps Plugin v1.1 for WordPress
(download link is at the bottom of the page!)
Description:
Displays Google Maps anywhere in your blog page post by including a simple html-like code into a post.
New in version 1.1
- much better support for embedded HTML in the 'desc' tag. Basically, as long as you use single quotes ( ' ) to enclose parameters, and use NO single quotes inside the 'desc' tag (you can use double-quotes just fine) – you can insert almost anything you want into the map marker balloon. Have fun :) Ah.. and here's a picture of the code used to display content of the map balloon you will find below on this page.
Features:
- Tested to work with WordPress 2.0.x
- Uses Google Maps API version 2.0
- Supports English and Japanese map captions (site-wide setting)
- Admin panel to set Google Maps API key and site-wide Inline Google Maps language
- Allows to set map width and height, as well as latitude, longitude and description of the marker on a map
- Supports setting of single marker for single map
- Supports unlimited number of maps in any single post (as long as "name" attributes are different for different maps)
Usage:
- To install, just put the gmaps.php file inside your wp-content/plugins folder and activate the plugin in admin panel
- After installing and activation, go to WordPress admin -> Options -> Inline Google Maps and enter your Google Maps API key, as well as set the default language for maps
- you need to do is just put a code like the one below anywhere inside your post
Here's in the tag in plain text (replace * at the beginning with [ and the last * with ] for this to work!!):*gmap name='mymap' lat='35.163757' lng='136.910709' zoom='17' desc='This is my Inline Google Map!'*And it will rendered into something like you see below:
[gmap name='mymap' lat='33.640531' lng='-84.425565' zoom='14' desc='This is my Inline Google Map! 
Now with support for better HTML']
- That's it!
Parameters:
- "width" : width of the map (defaults to 500px if not set)
- "height" : height of the map (defaults to 300px if not set)
- "lat" : latitude of place/marker
- "lng" : longitude of place/marker
- "zoom" : initial zoom (0 – least, around 20 – most)
- "desc" : description of marker (you can use HTML code, and it should work fine unless you use the ' symbols inside)
Important!! All parameters values MUST be encosed in ' (single quote mark) symbols, and not the " (double quote mark) ones! See the example above.
Notes:
- Your site should be UTF-8 encoded (although the plugin SHOULD work for other encodings). There is a problem with IE for Windows on Japanese Windows systems when page encoding is not set to UTF-8, but to ShiftJIS (errors, map is not loaded). Switch your page encoding to UTF-8 to fix the problem.
- Google Maps are known as crashing Internet Explorer on Windows if not put to specific place on the page to be called after the whole page is loaded. The Inline Google Maps plugin uses special technique to ensure the initialization of the map called at the right time without need to juggle with the code.
- I'll omit all the blah-blah regarding it is my first plugin for WordPress and the version is 1.0, and that I don't really have much time to work on it (created it for one of work projects). So I'm just asking you if you have any comments or suggestions – fire them off in the comments :)
September 8th, 2006 at 3:21 pm
Hy,
nice Idea, it is not possible to download a php-file. PLease make a phps or txt for the download.
thx and best regards.
September 8th, 2006 at 3:24 pm
yeah just noticed that a few mins ago :) thanks! you should be able to download the plugin now.
September 8th, 2006 at 4:21 pm
Nice – thx!
September 8th, 2006 at 4:23 pm
That is cool. I'm not an expert, therefore please allow me to ask: Is it allowed by Google to include their maps into your own pages?
September 8th, 2006 at 5:47 pm
Markus, basically, you can freely use Google Maps on your web pages. There are some regulations regarding it in Google's agreement you have to agree when receiving Google Maps API key though. But as I said, yes you are allowed to use their maps on your web pages.
September 9th, 2006 at 1:25 am
Mike, it's cool! Digg It.
September 13th, 2006 at 2:45 pm
Nice plugin.. one thing I was wondering.. Think its possible to create the map to not delete the previous marker from the previous post to show a "track"? SO for example one post has a mark in Los Angeles and the next post has a mark in New York.. its show the first map with only one marker and the next post shows the second second marker and of course a line connecting them. I pretty much need this plugin, its the only one I found that works with posting by email.
September 13th, 2006 at 2:58 pm
Ryan, thanks for the comment :)
As far as I understand, you need some kind of route charting feature which would work with WordPress. I think I have seen a plugin like the one you need – not exactly allowing you to connect markers, but just place them on "main" map of your site. Something.. Google Geo or something like that. You might want to look at it.
As for my plugin, currently it is oriented to make Google Maps as easy to use as possible for just simple ordinary usage when you need to place a map with a marker in a post or page. I will remember your suggestion, but honestly I don't think I'll do something about it until a feature like the one you asking for will be required to be implemented in one of my work projects :) I'm way too short on time most of the time :(
I hope even in its current implementation the plugin will be of use to you though :)
September 15th, 2006 at 10:01 am
Hey, great plugin. I like the simplicity as many others like this were really too complicated for a simple map.
I am having difficulty inserting HTML into the "desc" field. I'd really like to include some links, images, format text etc. in that area. Any way to escape out special characters? HTML works if I use no sinlge or double quotes.
Ironically, my main initial issue is that I have my stylesheet body color set to white sothe text doesn't showon the map baloon. But I'd really like to be able to include images and whatnot there as well.
Thanks for the great work and if you have any suggestions to help me I'd appreaciate it.
September 15th, 2006 at 10:20 am
hey jefff, thanks for the comment :)
I knew the desc field will cause some problems, but it worked for me so I decided to leave it as it is. But I guess I'll have to look into the problem and figure out a solution. Hopefully won't take too long.
September 15th, 2006 at 10:42 pm
hello Mike
Nice script. But i have a problem. The variables are empty. I see this in the source code in FF or IE.
!script type="text/javascript">
macdiggs_gmaps_addLoadEvent(macdiggs_gmaps_renderMap_);
function macdiggs_gmaps_renderMap_() {
macdiggs_gmaps_initMap("", "","", , "");
}
!/script>
I replace
September 15th, 2006 at 10:54 pm
hello Maarten,
it could be some kind of bug in the parsing code (should work in most cases though..)
Can you tell me the script your are calling the plugin with? Also, make sure you are using version 1.1 of the plugin which has better parser. You can use my email ( mike ) at [this server]
September 17th, 2006 at 12:15 am
Hi
I see the same empty variables (wp 2.0.4)
any ideas on this?
thank you
ajg
September 17th, 2006 at 12:20 am
solved: the problem is the quotation mark. the documentation page uses a specific sort of single quotation mark, not the one, which will make it work.
i exchanged the quotation marks
from ′
to '
which made it work.
However, the street names appear to be japanese…?
thank you
September 17th, 2006 at 12:27 am
ajg,
indeed there seemed to be a problem with bloody WordPress replacing all quotes with curly quotes. I fixed the problem and now everything should be fine when you just copy and paste the code from this post. sorry about problems :(
Street names are actually shown in the native language of the location the map is pointing to, which is Japan in my case as this is the country I live in :) Once you set a different location, you will see names in the language of that place.
September 17th, 2006 at 12:32 am
sorry to bother again. setting the coordinates produces a nice map now. but somehow the map and the marker are not excatly there where they should be according to the coordinates.
for example i used this code for atlanta airport (coordinates from wikipedia)
[gmap name='mymap' lat='33.38211' lng='-84.25396' zoom='17' desc='This is my Inline Google Map!']
somehow the map and the marker are near atlanta, but miles away from the airport.
what am i missing? thank you
September 17th, 2006 at 12:40 am
ajg,
I think you should use better precision when setting the coordinates. It seems that ony 5 decimal digits are not enough. If you use online google maps to find a location, and then get a "link to this page", you will receive an url containing number with 6 decimal digits precision. Give it a try – should work.
September 17th, 2006 at 11:44 am
thank you. i tried it with google maps and it worked for atlanta airport. however, coordinates taken out of google earth don't seem to work. how can i get the exact coordinates for a specific house out of google maps?
thank you
September 18th, 2006 at 12:49 am
ajg,
firstly, the coordinates for atlanta airport are: lat='33.640531' lng='-84.425565'
now, to find it you have to go to maps.google.com and find a place you need (search by name, or address). Once you found the place, you should manually center the map on the place. EVEN if it point to the correct place, just move map back and forth one pixel. This way Google will "forget" that it found the place by name, and will attach real coordinates to the map. Now you can use the "Link to this page" link on Google map, and once you observe the link you will get in your browser address bar, you can find coordinates there.
For example, in your case, I got the following string:
http://maps.google.com/maps?f=q&hl=en&q=atlanta+airport&ie=UTF8&z=18&ll=33.640531,-84.425565&spn=0.003202,0.007188&t=k&om=1
the coordinates part is: ll=33.640531,-84.425565. So you should enter the 33.640531 as "lat" parameter, and -84.425565 as "lng"
There might be probably an easier way to get coordinates, but the one I have described above works just fine for me always, so should be OK :)
Hope this helps.
September 19th, 2006 at 2:36 am
strange enough,
for me it does work on IE perfectly
but not on Firefox
here
http://www.unpacked.it/up_blog/2006/07/01/concorso-fregene-iniziato/
why ?
September 19th, 2006 at 3:34 pm
Daniele,
not sure why the plugin doesn't work for you, but it looks like you have a JavaScript error in some other script (livesearch.js), so you should first look for any possible problem there.
September 24th, 2006 at 12:18 pm
It is not working for me in Firefox either – though I have not checked with other browsers. API key installation seemed to have gone fine – went back and got a second one. But I just get a blank area where a map should be.
September 24th, 2006 at 3:28 pm
David,
i guess there are either some problems with your wordpress installation (that is, some plugin conflicts which though unlikely, but might happen), or the google map tag is not correct (which might be because you might, for example, mistype single quote as a apostrophe symbol). Please first check the map code, and then if it doesn't work, try to check with no third-party plugins installed (ideally, on a clean installation of wordpress). Should work :) If not, let me know and I'll try to check what's wrong in your case :)
September 24th, 2006 at 11:19 pm
I encountered the same thing for Firefox. In the first part of the string, I had a space in between my and maps ie. 'my map' I removed the space and made it 'mymap' and it worked fine then. I am still trying to figure out how to get info in that little pop up balloon.
September 25th, 2006 at 7:01 am
It is not the gmp code as I copied t straight from the site and it is single quoted – not curly or double (in case this post gets garbled):
[gmap name='mymap' lat='35.163757' lng='136.910709' zoom='17' desc='This is my Inline Google Map!']
I will try turning all the plugins off…
September 25th, 2006 at 9:43 am
David, thanks for the info. Looks like your google map string is just fine, so it's pretty weird you're experiencing these problems. Let me know how it goes for you after turning other plugins off.
Meanwhile, I'm thinking of an even easier way of embedding the Google Maps into WordPress, with much less chances for an error on user's side. Hopefully I'll update the plugin to the new code in next few days.
September 25th, 2006 at 9:56 am
It appears to be an issue with the theme – rather than any plugin clash. I am using Unsleepable_v.1.7 by Ben Gray (widget enabled). It works with Kubrick and other themes.
September 30th, 2006 at 2:16 pm
Mike, thanks for a great plugin.
Just a few questions;
1 – Is it possible to center the map on the wordpress page by default (ie modify the gmaps.php file)?
2 – Is it possible to enter and display multiple co-ordinates on the one map (ie through a loop function)?
Regards
Gary O
September 30th, 2006 at 6:30 pm
Gary,
glad the plugin is of use to you :) Thanks :)
1. regarding centering – the map is actually displayed inside a
2. nope, the plugin is too simple for displaying the coordinates in loop :) and it's unlikely i'll add this functionality, so although I'm sorry to say that, it is one marker per map now and in foreseeable future
October 1st, 2006 at 3:36 am
Any idea why the plugin wold not work with the Unsleepable_v.1.7 (K2 based) theme? I am alos having a problem with a GoogleMaps plugin for MediaWiki clashing with another plugin – it would seem that the JavaScript (or CSS???)is sensitive to clashes.
Would love to fix it – any ideas?
October 1st, 2006 at 8:40 am
David,
I have just looked into Unsleepable theme, and indeed the source of the problem is there. Google Maps uses the window's onload handler so that google map will get initted only after the whole page is loaded (in order to prevent problems with IE on Windows). One of the problems I have found is that onload event function definition just REPLACES!!!!!!!!!!!! the current one. Meaning that if there are already other functions to be called after page is loaded, the author of the Unsleepable theme just says "to go hell buddies, my functions are the only ones that matter", and just replaces them with his own. That not very bloody professional approach I must say.
Another problem is that the plugin doesn't check for already turned on gzip output compression handler when outputting javascripts to browser with its custom code, so there comes an error about duplicate compression attempt.
Saying that, the problem is in the theme and not plugin and you definitely should write the theme author about these problems.
October 1st, 2006 at 10:26 am
Thanks Mike – I"ll write to the guy.
Given that you took the trouble to look into this, and that php / JavaScript are newish languages to me – any recommendations as to what to hack out of Unsleepable?
From looking at it briefly myslef – some hacking seems in order – as I don"t need all the legacy stuff – but some pointers from the wise would help :)
October 5th, 2006 at 8:44 pm
Simple – and it works! Nice. Thank you.
October 5th, 2006 at 9:02 pm
David,
I would like to have a look at the theme once more, but considering I don't really have much free time, I don't know how realistic it is. Also, considering there is clearly a sort of "bug" in the theme, really, writing to that guy is the only good choice I think. Sorry :(
Dale, thanks :)
October 7th, 2006 at 6:27 am
OK – I will write to te Unsleepable author. In the mean time problem solved by switching themes :)
October 9th, 2006 at 4:21 am
Hey I was wondering if it was possible to have it start from the hybrid position rather than the map position. Is there any way to do that? Thanks.
October 11th, 2006 at 2:36 am
Hey Mike,
I got the same problem. (quotation problem)
I tried a lot of different single quote (straight, curly, etc) without success
Here is the code generated by your plugin:
macdiggs_gmaps_addLoadEvent(macdiggs_gmaps_renderMap_);
function macdiggs_gmaps_renderMap_() {
macdiggs_gmaps_initMap("", "","-71.2469", 17, "Lac des Roches!");
}
Seems ok, but no map displayed. Just a blank area.
Any ideas ???
October 12th, 2006 at 2:19 am
Hi Mike,
I see the same a Steven, but only in the Archive. All the other sites are ok… You can see it here: http://oliverjulian.de/?cat=7
October 12th, 2006 at 10:20 pm
I was desperately looking for something like what Chris wanted – in my case, to have satellite as default view instead of map because a great level of detail isn't usually available for non-US locations. In the end, it was a simple matter of inserting a single line in the code:
Original code: (line # 93 onwards)
map.setCenter(new GLatLng(lat, lon), zoom);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
New Code:
map.setCenter(new GLatLng(lat, lon), zoom);
map.setMapType( G_HYBRID_MAP ); // ADDED LINE
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
Of course, if you want the satellite view, the code would be:
map.setCenter(new GLatLng(lat, lon), zoom);
map.setMapType( G_SATELLITE_MAP ); // ADDED LINE
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
Thanks for a great extension, Mike.
October 13th, 2006 at 2:01 am
It would be good if this plugin directly took the ll parameter from the google maps URL for ease of entry. i.e. look for ll if it exists, use it, otherwise expect separate lat and lon. That way the URL
http://maps.google.com/maps?f=q&hl=en&q=atlanta+airport&ie=UTF8&z=18&ll=33.640531,-84.425565&spn=0.003202,0.007188&t=k&om=1
Could just have the ll=33.640531,-84.425565 part copied and pasted as is into the gmap entry. Much simpler when doing it repetitively.
October 13th, 2006 at 9:34 am
Thanks for the comments guys (and gals if there were any :)! I am reading the comments, and actually there is pretty big update to the plugin (oh well, the plugin is a tiny one, so I guess all updates tend to look big ;), which will address all of the problems and will make google maps really easy to use inside WordPress. The only problem is time, but I hope I'll find some time to work on it in the next few days.
November 7th, 2006 at 8:07 pm
I'm confused.
This post shows a different way to define maps, but points to your post to download the plugin.
Any explanation ?
December 7th, 2006 at 8:31 am
Just great! Thank you!
January 5th, 2007 at 12:22 am
Is there a way to only load Google API JS when a map is used in a post? The way it is now, ie Google scripts are loaded with every page with or without an actual map, even on just page reload… it *IS* slow for me…
February 1st, 2007 at 2:56 pm
[...] can also check Inline Google Maps plugin for WordPress if you want to use Google Maps on your WordPress-powered [...]
February 12th, 2007 at 2:00 pm
Is there a way to NOT show the marker on the map? Iwould rather just have the map show.
Thnaks,
Ron
March 12th, 2007 at 12:49 pm
Hi, am new to this mapping (uploaded yahoo! new map plugin that is supposed to use google's api setup called "Yahoo Static Maps" but cant get that going either – can you assist with yours? I have inserted the API (plugin activated) and found the google map at this url: http://maps.google.com/maps?f=q&hl=en&q=366+eddy+street+san+francisco+california+94102&sll=37.0625,-95.677068&sspn=29.854268,59.326172&layer=&ie=UTF8&z=16&ll=37.784775,-122.413702&spn=0.007258,0.021522&om=1&iwloc=addr
OKay, so what would the parameters be? I am totally stumped since there are 3 sets and lat/long don't appear spelledout…thanks for any help (need directions very much on this site at Blog@ctc – ps – where is everyone coming up with their lat/longs? I dont see any clues on google anywhere. thanks again for getting back to me. cf
March 12th, 2007 at 12:59 pm
cf,
looks like your parameters were just fine :) I can see your map in the comments. So it looks like the problem is not with the link but with the plugin on your site. Can you explain the problem in more detail? The map doesn't appear?
March 12th, 2007 at 4:47 pm
Hi Dan -I did not know the map would appear when I copy/pasted the link in the comment box above. My problem is not the full link (maybe I am not understanding what goes between the singe quotes), it is what is used for parameters – now that you ask, do we use the whole link? maybe that's part of the problem-thought we used your statement //*gmap name=’mymap’ lat=’35.163757′ lng=’136.910709′ zoom=’17′ …// (it is confusing what you say about * – what are they replaced with??) – Anyway, you say this code is used, but here is the URL without http:// so it doesnt become a live link: …//maps.google.com/maps?f=q&hl=en&q=366+eddy+street+san+francisco+california+94102&sll=37.0625,-95.677068&sspn=29.854268,59.326172&layer=&ie=UTF8&z=16&ll=37.784775,-122.413702&spn=0.007258,0.021522&om=1&iwloc=addr //
Didnt think the whole url was to be used?? Is it? Really confused esp. after reading that control/zoom coment toward the top. ok, thanks a lot.
March 12th, 2007 at 5:01 pm
cf,
I guess you're talking to me? :) I'm Mike, not Dan.
I guess I understood your problem. You are probably using the old version of the plugin. You might want to try the newer version which is available at the following page:
http://macdiggs.com/index.php/2006/10/13/inline-google-maps-for-wordpress-version-2/
There is also a link to a better maintained branch of my plugin which is developed by Avi Alkalay.
hope this helps.
Mike.
March 13th, 2007 at 5:53 pm
Is there someone with version 1.1 outhere? So i can download it, version 2.1 doesnt show up in my site (tried everyting, somewhere it stopped working when i uploaded the newest (overwritten the old one, stupid stupid stupid i know).
Kind regards,
Ivan
March 13th, 2007 at 6:11 pm
strange found something out, I use wordpress 2.0.5 and when i de-activate the google inline module. and i use a hyperlink on text or photo with this link: http://maps.google.nl/maps?f=q&hl=nl&q=http://www.creatief010.nl/wp-content/uploads/ief.kmz&layer=&ie=UTF8&z=15&om=1
the blog items remains empty, think it is a wordpress 2.0.5 glitz.
ivan
April 5th, 2007 at 3:02 pm
Great plugin….much appreciated!
April 9th, 2007 at 3:23 am
So, if your plugin works in the comments, it can be used to screw up the page layout, like this: maybe it should be disabled in the comments?
[gmap name=’mymap’ lat=’35.163757′ lng=’136.910709′ zoom=’17′ desc=’This is my Inline Google Map!’ width='2000' height='3000']
April 9th, 2007 at 3:29 am
Ok, either I did something wrong, or it's only after moderation that maps work, which is a good thing.
[gmap name='bigmap' lat='35.163757' lng='136.910709' zoom='17' desc='This is a big map' width='2000' height='3000']
May 20th, 2007 at 4:35 pm
[...] Visit [...]
July 19th, 2007 at 2:01 pm
This is a great plugin!! now I want to go back and put maps in every WP site I've done! Great Job and Thank You!!
October 13th, 2007 at 6:45 am
arrrggghhhh – I am so frustrated I don't know what to do. You seem really on top of this stuff.
I started a new job and inherited a web site to finish. The client wants a google map. I got ht API number and cannot get the dang map to show in WordPress. I have read about a gazillion blogs/advice/instructions on how to make this work but I guess my brain cannot compute. I need
1. Where do I download your plug-in to? Am I supposed to putit somewhere in WordPress?
2. I am building this web site on my computer and then uploading it to the server. Do I need to put the pluin there somewhere?
I don't want to drive you crazy but could you please help me?
As in a, b, c baby steps, indiot proof instructions like
1. Go here …..
2. Download this ……
3. Now download this …..
4. Now place this here ….
pleaee help
March 9th, 2008 at 11:44 am
Hey! Hope all is well.
I wanted to introduce myself and get your opinion on an idea I've conjured up.
I'm a video editor turned web novice and have recently fallen in love with everything web. I'm still very, very new.
I'm looking to let users utilize Google Maps to generate coordinates of certain locations, and apply a value to this point. (This has obviously been done)
Yet the trick I'm looking to pull is to create an export button that writes the points into a CSV (comma separated values) file in two different manners.
2)The first writes the points & values into a file stored on my database.
1) The other version writes the points to a file saves it to their desktop.
(And if I am successful in understanding Garmin's device communications I'd like to identify the attached device and write the file to there, so they no longer need to use POI loader.)
The whole idea is to develop a DB of speed traps, that can be later modified to communicate directly to devices "in the field". If reach that point I want to look into developing a communication system between radar detectors & GPS systems and the DB so I can track and mark live speed traps!
Big Ambition… I was wondering how complicated you thought the Maps part would be?
March 11th, 2008 at 1:59 pm
Hi Mike,
I don't understand exactly what you are proposing (what are these speed traps?), but I think that basically you will just need a custom solution for your problem. Google Maps API allows to construct pretty much anything with it, including solution for your problem. Shouldn't be too complicated either :)
June 19th, 2008 at 10:50 pm
@Mike Greenberg – an alternative plugin for WordPress is GeoPress. (http://georss.org/geopress) It actually stores the location for any blog post in the database, and we've talked about adding a GPX output. There is already GeoRSS and KML, so you can pipe that through Mapufacture (http://mapufacture.com) to get out a GPX, or even use the "export to GPS" which uses the Garmin Web POI loader to automatically upload to a plugged-in GPS receiver.