Google Maps Plugin for WordPress

Avi Alkalay Web 2.0


This software will let you easily render Google Maps anywhere on your blog as a web service. It also includes code for easy integration with WordPress blogs, but what the code does best can actually be used with any other blog system or plain web page.

This plugin will let you easily create from simple maps with one marker and a text balloon, to complex multimarker maps with hypertext balloons as this page.

Installation on WordPress Blogs

Install it as any other plugin (unziping plugin files under [WORDPRESS_ROOT]/wp-content/plugins directory and activate it in WP Plugins admin tool). Then go to the Google Maps API key signup page, get an API key for your website, and install it in the plugin’s admin page under Options.

Google Maps WP admin page

Creating Simple Maps

This is the easy part.

  1. Go to Google Maps, find the spot you want to show, select Map, Satelite or Hybrid view buttons, double-click on the most important point on the map to centralized it, and define the zoom factor you want.
  2. On the left-top corner of the map, click on the “Link to this page” link, and copy your browser’s location to the clipboard. You can do the same for complex maps created on the My Maps section of Google Maps website.

    Link selection

  3. While creating the post, select the text that will be displayed on the map marker, and create a link with it.

    Select text for the map's mrker

  4. Paste the map URL on the Link URL field, and on Title write “googlemap“.

    Link creation dialog

  5. Continue editing your post and publish.

You are done. This example will render a map like this (don’t forget to click on the marker to see the balloon):

TuxThis will be a map’s marker text with an image.

Passing Parameters

You may have noticed that on the Title field above we used other commands. In fact you can use the following switches, separated by “;” to control the way the map will appear in your site.

googlemap
Instructs the plugin to transform this link into a Google Map area. If not used, the plugin will not work on the link and you’ll get a plain link to the Google Maps site.
nocontrol or nocontrols
Renders a map without the zoom and scale controls
nomarker or nomarkers
Renders a map without the marker with the information balloon.
w:SIZE_IN_PIXELS and h:SIZE_IN_PIXELS
Defines the size of the map area in pixels.
w:PERCENT% and h:PERCENT%
Defines the size of the map area relative to full width and height.

Since other plugins may use the title attribute, you can also put these commands in the rel attribute and activate this functionality in the plugin configuration dialog.

Some examples for the Title (or rel) field:

googlemap
Renders a map with controls, marker an default sizes, as specified in the plugin’s admin page, under WP Options.
googlemap;nocontrols;w:300;h:200
Renders a 300×200 map with marker but no zoom controls.
googlemap;nomarker;nocontrols;w:100;h:100
Renders a small 100×100 map without marker and zoom controls.
googlemap;nomarker;nocontrols;w:100%;h:300
Renders a maps that fills the full width available with a 300 pixels height, without markers and zoom controls.

Creating Complex Maps

This procedure requires some HTML knowledge, but will let you create maps with multiple markers, and results as good as on this post.

The proccess consists of creating a definition list (<dl> XHTML element) of a center point and markers with their text balloons.

Learn by example. Pay attention to the following complex map, and select all its markers to see the text inside their balloons:

Center of map
map
Center of São Paulo
map
Flea market
map
Traditional market
balloonless marker
map
Japanese town

It was generated by this (X)HTML code:

<dl title="googlemap;w:100%;h:400">
	<dt><a href="http://maps.google.com/?z=15&ll=-23.550887,-46.631985&om=1">Center of map</a></dt>

	<dt><a href="http://maps.google.com/?ll=-23.550592,-46.633122">map</a></dt>
	<dd><strong>Center of São Paulo</strong></dd>

	<dt><a href="http://maps.google.com/?ll=-23.547563,-46.631041">map</a></dt>
	<dd>Flea market</dd>

	<dt><a href="http://maps.google.com/?ll=-23.54535,-46.627693" title="marker">map</a></dt>
	<dd>Traditional market</dd>

	<dt><a href="http://maps.google.com/?ll=-23.54715,-46.637263">balloonless marker</a></dt>

	<dt><a href="http://maps.google.com/?ll=-23.555195,-46.635547" title="marker">map</a></dt>
	<dd>Japanese town</dd>
</dl>

