I'm embedding a google map with a marker on it using the embed feature whereby i'm given the URL below. My problem is that the top left panel encroaches too much and I would like to remove or contract it. I this possible? I have seem somewhere that introducing "output=embed" somewhere into the url helps but I can't get anything to happen in this example..
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d48862.31335129727!2d-1.763692!3d53.701791!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x2c8856d4951c5657!2sFrederick+Crowther+and+Son+Ltd!5e1!3m2!1sen!2suk!4v1421754685023" width="469" height="345" frameborder="0" style="border:0"></iframe>
I don't think this is possible.
You would need to use the google maps api.
This definitely does allow you to choose which default google maps controls to show and hide.
It's not very difficult to use the api. Here is a good tutorial on setting a basic map with markers.
Here is a guide to hiding controls or using custom ones.
Related
I'm using the google maps API and am planning on embedding it in a website. I've been able to embed an interactive map using an http request, but I have to click on each individual point of interest to see a little bit of info on the place without images. Just the name, address, and rating. I'd like to be able to recreate the results bar that Google Maps has.
Is this possible with any of the APIs in the maps suite?
Thanks. Here's a pic of what I'm talking about.
The map and markers are what is embeded alone, but as of now I don't think there's a way to get the bar on the left to appear. I'm assuming there's no way.
Like this sir ?
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7021.738121507687!2d-83.73387091940336!3d42.272605630582206!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x883cae45cc20c635%3A0xab7fb96b1315bd3b!2sThe%20Garage%20Bar!5e0!3m2!1sen!2sus!4v1580184370674!5m2!1sen!2sus" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></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 don't know if this is the place to ask for this kind of stuff but i'll try.
I want to integrate a map of google maps embedded in my website that shows my geotagged instagram pictures on it.
There are some online services but none is exactly doing what i need which is so basic at the same time.
I found a widget called snapwidget where you can manage to show your pictures in the map, but then you have no option to set the zoom of the map and the controls wont' appear.
Is there any way to show and set the zoom controls in a embedded google map which is not directly from google maps api?
Well according to the Embed API documentation you can set optional parameters for the zoom level and other settings. I don't see anything to disable the controls, and I don't know about integrating with Instagram photos.
e.g.
https://www.google.com/maps/embed/v1/view
?key=YOUR_API_KEY
¢er=-33.8569,151.2152
&zoom=18
SnapWidget is one option, but then there's also Widgetic and The Data Pack.
http://thedatapack.com/embed-instagram-map/
I created a map using the new Google Maps and I am using the "embed this to my site" feature, but it has no search bar. The intent of the map is to enter an address to see if you fall within a boundary I created but I don't know how to alter the HTML code to add a search feature. I also have next to no HTML experience, so please be kind.
Here is what I have as the embed code:
No actual space between first < and iframe but I added it for it to show up
<iframe src="https://mapsengine.google.com/map/embed?mid=z-3d_xUUkSNQ.kL7YAhEFIavc" width="640" height="480">
</iframe>
There are many things you can do. One idea is you can use the address provided by your users to obtain the coordinate of the location. This can be done via google Geocoding service. Then from there you can determine if the given address falls within the region you have provided. You probably want to start playing around with HTML and Javascript first for a more complicated task like this.
I currently have a map mashup that has locations that I'm populating from my own database. A few users would like to also show that map on their site(s). I'd like to give them the ability to do that, but would like to retain the actual functionality of the map on my own site: like add "stuff" to places on the map through my a web form on my site. I could open the entire API to allow them to create their own form along with the data points, but most of the people wanting to put up the map aren't developers, they are just enthusiasts that have put together a personal page that they want to spice up.
I was thinking I could just provide a JavaScript of some kind that they could then take to place on their site, or maybe an IFRAME of some type, or...any ideas? Anyone implemented this? TIA.
I haven't done anything like this myself, but I think your idea to utilise an iframe is on the right track. In fact, this is how Google Maps generates its embed code.
Your app will need to generate a URL with all relevant Google Map parameters such as bounds, zoom level as well as your application-specific params. Any event that triggers the map to re-draw (drag, zoom, etc.) will generate a new URL.
If you try the embed link in Google Maps as an example, it generates a URL that looks something like this:
http://maps.google.com/maps?f=q&source=s_q&sll=45.434035,12.339057&sspn=0.003294,0.004812&ie=UTF8&ll=45.432724,12.338966&spn=0.006588,0.009624&t=h&z=17
This URL can then be wrapped up in an iframe which your end users can place on their web pages.
Re: resizing
Yes, it's possible to dynamically resize it if width/height is part of your application params that generates the embed code. Again using Google Maps as an example:
<iframe
src="http://maps.google.com/maps?f=q&source=s_q&sll=45.434035,12.339057&sspn=0.003294,0.004812&ie=UTF8&ll=45.432724,12.338966&spn=0.006588,0.009624&t=h&z=17&output=embed"
width="(width-param)" height="(height-param)"></iframe>
If you mean resized by user, after it's been displayed, I'm not sure.. most likely, yes.