Necesito integrar la API de GoogleMaps en mi pa´gina web y mostrarla dentro de Fancybox.
Lo que tengo hasta ahora es lo siguiente:
Código HTML:
<div id="googleMaps" class="none fancybox"> <div id="map" style="width:500px;height:500px;"></div> </div>
Código:
Funciona ok para la primera vez que se llama a la funciónonMapLoad, pero si intento hacer más de una llamada, a partir de la segunda me carga sólo el marco donde se ve "GoogleMaps", pero no consigue cargar el mapa.<script src="https://maps.googleapis.com/maps/api/js?key=[MyApiKey]" type="text/javascript"></script> function onMapLoad(_lat, _lng) { var myLatLng = { lat: _lat, lng: _lng }; var map = new google.maps.Map(document.getElementById('map'), { zoom: 17, center: myLatLng }); $("#googleMaps").trigger('click'); } onMapLoad(40.7055651,-74.1180862);//OK onMapLoad(40.7055651,-74.1180862);//KO
Alguna idea de como solucionarlo?
Muchas gracias