So the structure must folow these rules:

  1. Create a definition list (<dl>) and put map-related commands and parameters on title= attribute as specified above.
  2. First definition term (<dt>, first green line) must contain only a link to Google Maps site, to define its center and other map parameters. The text for the link is ignored when a map is generated, so use a text like “Center of Map” so people accessing your posts outside your blog (for exemple, through feed readers) will have a clue what is this link for.
  3. The rest is a pair of terms and definitions (<dt> and <dd>) with the marker position (as a Google Maps URL) and the text on the balloon respectivelly.
  4. You can create a balloonless markers specifying only a <dt> without a <dd>.
  5. Whatever you put inside the <dd> block will appear inside the balloon. Put links, images, lists, tables, etc.

Using Google My Maps or KML and GeoRSS maps

You can use Google My Maps service to create and manage colorfull markers, paths, regions and the text inside the balloon, and simply use the “Link To This Page” link to embed the map in your page as described above.

The plugin will use the KML-exported version of your map to create the balloons, markers, regions and paths. Simply exaplained, KML is XML dialect that contains all meta information of your maps: markers positions and images, line colors, balloon texts, etc. You can create KMLs with tools like Google Earth, Goole Maps or even using a plain text editor. GeoRSS format is also supported but can’t be used for paths, regions and markers colors, only plain geographical positions.

The good news is that you can embed KML-maps from any source, and not only from Google My Maps. You can upload a KML file to your web server and pass it to the plugin to render it. Here is an example on how to do it in a more advanced way:

<dl title="googlemap;w:100%;h:400" id="my-wonderful-map-with-kml">

	<dt><a href="http://maps.google.com/?z=7&ll=-23.550887,-46.631985&om=1">Center of map</a></dt>

	<dt><a title="kml" href="http://my.server.com/spots-on-the-farm.kml">markers</a></dt>

	<dt><a title="kml" href="http://my.server.com/spots-on-the-beach.kml">more markers</a></dt>

</dl>

This example will render a map centralized on geo position -23.550887 -46.631985 and overlay it with two KML specifications: spots-on-the-farm.kml and spots-on-the-beach.kml. Note the required title=”kml” parameter that indicates to the plugin that this is KML or GeoRSS overlay and not a plain marker position.

Positioning and Style Possibilities

To have better control over the map positioning and overall look, you can manually edit the HTML code while posting, including style and class attributes. Find the <a> or <dl> tag for your link and use this examples to get some clues:

  • <a style=”float:left; width:300px; height:300px;” title=”googlemap”
    Renders a 300×300 map floating on left of the paragraph. See example.
  • <a class=”photo” style=”float:right;” title=”googlemap”
    Renders a map with default dimensions floating on the right of the paragraph, with style class photo, that in my theme defines some margins and borders.
  • <dl style=”visibility: hidden;” title=”googlemap”
    Using style=”visibility: hidden” will make the browser hide the map definititon text while loading the page. Seconds later, when the plugin renders the maps on your page, the hidden blocks will finaly appear as maps.

The HTML attributes id=, style= and class= you specify will be inherited by the generated map.

In addition, a CSS class called map will be added to all maps, and to all balloons a CSS class named balloon will be assigned. This way you can define your own style for these elements.

Troubleshooting

Some common problems people have, and solutions.

  • Map does not appears or appears on a different geo locationMake sure the Google Maps URL you are pasting is correct and complete. A correct URL must have the following parameters: ll= required to define latitude and longitude for center of the map or a marker, om= option to show or not the overview map on bottom-right, z= required to define the initial zoom factor, t= option to define if map is plain, satellite or hybrid, msid= required if you are pasting My Maps from Goole Maps website.
  • Problems with &You should not have problems with & chars being modified by the WordPress editor. If so, it means you are working with complex maps. Yes, WordPress WYSIWYG editor sucks a little bit. So if you are working with complex maps, you should switch to the plain text editor. You can’t just open the post editor in WYSIWYG and select the plain text editor after that. The mess was already done. You will have to edit your profile under Users->Your Profile and deselect the “Use the visual editor when writing” options when you edit that post. Once it is saved you can reselect it again.
  • Grey area instead of markers, or simply don’t have markersGoogle Maps API uses a lot of CSS style to render its maps on your page. This problem is caused by a conflict between CSS needed by Google Maps and your page or theme defined style. Use Firefox’ DOM inspector to drill down into your document structure until you find the markers XHTML nodes. Then switch to CSS Style Rules mode on the inspector, then select a rule that was defined by your theme, on the top-right box, then delete “background-” related properties on the bottom-right box, one by one, until the marker appears. This will indicate you which property you have to delete from your theme’s or own style.css file.
  • Problems displaying the map on IE7

