Tenho necessidade de embutir um mapa no meu projeto.
Entretanto, a partir do tutorial da própria API, não consegui fazer funcionar, até descobrir que o problema era o Bootstrap, ou o Laravel - ou ambos, conjuntamente. Isto é, embora eu não tenha certeza, mas sob testes e testes, Laravel e Bootstrap não combinam com o Google Maps.
E na web existem muitas perguntas, mas nenhuma resposta que me fez fazer funcionar.
A abordagem primeira foi usar o Javascript/jQuery para pôr a página com o código do Google Maps dentro de um Iframe, mas não deu resultado.
Tentando outra abordagem, funcionou bem, mas não me serviu inteiramente, porque eu preciso do 'engine' do Javascript, meu objetivo inicial.
Neste teste funcional, ficou assim:
1 - Criei uma página php com o código do tutorial do Google para exibir um mapa simples.
2 - O nome da página é googlemaps.php.
3 - A página foi criada na pasta resources/views, e seu conteúdo é
<?php
echo <<<BLOCO
<!--aqui vai o código html -->
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MinhaChaveAPI=initMap"
async defer></script>
</body>
</html>
BLOCO;
?>
4 - Fiz uma rota, no arquivo web.php, assim:
Route::get("abrirGoogleMaps",function (){
return view('googlemaps');
});
5 - Digitei no meu projeto em desenvolvimento http: //nomedomeusite/abrirGoogleMaps e tudo funcionou perfeitamente.
Agora, o problema:
Quando tento chamar tal página através de uma rotina Javascript/jQuery, não funciona.
Por exemplo, via jQuery, assim:
jQuery("#idIfrGoogleMaps").prop('src','googlemaps.php');
dentro do iFrame aparece 'Sorry, the page you are looking for could not be found. NotFoundHttpException in RouteCollection.php line 179:' independentemente de eu apontar o caminho completo, parte do caminho, retorno com '../..', qualquer coisa.
O mesmo acontece se eu substituo a instrução jQuery para usar a rota criada:
jQuery.get("abrirGoogleMaps",function(){
});
Se se abrir a área do desenvolvedor (F12), na guia 'Network', quando se clica no nome da rota 'abrirGoogleMaps', e também clicando na guia 'Preview', aparece o código da página 'googlemaps.php' completo, mostrando a que rota foi chamada, que a página na pasta views foi encontrada, mas não há, naturalmente, a renderização do mapa por causa da mensagem dentro do iFrame.