In the project I am working on a user can create an event with also a postal code information and address. I want to create a page where these events are all shown on a map, how can I do this with Civicrm or another wordpress plugin? The events are in Civicrm db.

  • 1
    Not posted as an answer, since you ask about WordPress, but in Drupal this is relatively easily handled with Views and a mapping plugin that can send coordinates to Gmap, OpenLayers, Leaflet, etc.
    – choster
    Sep 8 '15 at 18:25

I don't think there's anything out of the box that does this. But if you're comfortable with PHP/JavaScript then it's not too tricky.

I'd create a WordPress template for that particular page, grab the event data using the API, and manually populate a google map. Untested code based on a similar thing we did recently:


Template Name: Your Template



<script src="http://maps.googleapis.com/maps/api/js"></script>
<!--needs loading before the footer-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>


//initialising CiviCRM Plugin
if (!civicrm_wp_initialize()) {
        return '';

require_once 'api/api.php';

//Grab data from API
$result = api call

//print json-encoded version
echo "var events = " . json_encode($result);


<script type="text/javascript">

//set up the map
var map;

function initialize() {

    //map properties
  var mapProp = {
    center: new google.maps.LatLng(53.156594, -3.847324),

  //set up map
  map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

  //loop through event data
  jQuery.each(events.values, function(key, data) {

  //get lat and long
  //this is made up - adapt for where the lat/lng actually are in the data
  var latLng = new google.maps.LatLng(data.geo_code_1, data.geo_code_2); 

 //create marker for each event
        var marker = new google.maps.Marker({
            position: latLng,
            title: socName,
            map: map



//initialize the map
google.maps.event.addDomListener(window, 'load', initialize);


            <h2><?php the_title(); ?></h2>
            <?php wp_reset_query(); ?>
            <div id="googleMap"></div>
            <?php the_content(); ?>

<?php get_footer(); ?>

Regarding the API calls, it looks like you'd need a few:

This'll get you the event title and its 'location block id':

$resultEvent = civicrm_api3('Event', 'get', array(
  'sequential' => 1,
  'return' => "loc_block_id,title",

you'd then need to look up the location block id for each event:

$resultLocBlock = civicrm_api3('LocBlock', 'get', array(
  'sequential' => 1,
  'id' => id from first query,

this'll then return an address ID, which you can look up with:

$resultAddress = civicrm_api3('Address', 'get', array(
  'sequential' => 1,
  'id' => address id from second query,

and the resulting array will contain the latitude and longitude.

It might be possible to do all the above in one go using chaining.

  • Be cautious about loading JS files directly into the template on WP; you could be loading duplicates. I recommend checking this out: codex.wordpress.org/Function_Reference/wp_enqueue_script
    – Nicholai
    Sep 3 '15 at 13:21
  • ah yes, I do remember this being a bit of a desperate move to get jQuery loading somehow. Should do it with the map code too. Thanks! Sep 3 '15 at 13:38
  • hi thanks @AndrewWest when you write: //Grab data from API $result = api call Where can I find some sample API calls that will return a list of location by evengs?
    – andrea-f
    Sep 6 '15 at 21:34
  • I've updated my answer with some API calls. Bit more fiddly than I expected. Sep 8 '15 at 12:56

Create page in wordpress and include CiviCRM event using civiCRM Component in the page and also their are may wordpress plugins like (embed-google-map) you can use for map location

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.