I've been at this for hours now, tons of people seem to have the same problem but no one has an answer.
I'm trying to embed a static map into my website.
<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=Phoenix%2C%20Arizona%2C%20United%20States&key=key"></iframe>
I am getting this error:
But I have the static maps API enabled in my console
This is not a static map(static maps are images), it's a embedded map.
You must enable Google Maps Embed API-service
Related
I use Laravel 8.x and I added google maps to my project on localhost. I got this error:
In HTML
<div id="map" class="gmaps"></div>
and added script javascript from google to load the maps
https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete
<script
src="https://maps.googleapis.com/maps/api/js?key={{{{{{ MY API KEY from google }}}}}}&callback=initMap&libraries=&v=weekly"
async
></script
This is API activate
How do I solve this problem?
Well I don't know much so don't blame on me for doing it wrong but on the Google Maps website you can get the html code without having to do it yourself
A photo:
It will look something like this
<iframe src="https://www.google.com/maps/embed?pb=!1m24!1m12!1m3!1d37884.27437429994!2d10.038146266404057!3d53.5976162881659!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m9!3e1!4m3!3m2!1d53.605531199999994!2d10.0321597!4m3!3m2!1d53.605892999999995!2d10.1306738!5e0!3m2!1snl!2snl!4v1630424037937!5m2!1snl!2snl" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
I would like to add several highlight places using the Embed API of Google Maps in an Iframe like this:
<iframe src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBstlDO5AXkMg6xOjrkTJliYabsODR2vYA&q=Harvard+University,Parque+explora" width="100%" height="500" frameborder="0" style="border:0" allowfullscreen></iframe>
How can I add several locations to the q parameter?
Thx!
You would have to use mymap, or the Google Maps API to do it. Embed API does not support multiple markers.
For using My Map, you need to set your maps to public before you can embed it onto your site.
To generate the embed url, it is under the 3... next to the share button
If you decided to do it with the API, you might want to reference to the Markers part of the documentation.
I would like to mark city or area bounds using Embed API and add custom markers onto it. But I am unable to create and Map object on Embed API please help me for the same.
According to the official doc here, you can enter a location that you like to show on the map, then it will create a code for you to do that. Such that:
<iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/view?center=...&zoom=...&key=..."></iframe>
I want to remove a signin link from google map, the code which is displaying map is :
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3770.8179999384315!2d72.82549100000001!3d19.071738!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7c97259c1c731%3A0xea3269aa63a17fc0!2sLe+Sutra!5e0!3m2!1sen!2sin!4v1414997099454" width="450" height="285" frameborder="0" style="border:0"></iframe>
Thanks in advance.
Doesn't look like you have control over that with the embed API. You can do it with the Google Maps Javascript API v3
Related question: How to hide the Sign in button from Google maps?
I need to place several markers which specified by coordinates on embed map. I know how to do it for one marker, but don't know for multiple.
<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="https://www.google.com/maps/ms?msid=204293175747830583907.0005022420ef3bca6a816&msa=0&ie=UTF8&t=m&ll=40.79042,-73.945541&spn=0.462677,1.056747&output=embed"></iframe>
You cannot do this with the google maps iframe embed.
You either need to do it with Google Maps Map Maker (http://www.google.com/maps/mm) or you need to use the Google Maps API (https://developers.google.com/maps/).
The downside of the Google Maps Map Maker is you need to manually go back and recreate your map any time you want to make changes.
I would suggest using the Google Maps API.
This is a great little tutorial that shows you a simple Map with multiple markers using the Google Maps API - http://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/