[GIS] How to insert a cartoDB map using Cartodb.js into a wordpress site

cartocarto-jswordpress

I've been looking at http://developers.cartodb.com/documentation/cartodb-js.html so that I can put a customized map into a wordpress site.

I've been copying and pasting the following code into the wordpress text editor. However, it is not displaying a map on my website.

<div id="map"></div>
<script>
cartodb.createVis('map', 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json');
</script>

How do I display a map in wordpress, using cartodb.js?

Best Answer

If you want to do this in your own hosted version of a Wordpress site, as @iriberri has suggested, I will assume you have your own hosting account for files separate from your Wordpress site, that is, you can create directories on your web server and host HTML, CSS and JS files, etc.

Assuming this, you should be able to create the map you want to embed on your site as a full-frame HTML page (ie. the map goes to 100% width and height of the HTML page), and include all the custom functionality you want to show on the wordpress page in which the map is to be embedded (ie. the code you referenced above).

Once this simple map page has been built, upload the files to your web server in a directory structure like http://yoursever/simplemap/myMap.html

With this HTML page built, you should, again as iriberri suggested, use an iFrame to simply embed the myMap.html into your Wordpress post like this:

<iframe src="http://yoursever/simplemap/myMap.html" height="100" width="200"></iframe>

That should do it!

Related Question