Cargando dinámicamente Google Maps api

Question

Estoy tratando de cargar las API de Google Api dinámicamente. estoy usando el siguiente código:

var head= document.getElementsByTagName('head')[0]; 
var script= document.createElement('script'); 
script.type= 'text/javascript'; 
script.src= 'http://www.google.com/jsapi?key=<MY_KEY>; 
head.appendChild(script); 

pero cuando se trata de crear el mapa

map = new GMap2(document.getElementById("map")); 

o

map = new google.maps.Map2(document.getElementById("map")); 

Recibo un error que Google (o GMap2) es indefinido.

Answer 1

Asegúrate de no estar creando instancias del mapa antes de que el Javascript haya terminado de cargarse.

Además, si desea utilizar el cargador de API AJAX, es necesario hacerlo de esta manera:

<script src="http://www.google.com/jsapi?key=ABCDEFG" type="text/javascript"></script> 
<script type="text/javascript"> 
    google.load("maps", "2.x"); 

    // Call this function when the page has been loaded 
    function initialize() { 
     var map = new google.maps.Map2(document.getElementById("map")); 
     map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13); 
    } 
    google.setOnLoadCallback(initialize); 
</script> 

De lo contrario, sólo tiene que utilizar la regularmente fuente Mapas guión API:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg&sensor=true_or_false" type="text/javascript"></script> 

Answer 2

I lo he hecho así ... este ejemplo se utiliza jQuery y mapa de google v3.x

$.getScript("http://maps.google.com/maps/api/js?sensor=true&region=nz&async=2&callback=MapApiLoaded", function() {}); 

function MapApiLoaded() { 
    //.... put your map setup code here: new google.maps.Map(...) etc 
} 

Answer 3

Usted puede hacer esto. Puede agregar un nombre de función de devolución de llamada en la url. Se llamará cuando se cargue la API. Esa función de devolución de llamada debe estar accesible en el alcance del documento.

lo hice hace algún tiempo mediante la activación de un evento personalizado en la ventana con jQuery: http://jsfiddle.net/fZqqW/5/

utiliza "http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback"

window.gMapsCallback = function(){ 
    $(window).trigger('gMapsLoaded'); 
} 

$(document).ready((function(){ 
    function initialize(){ 
     var mapOptions = { 
      zoom: 8, 
      center: new google.maps.LatLng(-34.397, 150.644), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions); 
    } 
    function loadGoogleMaps(){ 
     var script_tag = document.createElement('script'); 
     script_tag.setAttribute("type","text/javascript"); 
     script_tag.setAttribute("src","http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback"); 
     (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag); 
    } 
    $(window).bind('gMapsLoaded', initialize); 
    loadGoogleMaps(); 
})());​ 

Cargando asincrónica la API

Es posible que desee para cargar el código JavaScript de la API de Google Maps después de que su página haya finalizado la carga de o cuando lo necesite. Para hacerlo, puede insertar su propia etiqueta en respuesta a un evento window.onload o una llamada a función, , pero también debe indicar el API de JavaScript de Mapas para demorar la ejecución del código de la aplicación hasta la API de Maps de JavaScript el código está completamente cargado. Puede hacerlo utilizando el parámetro de devolución de llamada , que toma como argumento la función para ejecutar al completando la carga de la API.

El siguiente código indica a la aplicación que cargue la API de Maps después de que la página se haya cargado por completo (usando window.onload) y escriba Maps JavaScript API en una etiqueta dentro de la página. Además, instruimos a la API sólo para ejecutar la función initialize() después de la API ha cargado por completo devolución de llamada = inicializar a los Mapas

Ver AQUÍ: https://developers.google.com/maps/documentation/javascript/tutorial