I have this iframe, generated in Google Maps.
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1ssxg5qgL8pDlVKV4Jcc4axK_O9s2DYm2&ehbc=2E312F" width="100%" height="480"></iframe>
I would like to know if it is possible force the map to be displayed with the satellite image activated. Thanks.
Yes, it is possible, but you need to change it in MyMaps before you create the embedded <frame>. See: http://www.geocodezip.com/SO_20220206_embeddedSat.html
The top map is your original, the bottom map is a copy with the base map changed "satellite".
To change the base map, click on "Base Map" in the left hand menu:
Then choose the image of the satellite tiles:
Then share and capture the new embedded <iframe> with a potentially new URL (might actually be the same).
Related
I know Google Maps lets you embed specific places using an <iframe> HTML object, but the embedded map is limited to just a single location. Is there any way to embed a list of locations that I created on Google Maps into a website?
want this result?
here the the list to do to have this
go to google MYMAPS https://www.google.com/maps/d/
click the red button "CREATE NEW MAP"
rename the map, if you want
now click the icon for choosing your desiderated place
do it for 2 or times (in my chase I do it for 3 times)
click the preview button
now you will have 3 cities or places
click share button
now click get code to embed in my website
set to public this.
now you have embedded code
finally you have a maps embed with more places assigned
<iframe src="https://www.google.com/maps/d/embed?mid=1RK0XAw_xdwqvXzdk2tibWWrqKoXpza53&ehbc=2E312F" width="640" height="480"></iframe>
I am building Google Map URL that will point few locations in the map
I want to add Zoom control to the map so users can zoom in and out
all the examples i saw were for java script and coding maps
is there any parameter i can add to the url to get the zooming control
I tried
&callback=initMap
&gestureHandling=cooperative
but non worked
any one know what i have to add to get scrolling and zooming controls?
my current URL looks like this
https://maps.googleapis.com/maps/api/staticmap?zoom=13&gestureHandling=cooperative&size=1200x800&maptype=roadmap&key=AIza***********************&markers=label:1%7C-33.87277000,151.21408000&markers=label:2%7C-33.87257000,151.21520000
Based on the URL request that you have included in your question, I can tell that you are not using Maps URL. Instead, you are using Static Maps API. From the word Static itself, its characterized by a fixed or stationary condition.
Once the map is loaded using Static Maps API, the map will be rendered as an image, therefore, no interactions can be done with the map after loading. You may only adjust the zoom level by adjusting the parameter zoom in the URL.
If you want to be able to dynamically move around the map after loading, then you should opt to using Google Maps Javascript API.
But it seems to me that you are trying to avoid using codes. If this is the case and you just want to load the map using url, then you may use Google Maps URL
https://www.google.com/maps/search/?api=1&query=pizza+seattle+wa
If you want to embed a map to a webpage, then you should use Google Maps Embed API. You do not need an to use javascript codes for this one, just an HTML iframe.
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
&q=Space+Needle,Seattle+WA" allowfullscreen>
</iframe>
Hope this helps!
I am trying to create a URL that will render google maps with:
satellite map
a marker (pin)
a specified zoom level
I feel like I'm going a little crazy!?
This one is close, it is a satellite map, and has a marker, but does not respect the zoom parameter: http://maps.google.com/maps?&z=18&mrt=yp&t=k&q=40.7028722+-73.9868281
This one is close too, it has a marker and respects the zoom level, but it's not a satellite map: https://www.google.com/maps/place/40.7028722+-73.9868281/#40.7028722,-73.9868281,11z
You can tell it to use the satellite image by adding t=k
http://maps.google.com/maps?t=k&q=loc:37.9531784+-122.3383102
I you want the regular map, use t=m
I get a marker and satellite image with this approach.
Take a closer look at the URLs, the second link you posted sounds like it is almost exactly what you want but it lacks the satellite view. When I went to that link I was able to enable satellite view from the bottom left button on the map. When I did that, the URL updates to...
https://www.google.com/maps/place/40%C2%B042'10.3%22N+73%C2%B059'12.6%22W/#40.7028722,-73.9868281,56377m/data=!3m1!1e3!4m5!3m4!1s0x0:0x0!8m2!3d40.7028722!4d-73.9868281
Compare that to the original URL...
https://www.google.com/maps/place/40%C2%B042'10.3%22N+73%C2%B059'12.6%22W/#40.7028722,-73.9868281,11z/data=!4m5!3m4!1s0x0:0x0!8m2!3d40.7028722!4d-73.9868281
The original URL has a parameter specifying what looks like zulu time, in this case 11z. The satellite map that you are wanting switches that parameter out with what appears to be a zoom level specified in meters.
This is as close as I got:
http://maps.google.com/maps?t=k&q=loc:-34.887091,-56.054322&ll=-34.887091,-56.054322
It works fine most of the times, but in some mobile devices the pin does not appear in the centre of the screen.
Got some info from this site: https://moz.com/ugc/everything-you-never-wanted-to-know-about-google-maps-parameters
https://www.google.com/maps/#?api=1&map_action=map&basemap=satellite
is the way to do the URL.
Full google maps URL documentation here:
https://developers.google.com/maps/documentation/urls/get-started
I am trying to add two maps to my website, each with two drop pins. Users can switch between the two maps by clicking on tabs. I built the two maps using the Google Maps Engine. The first map appears great, zoomed in to the right amount and showing the two pins. However, the second map is totally off. I tried doing what was suggested in this previous question Marker not centering in iframe for google map but 1) it was still off and 2) I was unable to add a second pin to the map (plus the map did not look as nice as the iframe I embedded directly on to the site).
Here is the JsFiddle: http://jsfiddle.net/SbH3Y/5/
Google Maps iframes:
<iframe src="http://mapsengine.google.com/map/embed?mid=zzFoZgN4yc_E.kT_V1HoEUMHs" width="461" height="350" scrolling='no' marginheight='0' marginwidth='0'></iframe>
Thanks
You need to reload the iframe in the 2nd tab when it gets selected. The best would be when you initially have an empty iframe and set the src at the first time the tab will be selected.
simple reloading of the frame would be easy:
$('#pickup-date2').show(0,function(){
$('iframe',this)
.attr('src','http://mapsengine.google.com/map/embed?mid=zzFoZgN4yc_E.kT_V1HoEUMHs');
});
http://jsfiddle.net/doktormolle/jUVuB/
But this would reload the iframe each time you select the tab.
Better approach:
the iframe:
<iframe src="about:blank"
data-src="http://mapsengine.google.com/map/embed?mid=zzFoZgN4yc_E.kT_V1HoEUMHs"
width="461" height="350"></iframe>
As you see the map initially will not be loaded, the src is blank and the URL of the map is stored in the data-src-attribute
the script:
$('#pickup-date2')
.show(0,function(){
//when the iframe has data-src
if($('iframe',this).data('src')){
$('iframe',this)
//set the src-attribute
.attr('src',$('iframe',this).data('src'))
//and set data-src to null,
//so the iframe will only be reloaded on the first click
.data('src',null);
} });
http://jsfiddle.net/doktormolle/tWCUR/
I made a custom map with a couple of placemarks on it. I have copied html code and pasted it into my web page. Everything works fine. The map and placemarks are displayed correctly.
And when I press the bottom left corner button "Click to see this area on Google Maps" I can see my map directly on maps.google.com but the placemarks disappear.
Is it possible to show the placemarks on my map right on the maps.google.com? or can I manage placemarks for my custom map directly on maps.google.com using API?
I think the closest thing to what you are after is MyMaps. My maps lets you create map content ( or import KML, KMZ, or GeoRSS files), on maps.google.com. I think you can programaticaly create maps via the Google Data API.
I am not sure what your requirement is, but if your content is static you could create a MyMap up front and then load that url rather than maps.google.com.
Here is the example of what i need -)
We send request to maps.google.com to show some area (sending latitude, longtitude, zoom) and then we specify the placemarks we want, not by hand (using MyMaps) but using API. And we need to do it directly on the maps.google.com, not on my own site or home page with embeded or even programm builded map.
Thanks to Cannonade. The links you've shared helps me a lot -)