How to load external php file during "onclick" event?

Question

I am trying to load a google map in a tab to reduce the load on the page. I am not getting any errors in the console. Just an empty div <div class="gmap"></div> when it should look like this: <div class="gmap"><iframe style="border: none;" width="350px" height="150px" src="http://maps.google.com/maps?myadress"></iframe></div> <div class="gmap"><iframe style="border: none;" width="350px" height="150px" src="http://maps.google.com/maps?myadress"></iframe></div> . It seems that the script is not executing when clicked.

What am I doing wrong? I need to mention that I'm still studying.

This is how the map script works: JSFIDDLE

map.php

 <?php define( '_JEXEC', 1 ); define( 'JPATH_BASE', realpath(dirname(__FILE__).'/../../../..' )); define( 'DS', DIRECTORY_SEPARATOR ); 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(); $moduleParams->loadString($module->params); ?> <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> 

jquery.google-maps.js

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

Try first

 jQuery(document).ready(function($) { $(".tab").click(function() { $.getScript(window.location.origin + "jquery.googlemap.js", function() { $(".div-inner").load("map.php"); }); }); }); 

Second attempt

I also tried this method, but without effect:

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

Answer 1

I have found a solution. Thanks!

 jQuery(document).ready(function($) { $(".tab").one('click', function() { $(".div-inner").append('<div class="gmap" data-address="New York"></div>'); $.getScript(window.location.origin + '/jquery.googlemap.js', function() { $('.gmap').googleMaps(); }); });