I still don’t know what is the problem here. I rarely use Windows nor IE, so I can’t reproduce it. This is probably caused by the same CSS conflict above. If you can correctly see the map on this page with IE7, indicates that the problem is specific to your page and related stylesheets. You must debug your CSS styles.

No WordPress ?

If you use other blogging systems, or just want a simple way to create maps on your pages you can still take advantage of this plugin.

Download the plugin, unzip, install its content somewhere on your server accessible from the web. Then edit the HTML source of the pages you want to render maps, find the <head> block, and include the following code inside of it:

<!-- Google Maps Plugin (begin) -->
<!-- http://avi.alkalay.net/2006/11/google-maps-plugin-for-wordpress.html -->

<!-- Google Maps API -->
<script src="http://maps.google.com/maps?file=api&v=2.x&key=MY_API_KEY" type="text/javascript">
</script>

<!-- Google Maps Plugin logic -->
<script src="http://my.site.com/path/to/plugin/googlemapsPlugin.js" type="text/javascript"></script>

<!-- Google Maps Plugin initialization -->
<script type="text/javascript">
	//<![CDATA[

	MapPluginInit(
		/* Default maps width  */          500,
		/* Default maps height */          300,
		/* Use rel instad of title? */     false);
	//]]>
</script>

<!-- Google Maps Plugin (end) -->

Change the red parts to fit your needs. Every page containing the above block will be able to render simple and complex maps as described.

About

This plugin was inspired on Macdiggs Google Maps plugin, but was completely redesigned, rewritten, has much more functionality, made more user friendly, has cleaner code and is more standards oriented. The former Macdiggs’ plugin will not receive updates anymore so this is the plugin you should be using.

