I'm getting differing results when I embed Google Maps code on wordpress post using a custom html block.
Sometimes it displays the directions icon (which I want) and sometimes it doesn't.
With the following 2 embed codes, the first one had an address, the second one had a pin (both options are necessary). However the address brings up the directions icon and the long/lat pin does not.
Do I need to tweak the code somehow to make sure the directions icon always shows?
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3369.4406686507573!2d116.24852251744383!3d-32.380547099999994!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2a32574e673b65f7%3A0x54859ed2b0cfb12a!2sSullivan%20Rock%20car%20park!5e0!3m2!1sen!2sau!4v1635496597923!5m2!1sen!2sau"
style="border:0;" allowfullscreen="" loading="lazy" width="100%" height="600"></iframe>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3385.1021641700722!2d116.16264181418593!3d-31.95812498122696!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzHCsDU3JzI5LjMiUyAxMTbCsDA5JzUzLjQiRQ!5e0!3m2!1sen!2sau!4v1635498170953!5m2!1sen!2sau"
style="border:0;" allowfullscreen="" loading="lazy" width="100%" height="600"></iframe>
Related
I embed a Google Maps view on my website, but the point is always centered. However, I want to move the point a bit to the left.
I already tried adding &ll to the end of the url, but this doesn't seem to work.
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.3898312892516!2d-122.39498068385242!3d37.78090297975824!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808580787b995e7f%3A0x573dcb3f41440563!2sDropbox!5e0!3m2!1snl!2sbe!4v1565976484287!5m2!1snl!2sbe" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
So the cursor with 'Dropbox' is centralized, but I would need it to be on the left side of the map (while still having the pointer on Dropbox). How can I do this?
Got the embed iframe code from Google Maps. Searched the location, clicked 'share' in the left side panel and chose 'embed'.
It doesn't look like you can customize the output of the default Google Maps "share" output. I tried adjusting the map before getting the "Embed a Map" code, it doesn't modify it.
An option would be the Embed API, that has an optional center parameter that lets you adjust the center of the map.
Using the "Place mode" with the optional "center" parameter:
q=Dropbox,333+Brannan+St,+San+Francisco,+CA+94107¢er=37.7810556,-122.389
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=Dropbox,333+Brannan+St,+San+Francisco,+CA+94107¢er=37.7810556,-122.389" allowfullscreen>
</iframe>
gives me:
live example
I saw the following Google Maps code in a website:
href="https://www.google.com/maps/dir//Borsigstra%C3%9Fe+4,+30115+Hamburg,+Niemcy/#82.528634,43.3909246,17z/data=!4m13!1m4!3m3!1s0x47a851eed437e2b7:0x31501b0af0ac91b4!2sBornigstra%C3%9Fe+4!3b1!4m7!1m0!1m5!1m1!1s0x47a851eed437e2b7:0x31501b0af0ac91b4!2m2!1d13.3909246!2d52.528634"
I wanted to replace this with my own location.
When I go to Google Maps, search my address and get the sharable html code, I get
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2533.5747769945215!2d8.672258415914873!3d50.579269285955185!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47bc58ec0d5dbe19%3A0x3e2e9cd7b8a6d28a!2sBleichstra%C3%9Fe+34%2C+35390+Gie%C3%9Fen!5e0!3m2!1sde!2sde!4v1529588183346" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
What is the difference between these 2 formats, and how could I get my own address in the format of the first format?
The latter can only be used as an embedded element i.e. appearing in the page like an image.
The former is a shortcut to the directions 'mode' in google maps
Is this the link you wanted? https://www.google.com/maps/dir//50.5792659,8.6744471/#50.579266,8.674447,16z?hl=en-GB
I'm embedding google maps to my website.
This link is what my website map looks like.
https://gyazo.com/fda645cc29b78ce791d90c878648b180
This is what I want my website to look like.
https://gyazo.com/2093195fd87a6e208c7d4d4510f02e81
This is what I have tried so far:
(Note: this is all html, no javascript)
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/directions?key=(APIKEY)&origin=Oslo+Norway&destination=Telemark+Norway&avoid=tolls|highways"allowfullscreen>
But I want something bit different. Basically, what I want is for users to have the option to put in where they are and where they are going.I don't want to have a preset option like the API directions gives me. Any help would be appreciated!
You can't use the Embed API to do that (origin and destination are required parameters in directions mode).
However you can go to http://maps.google.com, set up the map the way you want (with no origin or destination), then click on the "hamburger" menu, click on share or embed map, then the embed map tab and get an <iframe> URL that loads a map that looks like you want.
Example
From this URL:
https://www.google.com/maps/dir///#59.8937805,10.6450363,11z
Following that process yields this iframe code:
<iframe src="https://www.google.com/maps/embed?
pb=!1m18!1m12!1m3!1d128083.93009419793!2d10.645036343724943!3d59.89378054345609!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m3!3e6!4m0!4m0!5e0!3m2!1sen!2sus!4v1471120225355"
width="100%"
height="450"
frameborder="0"
style="border:0" allowfullscreen></iframe>
live URL:
http://www.geocodezip.com/example_embedded_map_directions_SO_empty.html
I am using Google Maps Embed API with place mode in an iframe. I am passing the zoom parameter but it's not working. However, when I click on "View larger map" the zoom level is used.
The embedded URL is
https://www.google.com/maps/embed/v1/place?key=AIzaSyAb9V7hKU334BfV4yLIOhcQyUu1ERkU_ZQ&q=44215+15th+St+W+Lancaster,CA+93534¢er=34.4503429,-117.923845&zoom=17
<html>
<body>
<iframe
width="450"
height="250"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAb9V7hKU334BfV4yLIOhcQyUu1ERkU_ZQ&q=44215+15th+St+W+Lancaster,CA+93534¢er=34.4503429,-117.923845&zoom=17">
</iframe>
</body>
</html>
It seems to be the center parameter that's causing this (although I'm unsure why as according to the Embed API the center parameter is supported by all 4 map modes
I changed the URL to https://www.google.com/maps/embed/v1/place?key=AIzaSyAb9V7hKU334BfV4yLIOhcQyUu1ERkU_ZQ&q=44215+15th+St+W+Lancaster,CA+93534&zoom=17 and it seems to work
I am using the link iframe code, directly from the google maps site, but the map when rendered on the page is very different. It is too close and it lacks the custom objects I have placed on the map.
The map is saved and public.
<iframe width="300" height="300" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" src="http://maps.google.com/maps/ms?ie=UTF8&hl=en&msa=0&
amp;msid=105969386264938156859.0004933a7b5534e8bb519&ll=51.442667,-2.076416&
amp;spn=0.032099,0.051327&z=13&output=embed"></iframe><br /><small>View
<a href="http://maps.google.com/maps/ms?ie=UTF8&hl=en&msa=0&
amp;msid=105969386264938156859.0004933a7b5534e8bb519&ll=51.442667,-2.076416&
amp;spn=0.032099,0.051327&z=13&source=embed" style="color:#0000FF;
text-align:left">Fitzgraham Academy of Dance</a> in a larger map</small>
The embedded maps are shaky at best, I recommend you look into Google Maps API and program a perfect map for yourself
I suggest you look at this link. It allows you to control the content a lot better. If you have any issues look at the source code on the Samples.