Google Maps JavaScript API warning: NoApiKeys

3
votes

Our site giving the warning prompt "This page can't load Google Maps correctly". I am using "ivory-google-map" bundle of symfony2. In the console, we found the warning as "Google Maps JavaScript API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys" Any help would be really appreciated.

2
javascriptphpjquerysymfonygoogle-maps
Google requires an API key for api calls. You will have to pay google to use their API. If you just need an interactive map with a location marker, you can use iframe. – Bolphgolph

2 Answers

5
votes

As the error message says, you need APIKey to remove this error.

You can get APIKey from https://developers.google.com/maps/documentation/javascript/get-api-key#get-an-api-key

And apply that key to your code like :

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>

After that above error will no longer exists!

1
votes

If you don't want to buy an API key and you only need a static map, you can use an iFrame to do that.

<div class="mapouter"><div class="gmap_canvas"><iframe width="600" height="500" id="gmap_canvas" src="https://maps.google.com/maps?q=university%20of%20san%20francisco&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><a href="https://www.pureblack.de"></a></div><style>.mapouter{text-align:right;height:500px;width:600px;}.gmap_canvas {overflow:hidden;background:none!important;height:200px;width:300px;}</style></div>

But I don't know how much longer this will be possible