Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Id' like to geotag all my posts and display them on a single google map. is this possible? do you know a plugin that does this? thanks!

share|improve this question
2  
I think you can solve this question by reading the answers to "Best way to show map of tagged posts?". If you can't solve it after reading that question, please edit your question to clarify what you tried and what did not work. –  Jan Fabry May 30 '11 at 9:15
add comment

3 Answers

Can do this without any plugin, you need only the Google Maps Api.

Please note that if you plan to have 20 markers or more on a single page, you have to geolocate posts using coordinates and not addresses.

To save coordinates from an address you can

  1. manually use a service (something like this)
  2. call google maps geocoding from WP admin when you create or update the post.

How implement the second option is not strictly related to the question, and I will not take it into account for my answer, but see the Maps API example to see how simple is retrieve coordinates from an address.

So I will assume in this answer that posts have a custom field 'coords' where coordinates are stored as a string of two comma separated values, someting like: '38.897683,-77.03649'.

I also assume that there is a page template saved in the file 'page-google-map.php'.

Put the following code in functions.php

add_action( 'wp_enqueue_scripts', 'enqueue_gmap' );

function enqueue_gmap() {
  // script goes only in the map page template
  if ( ! is_page_template('page-google-map.php') ) return;

  wp_register_script('google-maps-api', 'http://maps.google.com/maps/api/js?sensor=false', false, false);
  wp_register_script('posts_map', get_template_directory_uri() . '/js/mygmap.js', false, false, true);
  wp_enqueue_script( 'google-maps-api' );
  wp_enqueue_script( 'posts_map' );

  // use a custom field on the map page to setup the zoom
  global $post;
  $zoom = (int) get_post_meta($post->ID, 'map_zoom', true);
  if ( ! $zoom ) $zoom = 6;

  $map_data = array('markers' => array(), 'center' => array(41.890262, 12.492310), 'zoom' => $zoom );
  $lats = array();
  $longs = array();

  $args = array('posts_per_page' => -1); // put here your query args
  $map_query = new WP_Query( $args );

  if ( $map_query->have_posts() ) : 
    while( $map_query->have_posts() ) : $map_query->the_post();
      $meta_coords = get_post_meta( get_the_ID(), 'coords', true );
        if ( $meta_coords ) {
          $coords = array_map('floatval', array_map('trim', explode(',',$meta_coords) ));
          $title = get_the_title();
          $link = sprintf('<a href="%s">%s</a>', get_permalink(), $title);
          $map_data['markers'][] = array(
            'latlang' => $coords,
            'title' => $title,
            'desc' => '<h3 class="marker-title">' . $link . '</h3><div class="marker-desc">' . get_the_excerpt() . '</div>',
          );
          $lats[] = $coords[0];
          $longs[] = $coords[1];
        }
    endwhile;
    // auto calc map center
    if( ! empty($lats) )
      $map_data['center'] = array((max($lats)+min($lats))/2, (max($longs)+min($longs))/2);
  endif;

  wp_reset_postdata;
  wp_localize_script( 'posts_map', 'map_data', $map_data );
}

As you can see, in the map page template, I enqueue

  • the google map api script
  • a script called mygmap.js located in 'js' subfolder of the theme

also, looping the posts, I populate an array $map_data and using wp_localize_script I pass this array to the js in the page.

Now, mygmap.js will contain:

function map_initialize() {
    var map_div = document.getElementById('map');
    var map_markers = map_data.markers;
    var map_center = new google.maps.LatLng(map_data.center[0], map_data.center[1]);
    var map_zoom = Number(map_data.zoom);
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: map_zoom,
      center: map_center,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    if ( map_markers.length ) {
      var infowindow = new google.maps.InfoWindow();
      var marker, i;
      for (i = 0; i < map_markers.length; i++) {  
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(map_markers[i]['latlang'][0], map_markers[i]['latlang'][1]),
          title: map_markers[i]['title'],
          map: map
        });
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
            infowindow.setContent(map_markers[i]['desc']);
            infowindow.open(map, marker);
          }
        })(marker, i));
      }
    }
};
google.maps.event.addDomListener(window, 'load', map_initialize);

The javascript is not WP related, and I put here only to show the use of map_data var. I'm not a js developer and the code is more or less entirely taken from here

That's all. Just create the page template and insert a div with the id 'map', something like:

<div id="map" style="width:100%; height:100%"></div>

Of course the div can be styled with css, and note that also the info windows of markers can be styled, too: in the css use h3.marker-title to style the info window title and div.marker-desc to style the content.

Note that the map center is automatically calculated and if you want to change the default zoom you have to put a custom field 'map_zoom' in the page assigned to the map page template.

Hope it helps.

share|improve this answer
    
There was a typo on javascript, just corrected it. –  G. M. Jul 26 '13 at 9:53
add comment

Have you looked into wordpress extended plugins?
If not, I suggest looking into RomeLuv Google Maps for WordPress - it looks like what you may be looking for.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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