simplemaps
Articles Home

Add an Interactive Map to your WordPress Blog

17 Comments

One of the most common questions I get is whether it is possible to add an interactive Flash map to a WordPress blog.  Yes, it is possible.  In fact, this blog is powered by WordPress and you can see an example of an embedded map here.   But, it’s more difficult than you would expect because WordPress does a lot of url rewriting behind the scenes that messes everything up.  You can read more about this at the end of the post.  First, I’d like to explain how to embed a map in WordPress.  These directions will work with the free version of either the us flash map or the world flash map.  After you have customized your map and uploaded the necessary files to your server you’re ready to go.

1.  To embed a map in a post or page. The easiest way to do this is to use the plugin Kimili Flash Embed.  After you have activated the plugin, you will see a little flash icon appear in your toolbar when you are writing a post.

Clicking on this icon will allow you to embed your map.  You need to edit the following fields:

  1. Width and Height: 500 X 309 for a U.S. map and 550 X 349 for a world map.
  2. Flash (.swf): This is the location of the .swf file that you uploaded.  For example: http://www.flashmap.org/wp-content/uploads/2010/10/usmap.swf
  3. fvars: This tells the .swf where to find the XML file.  It should be “xmlPath=” followed by the location of the xml file.  For example for the US map this might be: xmlPath=http://www.flashmap.org/wp-content/uploads/2010/10/map.xml (Note: xmlPath is the name of the Flash Variable for the current versions of both the US and world maps).

That’s it!  Your map should be working.

2.  Add the map to a theme file.  If you want to add the map to a theme file you need to use a different approach.   For example, say you want to put a map on the homepage.  You need to edit index.php and insert the code from the documentation making two small changes:

  1. Replace the relative url of the .swf file with the  absolute url for the .swf file. For example, http://www.flashmap.org/wp-content/uploads/2010/10/usmap.swf instead of usmap.swf.
  2. Add ?xmlPath= to the end of the .swf url.  Then paste in the absolute url of the xml file.

An example of what the code should look like is as follows:

And in a form that you can copy/paste:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="340" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="wmode" value="transparent" />
<param name="quality" value="high" />
<param name="src" value="http://www.flashmap.org/wp-content/uploads/2010/10/usmap.swf?xmlPath= http://www.flashmap.org/wp-content/uploads/2010/10/map.xml" />
<param name="allowfullscreen" value="false" />
<embed type="application/x-shockwave-flash" width="550" height="340" src="http://www.flashmap.org/wp-content/uploads/2010/10/usmap.swf?xmlPath= http://www.flashmap.org/wp-content/uploads/2010/10/map.xml" quality="high" wmode="transparent" allowfullscreen="false" allowscriptaccess="sameDomain"></embed>
</object>

That’s it! Your map should now show up in your theme.

Why is this so difficult? Because, WordPress  is a content management system (CMS). When you write a new post it automatically creates a new webpage on your site.  This is really convenient, because you don’t have to mess HTML or uploading a new web page to your server.  However, what many people don’t realize is that the pages on your blog don’t actually exist. If you create a post called “dogs” there is no file called dogs.html on your server.  Instead, when some goes to http://www.yoursite.com/dogs your server directs them to a template file and fills that file with information from a database.  The actual template file that is being shown exists at http://www.yousite.com/wp-content/themes/templatefile.php.  So, when you embed the map the Flash file is looking for the XML file at http://www.yoursite.com/map.xml when it should be looking elsewhere.  To fix this problem, we have to tell the Flash file exactly where to find the XML file using an absolute url.  Both of the solutions above do just that.

If you have any questions about the process, leave a comment or contact us for support.

17 Responses to Add an Interactive Map to your WordPress Blog

  1. Hiya! Just a short note to say that apparently WordPress prevents uploading XML files directly for security reasons; I’m trying to find a workaround for that. In the mean time, the workaround is to upload the XML manually via FTP to the appropriate place…

  2. Oops. Apparently you need to tell WordPress that you wish to allow XML as a valid file type. The easiest way to do that is to add the following plugin:

    http://wordpress.org/extend/plugins/pjw-mime-config/

  3. Scott says:

    Thanks for the info Chris I am starting a local blog about arc flash study for our clients and it is going to make it easier to get people to come to our office by being able to find us. This was pretty easy to do and you really did a great job of making it point by point easy to follow. Thanks again.

  4. Mark says:

    Chris, thank you for this post. Your info was one of the only sources i was able to find with such specific instructions to get this completed. However, i am still having some issues? i downloaded a flash map from http://www.flashusamap.com as a free trial and was able to post this succesfully but as a trial the maps interactive capabilities were disabled. I purchased another flash map from flash-map-one and everytime i try to upload it, it comes up with “load XML error”…..but i know im doing the code correct because i have that other flash map on the same page as a test andiits working fine. I’m thinking that maybe it has something to do with the “.as” file not being included? this file seems to be the flash file that contains all the coordinates and mapping within the image? any ideas for me if your instructions above arent working?

    thanks Chris

  5. Chris says:

    Hi Mark,
    These instructions are specific to the FlashUSAmap.com map. They may not work with the map you purchased elsewhere because that map either uses a different name for “xmlPath” or doesn’t provide the functionality to work with WordPress. If you contact them, you should be able to reference this blog post and they should either tell you what word you need to replace “xmlPath” with, or they should be able to edit the source code to make their map work on your site. Best of luck.
    Chris

  6. Pingback: Flash Europe Map | Flash Map: A blog about interactive maps

  7. Cameron Gamble says:

    Chris,

    Thanks for the great post. My question is, can I use this map in such a way that allows my members to click on their state and city and then upload info for all to see in their area? Is it interactive so that members can essential post “stuff” specific to their location?

  8. Jack says:

    Hey Chris!

    How do you get each state of the map to link to a specific url?

    I tried going into the map.xml and replace the “put html here” with http link. All it does is show the url in text but you can’t click on it.

    any suggestion?

  9. Paulie says:

    When using the world map, I notice a significant amount of white space above and below the continents. Can I reduce the amount of white space above and below the continents, and thereby reduce the overall height of the world map without changing the proportions of the map content?

  10. Yael says:

    cannot seem to upload the xml file to wordpress. The above plugin didn’t seem to work for me?

  11. Extra Oyun says:

    Hi !
    Nice blog. Can not seem to upload the xml file to wordpress. The above plugin didn’t seem to work for me?

  12. SID says:

    Frankly, What Interactive map we wanted was to place an animated flash icons or GIFs. We did two things 1) collect a map of the area of interest which in our case was not big 2) figure out a way to place animated GIF with click-able links – This is what we made http://my1st.in/greater-noida-omaxeitc/ . Soon would require to place info on a Bigger Area map then will see how to make own Zoomable Map. Till then ta ta ..

  13. Thanks for the info Chris I am starting a local blog about arc flash study for our clients and it is going to make it easier to get people to come to our office by being able to find us. This was pretty easy to do and you really did a great job of making it point by point easy to follow.
    Thanks again.

  14. Way cool! Some very valid points! I appreciate you writing this article and the rest of the website is also very good. I hope you don’t mind, I bookmarked Add an Interactive Map to your WordPress Blog | Flash Map: A blog about interactive maps at Dzone so my friends will see it too.

  15. nice post effective and informative please visit http://www.deetyasoft.com for virtual number

  16. very nice post liked reading it got very effective information thanks for sharing details on virtual assistant http://www.ivrguru.com for virtual assistant

  17. This is a good post, I really enjoy the information. I wish to come again on your site in the future. Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>