685 thoughts on “Google Maps Plugin for WordPress”

  1. Hi Avi

    got the map to work OK thanks. What can I say? sily mistake, little time…sorted it in the end. Thanks for the hard work!

  2. Pingback: » Ricerca Plugin
  3. Pingback: Google maps | NTX & Co
  4. Pingback: Google Maps prima | wordpressisti
  5. Pingback: » Embedded Google Maps Mr Reid’s Blogging Sandpit
  7. Pingback: OpenJason » Blog Archive » 666 Tools, Utilities, and … tools, utilities..

  8. Hi,

    I investigated further. Any theme I use gives me the same problem in IE7. It looks to me that it’s a plugin related problem and not a theme related problem.

    I’ve now deactivated the plugin which I really regret as it is a great effort…

    Any thoughts?

  9. Hi,

    Thanx for a great plugin, will be great at my travelsite http://travelaroundtheworld.se :).
    Works perfekt in firefox, safari and opera but in iE6 and iE7 the hole blog stopped to work then I have the plugin activated. Don’t know why 🙁

    I have wordpress 2.2 installed

    Do you have some tips to help me?, will start next travel at 31th of oct in 6 month =)

    Thanks

    Daniel Peterson

  10. Dear Avi, thanks for this awesome plug-in. I found one of reasons why Google Map doesn’t show on my blog. The WYSIWYG editors (Both FCK or TinyMCE) modified the Google Map link automatically. For example: “http://maps.google.com/maps?f=q&hl=en” became “http://maps.google.com/maps?f=q&hl=en” The “&” symbol be compiled into “& a m p ;” May I have your any suggestion for that? By the way, what WYSIWYG editor do you use?

  11. Dear Avi,

    First I would like to thank you for this great plugin!

    When trying to upgrade your Google Maps plugin from version 5.3 to version 5.6, it stopped working for me. I’m using WordPress 2.2.3 and Internet Explorer 7 to view my website. I’m also not able to view the demo page you’ve indicated in the ‘Problems displaying the map on IE7’ part of the Troubleshooting section. I cannot view the maps on this page with IE7 in both Windows XP and Windows Vista. All this leads me to believe you changed something in between version 5.3 and 5.6 that caused compatibility with IE7 to break. Please take another look at this issue. Even though you might not be using Internet Explorer, the viewers of websites using your plugin are, and the number will only increase (at least up to 50%), as IE6 users upgrade their browser.

    For now I downgraded to version 5.3.

  12. P.S. If you send me version 5.4 and 5.5 of the plugin, I can narrow down for you where it went wrong with IE7 compatibility.

  13. Love the plugin, however, activating it in WordPress 5.3 seems to cause problems with IE7, the page no longer displays at all. I looked at the source code and the only thing on the page was the script or one of the scripts from Google Maps or for Google maps. This happened wither the script was set to be in the header or the footer.
    It is hard for me to tell if this is a problem with IE7 itself, a conflict with the new 5.3 version of WP, the theme “Leia,” or perhaps the other plugin on the page Event Calendar (3.1.1._rc1). My guess is either changes to 5.3 or it is a bug in IE7 itself… seeing how many others have problems with it in IE7, I guess that.
    Great plugin though Can’t wait for it to work with IE7.

  14. Brian A. Thomas, I assume you are referring to WordPress 2.3, instead of 5.3.

    I just upgraded to WordPress 2.3 myself, and the plugin version 5.3 (not downloadable anymore) works fine. Only the newest plugin(s) have compatibility issues with IE7.

  15. I just upgraded WP 2.3 and plug-in for googlemap is 5.5. I still can see anything on when browsing with FF2.0.0.7. Is there something wrong?

  16. About that IE7 thing – I just found out that I had a severe case of it, which was making the page disappear altogether with the plugin activated. Running the page through the W3C validator pointed out a line in the footer that isn’t valid – it’s in the section marked “Google maps SEO” (near enough, I’ve deactivated the plugin for now), which includes a “link” element in “noscript” tags, which isn’t allowed. Firefox was rendering the page OK, but IE7 totally died. Deactivating the plugin (version 5.6) allowed IE7 to render the page normally.

    That’s *any* page on the site, not necessarily anywhere that’s got a google map included.

    Hope this helps fix the plugin…

  17. Hi,

    I’ve downloaded and installed your plugin but I ran into some problems. WordPress seems to filter the “&” signs in the URL and replaces them with “& amp ;”. Then your plugin doesn’t work.

    I’ve searched through all the wordpress forums but haven’t found anything on how to stop wp from filtering these & signs.

    I tried the WYSIWYG, the code view and the plain editor. None worked.

    Any ideas?

    -thomas

  18. Released version 5.7 of the plugin. Changes:

    – Fixed the IE6 and IE7 hang problem caused by a “defer” tag included in version 5.6. The “defer” tag is used to increase performance while loading the page. But it is not needed anyway, since the plugin is loaded in the end of page.

  20. Great work Avi! I can confirm that version 5.7 (WordPress still thinks it’s version 5.6) works perfect with IE7. You can see it in action here.

  22. Pingback: WordPress应用技巧 : 雨豪博客
  23. Pingback: Plugin Tip - Google Maps Plugin with Wordpress K2 Theme -
  24. Pingback: [procksi] » Blog Archive » GOOG Launches Map Mash-up of SoCal Fires

  26. I’ve just started playing around with this in preparation for a holiday next year, and was wondering if it is possible to *just* show the zoom controls.

    In the example on my page I would like people to be able to easily zoom out to see where the location is.

    Thanks, good work!

  27. hi!

    i use the “mandigo” theme (my blog is behind the “homepage” link) and unfortunately only have a grey box. everything is working and loading, except the map-images… if i switch the custom css of the theme off (web developer toolbar in firefox), the google map is shown correctly. so, before i dig through this complex php/css file, could someone tell me a workaround for this? avi, could you experience this also with some other themes?

    thanks in advance,
    regards,
    thomas

  28. Thomas, several themes with broken CSS suffer the same problem.

    Fix your CSS or switch to another theme.

  29. regarding post #319: for all users with “mandigo” theme, the following style definition causes problems:

    p img { max-width: 95%; }

    if you comment/delete this in your style, the inline google map will display correctly. in my case, the missing max-width definition doesn’t have any effects on my articles…

    @avi: i investigated a lot of time in making YOUR plugin work, because it has the functionality and easiness i like… i couldn’t find another plugin for google maps, which could be handled this easy. great work!

  30. Hi Avi!

    This would be great if I could get it to work!

    Also having problems with WP changing the “&” (see Thomas on Post 312; and Arthur @ 305:

    have you any suggestions, as I cannot get anything to display inline.

    Thanks for a great plugin
    Peter

  31. Nice plugin!

    Just want to inform you that Google Maps has new display types. The normal map style, the normal satellite style and then a satellite with labels style (former hybrid I suppose) and a new called surface style which shows the hills and mountains better.

    Bye, Jens

  32. Pingback: Traveling Down the Information Backroad » Google Maps Plugin for Wordpress

  33. Hey AVI… thanks for a sweet plugin… a few questions though…

    works great when using the default theme – but not so great when you want to work on your own theme.

    http://www.joshuadavis.com/map/travel-map/

    which doesn’t display inline

    so…

    what exactly needs to be added to get it to work with your own theme ? I thought there we’re maybe DT and DL tags in the default/kubrick CSS… but nay… so what triggers are missing ?

  34. Joshua, its not working because the plugin block is not being included in the generated page.

    Please check if you theme has a <?php wp_footer(); ?> call. I have it just before the </body> in my footer.php theme file.

  35. avi – you said it would take me 3 minutes… it took me 20 seconds.

    🙂

    it’s working lovely. many thanks.

    I had no idea you had to retain… … before the body tag… I thought that was just a standard call to a footer for visual aesthetic – I had no idea it server a greater calling.

  36. Ok, I like this plugin, however I got a little problem.
    I did everything as described here under “Using Google My Maps or KML and GeoRSS maps”.
    And what I have is a plain link to the kml file.

    And while I wrote the comment I solved the mystery.
    The Click Counter pluging will “hijack” the google link, and the map will not show up.

  37. Hi Avi.

    I’m very excited about getting your plugin on my site! I am running into a little trouble though. I am having the same problem with the ampersand (&) in the Google Maps link being changed to “&”. This is the same problem noted in post 322, 312, and 305.

    Help, please!

    Tiffany

  38. Pingback: Bloggage by Tanya » Blog Archive » The Gateway to God

  39. hey avi… I sent you a reply – but thought maybe this was the best place to post.

    http://www.joshuadavis.com/map/

    MAC Leopard / Safari = great but in Firefox (current version) I get an unresponsive script error – and it never loads. maybe I need to do something additional other than the wp_footer call ?

    thanks for all your help,

  40. Hi Avi,

    Great plugin. I am using WP2.3.1 and Inline Google Map plugin v5.7.

    I have created a page for displaying the map but for some reasons the map did not show up. Instead what I have is a map link that points to the map on Google.

    Can you check out my map page and advise what I need to do to fix it?

    http://makarios.com.sg/map/

    The map is showing up correctly when clicked.

    I have tried checking “Get parameters from rel” and “Activate plugin in page’s header” but doesn’t seem to work.

    Any ideas what’s missing?

    Thanks!

  41. Pingback: Cartesianos Blog Beta » Blog Archive » Plugin para Google Maps
  42. Pingback: knewd » Blog Archive » links for 2007-12-16

  43. Avi –

    I installed your plug-in, but when I link one of My Maps, I get the route line, but the map itself is just a grey background. When I tried the macdiggs plug-in, I got the map but no route or other added info from My Maps map.

    Here is the link to my map test page: http://mid-atlantic-aroc.com/?page_id=142

    I thought it was CSS style conflict at first, but the other plug-in diplays the base google map fine.

    Any ideas? Thanks for your help.

    Rick

  45. Pingback: Where are we now? : jacq design blog station

  46. The map displays on my work computer with IE6, but not on my home computer with IE7 (I just get a grey square – but I do get the route line I entered in My Maps). Appreciate some help from anybody else who has this problem.

    Thanks

  47. Pingback: Windows Update Problems » Blog Archive » Google Maps Plugin for WordPress :: Avi Alkalay
  48. Pingback: Wellington Rundreise » Meine Reise

  49. Thanks for this plugin, so far seems to work with no problem, just a question.
    How can I use my own marker icons, Marco in one of his comments said that adding some code to the plugin core file does the trick, it doesn’t work for me.

    Reading google’s api docs the code to display custom markers is a little different and I don’t know how to implement it, any help is greatly appreciated, thanks.

Comments are closed.