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.
    version11.jpg

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

    WordPress Inline Google Maps settings
  • you need to do is just put a code like the one below anywhere inside your postInline Google Map - inserting into postHere'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! RainbowNow 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 :)

Download:

61 Responses to “Inline Google Maps for WordPress”

  1. Frank Says:

    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.

  2. mike Says:

    yeah just noticed that a few mins ago :) thanks! you should be able to download the plugin now.

  3. Frank Says:

    Nice – thx!

  4. Markus Says:

    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?

  5. mike Says:

    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.

  6. remediggs Says:

    Mike, it's cool! Digg It.

  7. Ryan Says:

    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.

  8. mike Says:

    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 :)

  9. jefff Says:

    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.

  10. mike Says:

    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.

  11. maarten Says:

    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

  12. mike Says:

    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]

  13. ajg Says:

    Hi

    I see the same empty variables (wp 2.0.4)

    any ideas on this?

    thank you
    ajg

  14. ajg Says:

    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

  15. mike Says:

    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.

  16. ajg Says:

    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

  17. mike Says:

    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.

  18. ajg Says:

    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

  19. mike Says:

    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.

  20. Daniele Says:

    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 ?

  21. mike Says:

    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.

  22. David Bovill Says:

    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.

  23. mike Says:

    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 :)

  24. Mark Says:

    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.

  25. David Bovill Says:

    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…

  26. mike Says:

    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.

  27. David Bovill Says:

    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.

  28. Gary O Says:

    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

  29. mike Says:

    Gary,
    glad the plugin is of use to you :) Thanks :)

    1. regarding centering – the map is actually displayed inside a

    , which you can in turn place into some other element and center it the way you need. The functionality is not included into plugin
    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
  30. David Bovill Says:

    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?

  31. mike Says:

    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.

  32. David Bovill Says:

    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 :)

  33. Dale Says:

    Simple – and it works! Nice. Thank you.

  34. mike Says:

    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 :)

  35. David Bovill Says:

    OK – I will write to te Unsleepable author. In the mean time problem solved by switching themes :)

  36. Chris Says:

    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.

  37. Steven Says:

    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 ???

  38. olli Says:

    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

  39. vistasp mehta Says:

    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.

  40. Brodie Says:

    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.

  41. mike Says:

    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.

  42. Avi Alkalay Says:

    I'm confused.

    This post shows a different way to define maps, but points to your post to download the plugin.

    Any explanation ?

  43. Markus Beschoner Says:

    Just great! Thank you!

  44. aRchIteKturA Says:

    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…

  45. macdiggs.com » Blog Archive » Easy Inline SWF 1.0 Plugin for WordPress Says:

    [...] can also check Inline Google Maps plugin for WordPress if you want to use Google Maps on your WordPress-powered [...]

  46. Ron Says:

    Is there a way to NOT show the marker on the map? Iwould rather just have the map show.

    Thnaks,
    Ron

  47. cf Says:

    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

  48. mike Says:

    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?

  49. cf Says:

    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.

  50. mike Says:

    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.

  51. Ivan Says:

    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

  52. Ivan Says:

    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

  53. Anze Says:

    Great plugin….much appreciated!

  54. Blahblah Says:

    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']

  55. Blahblah Says:

    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']

  56. WP Plugins DB » Blog Archive » Inline Google Maps Says:

    [...] Visit [...]

  57. Ken Fluharty Says:

    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!!

  58. Susan Dancy Says:

    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

  59. Mike Greenberg Says:

    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?

  60. mike Says:

    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 :)

  61. Andrew Turner Says:

    @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.

Leave a Reply