Estoy queriendo cargar 2 mapas con la aplicación de google en un mismo index.html. Los mapas al probarlos uno por uno no tengo problema, ambos se cargan y funcionan correctamente.
El primer mapa muestra la ubicación del usuario en un <div id="map">
de la siguiente manera:
mapa 1
var map, infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
fullscreenControl: false,
styles: [{
"featureType": "administrative.country",
"elementType": "labels.text.stroke",
"stylers": [{
"weight": 1.5
}]
},
{
"featureType": "administrative.land_parcel",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "administrative.neighborhood",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "landscape.natural.terrain",
"stylers": [{
"saturation": 40
}]
},
{
"featureType": "poi",
"stylers": [{
"saturation": 25
},
{
"visibility": "simplified"
},
{
"weight": 2
}
]
},
{
"featureType": "poi.attraction",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "poi.business",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "road",
"elementType": "labels",
"stylers": [{
"visibility": "on"
}]
},
{
"featureType": "transit.line",
"stylers": [{
"color": "#5485c0"
},
{
"visibility": "on"
}
]
},
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [{
"color": "#5485c0"
},
{
"saturation": 40
},
{
"lightness": 15
}
]
},
{
"featureType": "water",
"elementType": "labels.text",
"stylers": [{
"visibility": "on"
}]
}
]
});
infoWindow = new google.maps.InfoWindow;
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: {
lat: pos.lat,
lng: pos.lng
},
title: 'Hey! Estas aquí'
});
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(map);
}
html,
body {
height: 100%;
width: 100%;
padding: 0;
}
#map {
width: 100%;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js? key=AIzaSyBhSrbK0MeReqvKKFaK1umUYL_LDGSYBwg&callback=initMap">
</script>
</body>
La segunda función carga un GMAP de la API de javascript en un <div id='map2'>
que tiene la cualidad de poder arrastrar el marker
y guarda las coordenadas en un <input type="text" id='coords'>
mapa 2
var marker; //variable del marcador
var coords = {}; //coordenadas obtenidas con la geolocalización
//Funcion principal
initCoords = function ()
{
//usamos la API para geolocalizar el usuario
navigator.geolocation.getCurrentPosition(
function (position){
coords = {
lng: position.coords.longitude,
lat: position.coords.latitude
};
setMapa(coords); //pasamos las coordenadas al metodo para crear el mapa
},function(error){console.log(error);});
}
function setMapa (coords)
{
//Se crea una nueva instancia del objeto mapa
var map = new google.maps.Map(document.getElementById('map2'),
{
zoom: 13,
center:new google.maps.LatLng(coords.lat,coords.lng),
});
//Creamos el marcador en el mapa con sus propiedades
//para nuestro obetivo tenemos que poner el atributo draggable en true
//position pondremos las mismas coordenas que obtuvimos en la geolocalización
marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(coords.lat,coords.lng),
});
//agregamos un evento al marcador junto con la funcion callback al igual que el evento dragend que indica
//cuando el usuario a soltado el marcador
marker.addListener('click', toggleBounce);
marker.addListener( 'dragend', function (event)
{
//escribimos las coordenadas de la posicion actual del marcador dentro del input #coords
document.getElementById("coords").value = this.getPosition().lat()+","+ this.getPosition().lng();
});
}
//callback al hacer clic en el marcador lo que hace es quitar y poner la animacion BOUNCE
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
function abrirGmap {
$('#modalGmap').on('shown.bs.modal',function(){
initCoords();
console.log("si");
})
}
html, body {
width: 100%;
height: 100%;
padding:0;
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<!-- comienzo del input id='coords' -->
<input id="coords" type="text" class="form-control" value="Ubicación" data-toggle="modal" data-target="#modalGmap"/>
<!-- Comienzo del modal -->
<div class="modal fade" id="modalGmap" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document" style="width: 60%; height: 60%;">
<div id="map2" class="modal-content" style="width: 100%; height: 100%;">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhSrbK0MeReqvKKFaK1umUYL_LDGSYBwg">
</script>
</body>
El problema parece ser que al cargar la clave de la API de google esta hace un callback=Function() osea llama directamente a la función cuando se carga, haciendo referencia a una sola de las dos funciones.
cosas que intenté:
probé borrar el callback=initMap y llamar a la función cuando el usuario hace clic en el <input id="coords">
pero cuando hago esto solo funciona el mapa 2 y el primero deja de funcionar.
probé borrar ambas funciones Javascript del index.html y separarlas en 2 archivos javascript distintos y en el index.html crear una función del tipo
Function initMaps {
window.onload = function initMap();
window.onload = function initCorrds();
}
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhSrbK0MeReqvKKFaK1umUYL_LDGSYBwg">
</script>
Pensaba que con esto al llamar a los archivosmapa1.js
y mapa2.js
entre <head></head>
cuando llegara al script y al web terminara de cargar las funciones se iniciarían... pero no funcionó.
también probé con la etiqueta onclick=function()
y onload=function()
en los respectivos divs donde deben cargarse los mapas... pero no funcionó.
Bueno eso a sido mas o menos todo. espero alguien pueda ayudarme a resolver!
Muchas gracias
PRUEBAS NUEVAS AL 17/12/2018
En base a la respuesta de un usuario intenté separar ambas funciones en 2 archivos diferentes gmap.js
y GPSservice.js
. Luego en index.html
llamo a ambos archivos entre <head></head> con <script src js/gmap.js
etc. Luego antes de finalizar el </body>
y debajo del script de la API de google cree la siguiente función
<script>
function abrirGmap {
initMap();
initCoords();
}
window.onload = abrirGmap;
</script>
Esperaba que con esta función luego de cargar los archivos en el head y "encapsular" ambas funciones en una "función gatillo" que se cargaría mediante window.onload = abrirGmap;
. El resultado: No funcionó.
El siguiente intento fue eliminar el window.onload = abrirGmap;
de la función gatillo y agregar al script de la API de google un callback=abrirGmap
. de la siguiente manera.
<script async defer src="https://maps.googleapis.com/maps/api/js? key=AIzaSyBhSrbK0MeReqvKKFaK1umUYL_LDGSYBwg&callback=abrirGmap">
el resultado: no funcionó.
SOLUCIÓN FINAL
Separé ambas funciones ena rchivos distintos como se menciona mas arriba. a continuación los llamo en el head del index.html
como se menciona arriba y al final antes del body encapsulo las funciones y ejecuto de la siguiente manera.
<script>
function abrirGmap() {
initMap();
initCoords();
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhSrbK0MeReqvKKFaK1umUYL_LDGSYBwg&callback=abrirGmap">
</script>