0
I need to embed a map in my project.
However, from the API’s own tutorial, I couldn’t get it to work, until I found out the problem was Bootstrap, or Laravel - or both, together. That is, although I’m not sure, but under testing and testing, Laravel and Bootstrap do not match 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 code of Google Maps inside an Iframe, but no results.
Trying another approach, it worked well, but it didn’t serve me entirely, because I need the Javascript engine, my initial goal.
In this functional test, it looked like this:
1 - I created a php page with the Google tutorial code to display a simple map.
2 - Page name is googlemaps.php.
3 - The page was 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"
async defer></script>
</body>
</html>
BLOCO;
?>
4 - I made a route, in the web.php file, like this:
Route::get("abrirGoogleMaps",function (){
return view('googlemaps');
});
5 - I typed in my project under development http: //domnamePrite/openGoogleMaps and everything worked perfectly.
Now, the problem:
When I try to call such a page through a Javascript/jQuery routine, it doesn’t work.
For example, via jQuery, like this:
jQuery("#idIfrGoogleMaps").prop('src','googlemaps.php');
within 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 out the full path, part of the way, 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), in the 'Network' tab, when you click on the name of the route 'starGoogleMaps', and also by clicking on the 'Preview' tab, the code of the full 'googlemaps.php' page appears, showing which route was called, which page in the views folder was found, but there is of course no map rendering because of the message inside the iframe.