Frostbourn Frostbourn - 5 months ago 27
PHP Question

How to load an external php file during an “onclick” event?

I trying to load google map on tab click to shorten the page load. I don't receive any errors in console. Just empty div

<div class="gmap"></div>
, when this should look like this:
<div class="gmap"><iframe style="border: none;" width="350px" height="150px" src=""></iframe></div>
. It seems that script isn't executed on click.

What am I doing wrong? I need to mention that I still learning.

This is how the map script works: JSFIDDLE


define( '_JEXEC', 1 );
define( 'JPATH_BASE', realpath(dirname(__FILE__).'/../../../..' ));
require_once ( JPATH_BASE .DS.'includes'.DS.'defines.php' );
require_once ( JPATH_BASE .DS.'includes'.DS.'framework.php' );

$mainframe = JFactory::getApplication('site');

jimport( 'joomla.application.module.helper' );
$module = JModuleHelper::getModule('mod_module');
$moduleParams = new JRegistry();
<div class="gmap" data-address="" data-lang="auto" data-width="350px" data-height="150px" data-zoom="12" data-bubble="false" data-pin-size="1" data-output="iframe"></div>

// entire script above
// autoload maps
jQuery(function($) { $('.gmap').googleMaps(); });

First try

jQuery(document).ready(function($) {
$(".tab").click(function() {
$.getScript(window.location.origin + "jquery.googlemap.js", function() {

Second try

I also tried this way but without effect:

jQuery(document).ready(function($) {
$(".tab").click(function() {
$.getScript(window.location.origin + "/jquery.googlemap.js", function() {
type: "GET",
cache: false,
url: '/map.php',
success: function(data) {



You need to call $('.gmap').googleMaps();