[Nathan Ho]

Is it possible to get a Google Map output in the results listings — like on the cMap template, but with the other templates (e.g. Excerpt Plus)?

I see that the base plugin has the function “getMapBlock”, and added that to a customized card template. While it does output a div block with the address information, no map is shown – I’m guessing because the template itself is missing something?

Or is there something else I need to do to make that work?

Thanks,

Nathan.
ps / addendum: I do have a valid Google Maps API key and setup, and do know how those work (as I use them with other sites) – and the keys have been entered into the Connection plugin settings properly.

• This topic was modified 8 years, 11 months ago by Nathan Ho.

[Steven Zahm]

@ Nathan

Open the page in Chrome, hit the F12 key and then click the Console tab. This window will show javascript error found on the page. It’s possible that an error from the theme or another plugin is causing all scripts which come after the error to not run.

If you have error displaying, or not, can you share a link to the page? That will help me help you.

Another item to check, on the Connections Settings admin page under the Advanced tab, make sure that the Google Maps API is enabled. If it is disabled, it is very likely not going to allow the map to function.

Hope this helps, let me know.

ps. I am going to be away for the next few days so I might not be able to reply until I return.

[Nathan Ho]

Hi Steven –

Thanks for your reply! I do have the Google Maps API enabled (screenshot attached of the settings section), and am not seeing any errors in the console. I do note (from the source view) that I’m not seeing any calls to the googleapis.com / Google Maps API – although it’s possible that you have that concatenated somewhere in the plugin source to another JS file – but I’m hesitant to manually insert that, if that’s not appropriate to how this is supposed to work.

You can see the plugin usage here:

http://www.rcus.org/directory/congregations/

And if you expand an entry, you’ll see that at the end is a blank area where the map should show. It’s outputting the map div (with the appropriate data attributes), but it appears nothing is triggering the actual Google Map call, even though we have it turned on in the admin settings (see 1st screenshot).

Should we be instantiating that map with something other than a call using:

$entry->getMapBlock();

In the card.php template? (see 2nd screenshot)

Thanks!
Nathan.

Attachments:

You must be logged in to view attached files.

[Steven Zahm]

@ Nathan

Apologies! … I should have pulled up the code and reviewed it and read your initial post more carefully before I replied. I had not realized that you added the function call to display the map to the card.php file.

It does indeed take more than that to make the map. The Google Maps are initiated using javascript. Doing this for Excerpt Plus is a little more complex because you do not want to init that map until the user clicks the entry to expand it. You also do not want to init it each time it is clicked making unnecessary calls to the Google Maps API (which would be slow and run up the api call count).

I can add this to the template and push out an update. I am am going to be away from the office most the week so I will not be able to tackle this until probably mid next week.

If you are familiar with javascript and want to give it a try in the meantime, here’s the javascript used in cMap. It can probably be adapted to work with Excerpt Plus:

