I have a Google Map that I have embedded on my web site. I have managed to size and position the iFrame so that it sits where I want it to sit on my web page. I am using the new Google Maps version.
However, I want to be able to shift the centre of the map to the right, because as it standsnow, the box that displays the map layers is covering some of the locations I have marked.
I am not at this point using any Javascript or jQuery. I have simply taken the iFrame link provided by Google's embed feature and placed it in my HTML. I see there are other questions about map centering, but I can't parse them for my situation because they assume some Javascript implementation. Also, I'm hoping that I do not have to take on a whole API or Javascript library to solve this. Further, it is unclear to me if the other questions relate to the new Google Maps version, which is what I'm using.
Is there a way I can alter the centre of the embedded Google Map?
Just add a "center" parameter to your iframe url. Like so - center="40.714728,-73.998672". You can get the required coordinates by searching in google maps and picking them from the address.
You could alternatively also use a query parameter but center is more accurate.
refer - https://developers.google.com/maps/documentation/static-maps/intro#location
Related
When I am adding a Google Map marker using this tutorial, I am able to add my own content into the body of the marker. Instead of adding my own content, I want to use the content that Google has stored about my business. I am wondering how would I be able to do this?
As far as I know, there is no way to have Google populate the marker for you. On my site I use the Google Places API to display info on the tooltip when a marker is clicked.
You can query the places API to using the Google reference number. Here's a direct link to the Google PlaceDetailsRequest section. Scroll down and you will see the PlaceResult object which gives you all the data Google has about that particular place.
If you just want to display the information for your business, you are better off statically putting the content into the marker. Otherwise, if the data needs to be dynamic you need to pull it from somewhere yourself and Google Places is good if you don't have your own data.
Is there a way to center the pop up window (info window) on a google map iFrame to make sure that it does not get cut off?
WOuld it be easier for me to use the Google Map API instead of iFrame? If so, is there an API call that would give me the same information by default on a the infoWIndow?
Note: I have tried using Google Map API and I prefer this over using iFrame. The only downside is that I do not get the extra information that comes with using google map iFrame. It looks like I need to populate this window with HTML by myself.
Btw here's a good example of how to create a custom InfoWindow.
https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows
You can use any html such as custom headers, divs and links
And here's the Placed API with Google Maps:
https://developers.google.com/maps/documentation/javascript/places
i have this link:
http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Zagreb,+Croatia&aq=&sll=45.808351,15.897484&sspn=0.010066,0.016544&vpsrc=0&ie=UTF8&hq=&hnear=Zagreb,+Croatia&t=p&z=14&ll=45.794222,16.048298&output=embed
and wish to have the controls (currently in TOP LEFT position) in the
LEFT_CENTER position as indicated here:
https://developers.google.com/maps/documentation/javascript/controls#ControlPositioning
what to add to the URL?
thnx
TL;DR: You can't do this.
This is one instance where the API has more functionality than Google Maps.
There is a list of Maps parameters in Mapki — changing the position of controls isn't mentioned.
If you want to do more, you really need to use the API, which is what is covered by the documentation you referenced: that doesn't apply to Google Maps.
I need to create a static image of google map with several markers, and each marker has a custom icon.
In the Api DOC there is the note: Static Map URLs are restricted to 2048 characters in size. In practice, you will probably not have need for URLs longer than this, unless you produce complicated maps with a high number of markers and paths.
The url is very long.... There is the position for each marker and the URL for the custom icon for each one.
I've already tried with POST request ma it is not supported.
There is another way to create a static map image without max length limitation?
A possible way might be this, but i don't know if is it possible: I've create my custom map using the function in GMaps, and i have added all the markers i need.
There is a way to access in static way to this particular map? so in the url i have to give only the center of the map and other parameters (zoom, ...), but all the markers are already positioned.
Or... another idea... Can i submit the URL of a KML with all markers positioned instead each single marker position+icon url?
FYI, Google recently updated the limit to 8192.
Have you tried using a URL shortener for the icon urls? I believe the static map API will respect services that make URLs shorter... might save you a few characters.
You might wanna check out toopola´s API to help working with Google Static Maps, I am about to make my own attempt.
Another idea
find map area that contains all the markers
divide the map area into rectangular pieces (4 pieces for example)
create image url for each part, but include in url only markers and icons visible on map
show images
Мethod of division depends on the markers position.
Yes, you can definitely do this with the Javascript API.
I have built a few applications using that API. It can be a little tricky to get your head around, but it is pretty good. For what you want to do, it would not be too difficult. If the user has to be able to interact with the map and add pins and such, it starts to get a little more complicated because you have to capture clicks and such.
Does the map its self need to be available as a URL, or does it just need to be embedded on some page and that URL can be used?
The Javascript API will work best if you can embed the map into an existing webpage.
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.