I need to embed a map in my project.
However, from the tutorial of the API itself, I could not make it work, until they discovered that the problem was Bootstrap, or Laravel - or both, together. That is, although I am not sure, but under tests and tests, Laravel and Bootstrap do not combine with Google Maps.
And on the web there are many questions, but no answers that made me work.
The first approach was to use Javascript / jQuery to put the page with the Google Maps within an Iframe but did not work.
Trying another approach, it worked fine, but it did not serve me well, because I need the Javascript engine, my initial goal.
In this functional test, it looks like this:
1 - I created a php page with the Google tutorial code to display a simple map.
2 - The page name is googlemaps.php.
3 - The page has been created in the resources / views folder, and its content is
<?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"asyncdefer></script></body></html>BLOCO;?>4-Imadearouteintheweb.phpfile,likethis:
Route::get("abrirGoogleMaps",function (){
return view('googlemaps');
});
5 - I typed in my project in development http: // myusername / openGoogleMaps and everything worked perfectly.
Now, the problem:
When I try to call such a page through a Javascript / jQuery routine, it does not work.
For example, via jQuery, like this:
jQuery("#idIfrGoogleMaps").prop('src','googlemaps.php');
Inside the iFrame appears' Sorry, the page you are looking for could not be found. NotFoundHttpException in RouteCollection.php line 179: ' regardless of whether I point the full path, part of the path, return with '../ ..', anything.
The same happens if I replace the jQuery statement to use the created route:
jQuery.get("abrirGoogleMaps",function(){
});
If you open the Developer Area (F12) on the 'Network' tab, when you click on the route name 'openGoogleMaps', and also clicking on the 'Preview' tab, the complete 'googlemaps.php' page code appears, showing which route was called, that the page in the views folder was found, but there is of course no rendering of the map because of the message inside the iFrame.