javascript - load google map Asynchronously on demand -

I'm calling Google Maps in my jQuery plugin for one of my pages, but in its tab window, the entire map Do not load. I'm guessing that Ajax has tried to say in Google, but it does not work.

Many thanks in advance ... function initializeMap (address) {var mapVar = {latitude: "", longitude: "", mellaitong: ""}; Var Geocoder = new google.maps.Geocoder (); Geocoder.geocode ({'address': address}, function (result, status) {if (position == google.maps.GeocoderStatus.OK) {mapVar.latitude = results [0] .geometry.location.lat (); MapVar.longitude = Result [0] .geometry.location.lng (); mapVar.myLatlng = new google.maps.LatLng (mapVar.latitude, mapVar.longitude); // ----- Define map options - - // var map options = {center: mapVar.myLatlng, zoom: 15, map type: google.maps.MapTypeId.ROADMAP}; map = new google.maps.Map (document.getElementById ("map_canvas"), map options ); Var markers = new google.maps.marker ({status: mapVar.myLatlng, map: map, title: address});} // end if}); }

html

  & lt; Div id = "map_canvas" style = "width: 61.4em; height: 400px;" & Gt; & Lt; / Div & gt;   
 CSS  
  #map_canvas {width: 61.4em; Height: 100%; }    
 
 
 I have found a solution to this problem Asynchronous response to a window ended loading by injection of script tags. Loaded Event / Function Call because my map is visible in the jquery tab, so I have an event register with the tab, so when the specific tab is clicked ... a map-load function in the document. Is said in the plugin in the plugin and holds the actual map request data after starting the function.  
 jQuery Plugin  
  $ .fn.loadGoogleMap = function () {var script_tag = document.createElement ('script'); Script_tag.type = 'Text / JavaScript'; Script_tag.src = "https://maps.googleapis.com/maps/api/js?key=yourKey=false&callback=initializeMap" document.body.appendChild (script_tag); } Function initializeMap () {address = PropertyDetail.d_fullAddress; Var mapVar = {Latitude: "", Longitude: "", Mellaitang: ""}; Var Geocoder = new google.maps.Geocoder (); Geocoder.geocode ({'address': address}, function (result, status) {if (position == google.maps.GeocoderStatus.OK) {mapVar.latitude = results [0] .geometry.location.lat (); MapVar.longitude = Result [0] .geometry.location.lng (); mapVar.myLatlng = new google.maps.LatLng (mapVar.latitude, mapVar.longitude); // ----- Define map options - - // var map options = {center: mapVar.myLatlng, zoom: 15, map type: google.maps.MapTypeId.ROADMAP}; map = new google.maps.Map (document.getElementById ("map_canvas"), map options ); Var markers = new google.maps.marker ({status: mapVar.myLatlng, map: map, title: address});} // end if}); }   
 Call the ready () plugin function in the document ...  
  $ ("# map_canvas_tab"). ("Click", function () {$ (This). Load GoogleMap (); window.onload = loadScript;});