I'm trying to share the Google Maps by IFRAME and I've got this error in console
The library search is unknown. Please see https://developers.google.com/maps/documentation/javascript/libraries
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2795.5423816131142!2d11.312607315808078!3d45.519289937786425!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x477f48c46ad35441%3A0x9a16514436b0fe8e!2sMarmi%20Zem%20di%20Ziche%20Enrico!5e0!3m2!1sit!2sit!4v1676708610573!5m2!1sit!2sit" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2795.5423816131142!2d11.312607315808078!3d45.519289937786425!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x477f48c46ad35441%3A0x9a16514436b0fe8e!2sMarmi%20Zem%20di%20Ziche%20Enrico!5e0!3m2!1sit!2sit!4v1676708610573!5m2!1sit!2sit" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
I just copy and paste the above code
I'm taking the code from Google Maps, -> Share -> Embed a Map
I'm not using the API
do you know why?
You are getting the mentioned console error because you must embed the iframe with a [Google Maps Platform API key].
Example:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>
Instead of:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2795.5423816131142!2d11.312607315808078!3d45.519289937786425!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x477f48c46ad35441%3A0x9a16514436b0fe8e!2sMarmi%20Zem%20di%20Ziche%20Enrico!5e0!3m2!1sit!2sit!4v1676708610573!5m2!1sit!2sit" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
The Google Maps Platform documentation is quite straightforward when it comes to the instructions to deploy this iframe. These are the two links you will need:
How to embed a map: https://developers.google.com/maps/documentation/embed/embedding-map?hl=es-419
API usage: https://developers.google.com/maps/documentation/embed/get-api-key
Sidenote: Be wary that it is mandatory to provide a billing method when creating your key, so that Google can charge for the usage of the embeded map if it exceeds a given number of requests to their API.
Related
Google Maps is really expensive and just blows through the roof with each API request. Is there a free alternative? or am I misconfiguring the map API wrong?
You may consider using Google Maps Embed API -Basic which is free of charge. Here is a sample of a basic map with a marker location:
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAMkCFYbtHQUzcqUcmk4J2jXoq8M6T-6U4&q=1600 Amphitheatre Parkway
Mountain View, CA 94043" allowfullscreen>
</iframe>
I want the users of my webpage to be able to see an embedded google map with directions from their location to my address.
The following link correctly gets a users location and get the directions to London Bridge.
www.google.co.uk/maps?saddr=my%20location&daddr=london%20bridge
If I use google to get an embed link for that page the start address becomes static. So the embedded map wouldn't get the users location it would just use mine from when I created it.
Swapping the embed source from google with the above link results in a "could not be found" error.
<iframe src="https://www.google.co.uk/maps?saddr=my+location&daddr=london+bridge" width="600" height="450" style="border: 0;" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<iframe src="https://www.google.com/maps/embed?pb=!1m26!1m12!1m3!1d158597.88842955438!2d-0.5380009862678417!3d51.60320274241831!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m11!3e6!4m3!3m2!1d51.704112699999996!2d-0.7091171!4m5!1s0x4876035159bb13c5%3A0xa61e28267c3563ac!2sLondon+Bridge%2C+London+SE1+9DD!3m2!1d51.5078788!2d-0.0877321!5e0!3m2!1sen!2suk!4v1485450192422" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
Attempting to modify the embed code from google also results in a blank world google map.
<iframe src="https://www.google.com/maps/embed?saddr=my%20location&daddr=london%20bridge" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
Trying to change the zoom level of the map returned below. I am using it as a link in excel. Have looked around and thought this should work as I change the z=1 to z=2, etc.
http://maps.google.com/maps?z=1&t=h&q=2517 MCDEARMON ST,SACHSE,TX,75408
That is with the "old" google maps, it was never documented and no longer works. If you want a URL for an embedded google map, use the Embed API, it has a documented zoom parameter.
example 2 embedded maps, just changing the zoom parameter in the URL
<iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q=2517+MCDEARMON+ST,SACHSE,TX,75408&zoom=10&key=API_key" allowfullscreen></iframe>
<iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q=2517+MCDEARMON+ST,SACHSE,TX,75408&zoom=1&key=API_key" allowfullscreen></iframe><script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
I am manually using Google Maps to create a Map, via an address, to get the embedded code to place on my Website. Is there a mechanism to bulk load addresses and get the embedded code out? I have thousands of addresses to convert to maps.
An example Address is:
428 E 4th St Charlotte, NC 28202
The embedded code from Google Maps (Enter address an using left tool menu, select share or embed map) looks like this:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3259.3378065507304!2d-80.84061599999997!3d35.22296!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8856a02661c6b995%3A0xe460e1d558cda162!2s428+E+4th+St%2C+Charlotte%2C+NC+28202!5e0!3m2!1sen!2sus!4v1440885560942" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
Use the Embed API
You can pass in your address as one of the parameters of the URL.
Example (address is URL encoded):
<iframe width="100%" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=428%20E%204th%20St%20Charlotte%2C%20NC%2028202&key=<your KEY>" allowfullscreen></iframe>
working example
This is what google maps suggests me to use for embedding the map to my site:
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2964.797839390929!2d21.414694!3d42.004614!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1354145ab3a48fd5%3A0x9f3ee09c5eb92ad9!2sRestaurant+Jana!5e0!3m2!1sen!2s!4v1409184591679" width="600" height="450" frameborder="0" style="border:0"></iframe>
This is the point it should display: https://www.google.com/maps/place/Restaurant+Jana/#42.004614,21.414694,17z/data=!3m1!4b1!4m2!3m1!1s0x0:0x9f3ee09c5eb92ad9?hl=en-US
But this is how it looks:
0 zoom and map is not fully loaded. What am i doing wrong here?