Sign up ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'd like to "geotag" all my posts and display them on a single Google map.

share|improve this question
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

1 Answer 1

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 to implement the second option is not strictly related to the question, and I will not take it into account for my answer, but see this 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', '//', 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();

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

    // Loop
    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];
        // auto calc map center
        if ( ! empty( $lats ) )
            $map_data['center'] = array( 
                ( max( $lats ) + min( $lats ) ) /2,
                ( max( $longs ) + min( $longs ) ) /2 
    endif; // End Loop

    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' );
        map_markers = map_data.markers,
        map_center  = new google.maps.LatLng([0],[1] ),
        map_zoom    = Number( map_data.zoom ),
        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(),
        for ( i = 0; i < map_markers.length; i++ ) {  
            marker = new google.maps.Marker( {
                position : new google.maps.LatLng(
                title    : map_markers[i]['title'],
                map      : map
            } );
            google.maps.event.addListener( marker, 'click', ( function( marker, i ) {
                return function() {
                    infowindow.setContent( map_markers[i]['desc'] );
           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
I've got a geocoder plugin that adds the coords with brakets around them to a custom field. Eg. (37.983917, 23.729359899999963) where can I edit the code so it can use the coords with brakets around them. My attempt just failed. Thanks for this answer though its awesome! –  stemie Feb 3 at 7:48
@stemie you can change $meta_coords = get_post_meta( get_the_ID(), 'coords', true ); to $meta_coords = trim(get_post_meta( get_the_ID(), 'coords', true ), '()'); and of course, replace coords to the actual field the plugin uses to store coordinates. –  gmazzap Feb 3 at 13:40
Hi there. I know this is pretty old, but I have not been able to implement it with the new WordPress 4.2 and the new Google Maps api. Is there anyone who can review it again? Thanks. –  exedesign2 Jun 2 at 20:33
I am able to display the map with the center position, but I am not able to pull it the locations of my posts and when I view the codeview I only see the center position in the javascript that has been produced. Will this work with the new WordPress 4.2? –  exedesign2 Jun 4 at 22:28
@exedesign2 honestly, I have no idea. I don't touch this code an Google since a long time now.. –  gmazzap Jun 4 at 22:30

protected by kaiser Mar 18 at 11:31

Thank you for your interest in this question. Because it has attracted low-quality answers, posting an answer now requires 10 reputation on this site.

Would you like to answer one of these unanswered questions instead?

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