CODEWITHSUNDEEP
phplaravelgoogle-maps
Adam
Adam

Reputation: 29039

Google Maps API not working in Laravel?

If I copy and paste the google maps api example in a html file and open the file it works:

enter image description here

However, if I put it in a blade file in Laravel and open it, then its not working. The window is blank and in the console I find the error

TypeError: a is null [Learn More]

The only thing that I did was to copy and paste the content to test.blade.php and created a route 

Route::get('/test', function(){
  return view('test');
});

This is the content of my test.blade.php

<!DOCTYPE html>
<html>
  <head>
    <style>
       #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=**mysupersaveapikey**&callback=initMap">
    </script>
  </body>
</html>

What is it that I am missing?

Upvotes: 2

Views: 3348

Answers (1)

Adam Kozlowski
Adam Kozlowski

Reputation: 5896

I recomment use dedicated api for google maps in Laravel project: https://github.com/egeloen/ivory-google-map

use Ivory\GoogleMap\Helper\Builder\ApiHelperBuilder;
use Ivory\GoogleMap\Helper\Builder\MapHelperBuilder;
use Ivory\GoogleMap\Map;

$map = new Map();

$mapHelper = MapHelperBuilder::create()->build();
$apiHelper = ApiHelperBuilder::create()
    ->setKey('API_KEY')
    ->build();

echo $mapHelper->render($map);
echo $apiHelper->render([$map]);

Good luck!

Upvotes: 2

Related Questions