jQuery(document).ready( function ($) {

    // Init Chosen for the enhanced select drop down.
    $( '#cn-cmap select.cn-enhanced-select' ).chosen();

    // The `.toggle-div` and `.toggle-map` selector are for backwards compatibility with versions <= 5.2.1.
    $( 'a.cn-cmap-toggle, .toggle-div, .toggle-map' ).click( function(e) {

        var $this = $( this );
        var uuid = getcMapUUID( $this );
        var tray = getcMapTray( $this );
        var type = getcMapTrayType( tray );

        if ( $this.data( 'toggled' ) ) {

            $this.data( 'toggled', false );
            $this.text( getcMapString( $this, 'show', type ) );
            tray.slideUp();

        } else {

            $this.data( 'toggled', true );
            $this.text( getcMapString( $this, 'hide', type ) );
            tray.slideDown();

            if ( 'map' === type ) {

                var map = $( '#map-' + uuid );
                initcMapGoogleMap( map );
            }
        }

        e.preventDefault();
    });

    $( 'a.cn-cmap-accordion' ).click( function(e) {

        var $this = $( this );
        var uuid = getcMapUUID( $this );
        var tray = getcMapTray( $this );
        var type = getcMapTrayType( tray );

        // Hide all open content trays and reset the text to the "Show" string.
        $( '#entry-id-' + uuid + ' .cn-cmap-tab' ).slideUp( 'fast', function() {

            var tray = $( this );
            var type = getcMapTrayType( tray );
            var tab  = $( '#' + type + '-anchor-' + uuid );

            tab.text( getcMapString( tab, 'show', type ) );
        });

        // If the content tray being clicked is not open or "visible" open it and change the "Show" string.
        if ( tray.is( ':not(:visible)' ) ) {

            $this.text( getcMapString( $this, 'hide', type ) );

            tray.slideDown();

            if ( 'map' === type ) {

                var map = $( '#map-' + uuid );
                initcMapGoogleMap( map );
            }

        // If the content tray being clicked is already open or "visible" close it and change the "Show" string.
        } else {

            $this.text( getcMapString( $this, 'show', type ) );

            tray.slideUp();
        }

        e.preventDefault();
    });

    // Render map on single entry page
    var cnSingleMap = $( '#cn-gmap-single' );

    if ( typeof cnSingleMap !== 'undefined' ) {

        var uuid = getcMapUUID( cnSingleMap );
        var map = $( '#map-' + uuid );

        initcMapGoogleMap( map );
    }

    /**
     * Init the Google Map.
     *
     * @since 5.3
     *
     * @param {object} map
     */
    function initcMapGoogleMap( map ) {

        var fLatitude = 0;
        var fLongitude = 0;

        var strAddress = map.attr( 'data-address' );
        var strMapType = map.attr( 'data-maptype' );
        var intZoom = parseInt( map.attr( 'data-zoom' ) );

        if ( map.attr( 'data-latitude' ) ) fLatitude = parseFloat( map.attr( 'data-latitude' ) );
        if ( map.attr( 'data-longitude' ) ) fLongitude = parseFloat( map.attr( 'data-longitude' ) );

        if ( fLatitude == 0 && fLatitude == 0 ) {

            map.goMap( {
                markers: [ { address: '\'' + strAddress + '\'' } ],
                zoom:    intZoom,
                maptype: strMapType
            } );

        } else {

            map.goMap( {
                markers: [ { latitude: fLatitude, longitude: fLongitude } ],
                zoom:    intZoom,
                maptype: strMapType
            } );
        }
    }

    /**
     * Get the entry UUID.
     *
     * @since 5.3
     *
     * @param {object} object
     *
     * @returns {string}
     */
    function getcMapUUID( object ) {

        // Attempt to get the map ID from the data attribute.
        var uuid = object.data( 'uuid' );

        // If it is not found, look for the "legacy" data attribute for the map ID.
        if ( typeof uuid === 'undefined' ) {

            uuid = object.data( 'gmap-id' );
        }

        return uuid;
    }

    /**
     * Backwards compatibility function to get the UUID by the element id attribute.
     *
     * @since 5.3
     *
     * @param {string} id
     *
     * @returns {string}
     */
    function getcMapUUIDFromID( id  ) {

        return id.split( '-' ).pop();
    }

    /**
     * Get content tray type.
     *
     * Backwards compatibility with <= 5.2.1.
     *
     * @since 5.3
     *
     * @param (object} object
     *
     * @returns {string}
     */
    function getcMapTrayType( object ) {

        var type = object.data( 'type' );

        if ( typeof type === 'undefined' ) {

            type = getcMapTrayTypeByID( object.attr( 'id' ) );
        }

        return type;
    }

    /**
     * Backwards compatibility function to get the content tray type by the element id attribute.
     *
     * @since 5.3
     *
     * @param {string} id
     *
     * @returns {string}
     */
    function getcMapTrayTypeByID( id ) {

        return id.split( '-' ).shift();
    }

    /**
     * Get a content tray element.
     *
     * Backwards compatibility with <= 5.2.1.
     *
     * @since 5.3
     *
     * @param {jQuery} object
     *
     * @returns {*|jQuery|HTMLElement}
     */
    function getcMapTray( object ) {

        var trayID = object.data( 'div-id' );
        var tray   = $( '#' + trayID );

        // For backward compatibility with <= 5.2.1.
        if ( ! tray.length ) {

            tray = getcMapTrayByID( object.attr('id') );
        }

        return tray;
    }

    /**
     * Backwards compatibility function to get content tray jQuery element by ID.
     *
     * @since 5.3
     *
     * @param {string} id
     *
     * @returns {*|jQuery|HTMLElement}
     */
    function getcMapTrayByID( id ) {

        var div;
        var type = getcMapTrayTypeByID( id );

        switch ( type ) {

            case 'bio':
                div = '#bio-block-' + getcMapUUIDFromID( id );
                break;

            case 'note':
                div = '#note-block-' + getcMapUUIDFromID( id );
                break;

            case 'map':
                div = '#map-container-' + getcMapUUIDFromID( id );
                break;
        }

        return $( div );
    }

    /**
     * Get the content tray string by state (show|hide) and type (bio|map|notes).
     *
     * Backwards compatibility with <= 5.2.1.
     *
     * @since 5.3
     *
     * @param {object} object
     * @param {string} state
     * @param {string} type
     * @returns {string}
     */
    function getcMapString( object, state, type ) {

        // Get the string from the global var.
        if ( typeof CNT_cMap[ state ][ type ] !== 'undefined' ) {

            var string = CNT_cMap[ state ][ type ];
        }

        // For backward compatibility with <= 5.2.1.
        if ( typeof string === 'undefined' ) {

            string = object.data( 'str-' + state );
        }

        return string;
    }
});

Hope this helps!

[Nathan Ho]

Hi Steven –

I took a quick stab at applying the code above, but apparently I haven’t tweaked it just right yet, as I’m getting some Google Maps JS errors still.

Would you please let me know if / when you finish the modifications to that theme?

Thanks!
Nathan.

[Nathan Ho]

Hi Steven –

Just checking to see if you ever got around to updating the Excerpt Plus theme? I have a client that uses it, and is wanting to have Google Maps on there :)

Thanks for any updates!
Nathan.

[Steven Zahm]

@ Nathan

I know it has been a long while. Regardless I wanted to follow up to let you know that version 2.2 of Excerpt Plus has been released with map support. Part of the delay was in developing a decent map api for use in Connections.

[Author]

Posts