08/28/2017 at 11:36 am
#433315
Steven ZahmKeymaster
@ 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!