Google Map Marker Descriptions

Hi Ismael,
thank you for your reply.

I found the shortcodes.js file in my Enfold download.

I took the section just relating to the Google Maps and copied it into a new file called shortcodes.js
I edited the line in question and uploaded the new shortcodes.js file to my CHILD theme.

The shortcodes.js file in the PARENT theme is still as it was.

The new file shows up in Filezilla VIA FTP in the child theme but not in the Admin – Appearance – Editor
in the WordPress backend, still just functions.php and style.css .

It didn’t change the map markers tooltip appearance on the front end.

Will it only work if I edit the shortcodes.js file in the parent theme?

Here is the code in the new file in the child theme. I only included the piece relating to the Google Map.

(function($)
{
“use strict”;

$.AviaMapsAPI = function(options, container)
{
if(typeof window.av_google_map == ‘undefined’)
{
$.avia_utilities.log(‘Map creation stopped, var av_google_map not found’); return
}

// gatehr container and map data
this.container = container;
this.$container = $( container );
this.$body = $(‘body’);
this.$mapid = this.$container.data(‘mapid’) – 1;
this.$data = window.av_google_map[this.$mapid];
this.retina = window.devicePixelRatio > 1;

// set up the whole api object
this._init( options );
}

$.AviaMapsAPI.apiFiles =
{
loading: false,
finished: false,
src: ‘https://maps.googleapis.com/maps/api/js?v=3.6&sensor=false&callback=aviaOnGoogleMapsLoaded’
}

$.AviaMapsAPI.prototype =
{
_init: function()
{
this._bind_execution();
this._getAPI();
},

_getAPI: function( )
{
//make sure the api file is loaded only once
if((typeof window.google == ‘undefined’ || typeof window.google.maps == ‘undefined’) && $.AviaMapsAPI.apiFiles.loading == false)
{
$.AviaMapsAPI.apiFiles.loading = true;
var script = document.createElement(‘script’);
script.type = ‘text/javascript’;
script.src = $.AviaMapsAPI.apiFiles.src;

document.body.appendChild(script);
}
else if((typeof window.google != ‘undefined’ && typeof window.google.maps != ‘undefined’) || $.AviaMapsAPI.apiFiles.loading == false)
//else if($.AviaMapsAPI.apiFiles.finished === true)
{
this._applyMap();
}
},

_bind_execution: function()
{
this.$body.on(‘av-google-maps-api-loaded’, $.proxy( this._applyMap, this) );
},

_applyMap: function()
{
if(typeof this.map != ‘undefined’) return;
if(!this.$data.marker || !this.$data.marker[0] || !this.$data.marker[0].long || !this.$data.marker[0].long)
{
$.avia_utilities.log(‘Latitude or Longitude missing’, ‘map-error’);
return;
}

var _self = this,
mobile_drag = $.avia_utilities.isMobile ? this.$data.mobile_drag_control : true,
zoomValue = this.$data.zoom == “auto” ? 10 : this.$data.zoom;

this.mapVars = {
mapMaker: false, //mapmaker tiles are user generated content maps. might hold more info but also be inaccurate
mapTypeControl: false,
backgroundColor:’transparent’,
streetViewControl: false,
panControl: this.$data.pan_control,
zoomControl: this.$data.zoom_control,
draggable: mobile_drag,
scrollwheel: false,
zoom: zoomValue,
mapTypeId:google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(this.$data.marker[0].lat, this.$data.marker[0].long),
styles:[{featureType: “poi”, elementType: “labels”, stylers: [ { visibility: “off” }] }]
};

this.map = new google.maps.Map(this.container, this.mapVars);

this._applyMapStyle();

if(this.$data.zoom == “auto”)
{
this._setAutoZoom();
}

google.maps.event.addListenerOnce(this.map, ’tilesloaded’, function() {
_self._addMarkers();
});
},

_setAutoZoom: function()
{
var bounds = new google.maps.LatLngBounds();

for (var key in this.$data.marker)
{
bounds.extend( new google.maps.LatLng (this.$data.marker[key].lat , this.$data.marker[key].long) );
}

this.map.fitBounds(bounds);
},

_applyMapStyle: function()
{
var stylers = [], style = [], mapType;

if(this.$data.hue != “”) stylers.push({hue: this.$data.hue});
if(this.$data.saturation != “”) stylers.push({saturation: this.$data.saturation});

if(stylers.length)
{
style = [{
featureType: “all”,
elementType: “all”,
stylers: stylers
}, {
featureType: “poi”,
stylers: [
{ visibility: “off” }
]
}];

mapType = new google.maps.StyledMapType(style, { name:”av_map_style” });
this.map.mapTypes.set(‘av_styled_map’, mapType);
this.map.setMapTypeId(‘av_styled_map’);
}
},

_addMarkers: function()
{
for (var key in this.$data.marker)
{
var _self = this;

(function(key, _self)
{
setTimeout(function()
{
var marker = “”;

if(!_self.$data.marker[key] || !_self.$data.marker[key].long || !_self.$data.marker[key].long)
{
$.avia_utilities.log(‘Latitude or Longitude for single marker missing’, ‘map-error’);
return;
}

_self.$data.LatLng = new google.maps.LatLng(_self.$data.marker[key].lat, _self.$data.marker[key].long);

var markerArgs = {
flat: false,
position: _self.$data.LatLng,
animation: google.maps.Animation.BOUNCE,
map: _self.map,
title: _self.$data.marker[key].address,
optimized: false
};

//set a custom marker image if available. also set the size and reduce the marker on retina size so its sharp
if(_self.$data.marker[key].icon && _self.$data.marker[key].imagesize)
{
var size = _self.$data.marker[key].imagesize, half = “”, full = “”;

if(_self.retina && size > 40) size = 40; //retina downsize to at least half the px size
half = new google.maps.Point(size / 2, size ) ; //used to position the marker
full = new google.maps.Size(size , size ) ; //marker size
markerArgs.icon = new google.maps.MarkerImage(_self.$data.marker[key].icon, null, null, half, full);
}

marker = new google.maps.Marker(markerArgs);

setTimeout(function(){ marker.setAnimation(null); _self._infoWindow(_self.map, marker, _self.$data.marker[key]); },500);

},200 * (parseInt(key,10) + 1));

}(key, _self));
}
},

_infoWindow: function(map, marker, data)
{
var info = $.trim(data.content);

if(info != “”)
{
var infowindow = new google.maps.InfoWindow({
content: info
});

infowindow.open(map,marker);

if(data.tooltip_display) infowindow.open(map,marker);
}
}

}

//simple wrapper to call the api. makes sure that the api data is not applied twice
$.fn.aviaMaps = function( options )
{
return this.each(function()
{
var self = $.data( this, ‘aviaMapsApi’ );

if(!self)
{
self = $.data( this, ‘aviaMapsApi’, new $.AviaMapsAPI( options, this ) );
}
});
}

})( jQuery );

//this function is executed once the api file is loaded
window.aviaOnGoogleMapsLoaded = function(){ $(‘body’).trigger(‘av-google-maps-api-loaded’); $.AviaMapsAPI.apiFiles.finished = true; };