How do I allow others to embed my custom Google Map? - google-maps

I've made a custom Google Map with custom tiles and markers for a fictitious world. It's not public yet but the most obvious correlation is mapwow.com. Is it possible to allow others to now embed MY custom map into their sites or applications? Most of the search results are second-level only (Google > My Site) and I'm ideally looking for third level (Google > My Site > Their Site). My guess is that this would be possible using a) custom URL parameters to center the viewport on a specified lon/lat and b) an IFRAME that points to that URL on my site, but I'm wondering if there is a better or "official" way to do such a thing. An IFRAME isn't really a commonly supported tag in forum or wiki software.

Related

How to display google maps in a very large window?

Using iframe to display google maps in hres. Lets say 10000x10000 don't work, because google dont allow you to do this. That's what it says when I open the document in internet explorer. I am doing this because I want to make a big screenshots of google maps and then stitch them in photoshop. This will make a big satellite map which I can use to explore off-road routes with my bike without the need to have access to the internet.
Please if anyone have any ideas; maybe an html code which works?
As mentioned #geocodezip there are certain restrictions you should be aware of. The Terms of Service has the following sentence (paragraph 10.1):
No access to APIs or Content except through the Service. You will not access the Maps API(s) or the Content except through the Service. For example, you must not access map tiles or imagery through interfaces or channels (including undocumented Google interfaces) other than the Maps API(s).
Also paragraph 10.5 says:
No derivative works. You will not modify or create a derivative work based on any Content unless expressly permitted to do so under these Terms. For example, the following are prohibited: (i) creating server-side modification of map tiles; (ii) stitching multiple static map images together to display a map that is larger than permitted in the Maps APIs Documentation; or (iii) tracing or copying the copyrightable elements of Google’s maps or building outlines and creating a new work, such as a new mapping or navigation dataset.
https://developers.google.com/maps/terms#10-license-restrictions

How do you shift the centre of the map in an embedded Google map?

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

Google Maps 508 accessibility without styles

One of the requirements of Section 508 is that pages be readable without stylesheets:
§ 1194.22 (d) Documents shall be organized so they are readable without requiring an associated style sheet.
We're currently facing a problem where Google Maps do not work without styles enabled (go figure). All the different pieces of the map just print out in order with no meaning. I've attached a sample image below.
Is there any easy way to deal with this? The only thing I can think of is to use JavaScript to test to see if CSS is disabled (a terrible thing to do, I know, I know) and then remove the map div and replace it with a static map that shows the same content. (If JavaScript is disabled too it's a moot point as the map won't even load.) Obviously the static map doesn't incorporate all the same functionality (zoom, pan, etc.), but it provides a readable page. So:
Is there another way to make Google Maps 508 compliant regarding styles disabled?
If not, how would one go about testing for CSS being disabled to do the fix described above?
Example map without styles:
The Standard you are pointing to is mainly for static content. Since a Google Map is highly scripted, you would call upon the Standards in 1194.21 - Software Applications, and have a <noscript> tag following the map saying something like "Google map showing . An accessible version is at ___."
Next when testing the Map, it most likely fail to be compliant, so you should request an equivalent facilitation exception for the map from the agency's Section 508 coordinator. This allows you to serve up a Google Map, but you provide an equivalent method of getting the information. If the static method that Albert pointed to is acceptable, a link to it should be placed in proximity to the Google one,
gmaps for business does not offer this option: https://developers.google.com/maps/documentation/business/accessibility
that link is to google maps for business, which i'm assuming you are not using, but its the only maps api link under the a11y policies: http://www.google.com/accessibility/policy/
there is google earth, but that's not what you want i don't think. this is sticky, and not best-practice, but you gotta do what you gotta do...since you can detect when css is off, i would run that function first on page load, if it is, serve up gmaps with a static image map fallback, if its not, only serve up the static map. i wrote a post about using static images as fallbacks, which you can use. NOTE: this doesn't include the entire functionality i just mentioned, just loading gmaps with static image fallback: http://bowdenweb.com/wp/2011/05/optimize-google-maps.html

Query existing, public Google Map via the Google Maps API v3

I am trying to embed an existing, public Google Map into a website. Specifically this one:
http://goo.gl/maps/cHf2
Of course I could use the iframe embed to achieve this, but I would like a little more control over the map … I imagined being able to pull all the markers from the map and display them as an index next to the map. Kind of like Google already does, but embedded in my page with my own styles and images.
I have been digging through Google, Stack Overflow and the API instructions and couldn’t find any relevant posts. In the GET string of the map on Google we can see this chunk:
&msid=212828439842926497866.0004bfae4da003d8ffd1f&mid=1341413217
I thought in there might be a maps ID and I could use it to query the content of the map through the API? The intention is using Google Maps as a CMS for less technical minded people and not dealing with geo data in our own CMS.
Any help would be greatly appreciated. Maybe I am just missing the forest for the trees.
You can download the kml that specifies the markers in that page and display that on your API based map. This example defaults to displaying it using geoxml3, but you can hide that and display the KmlLayer version.
You should be able to just point KmlLayer to the link (I downloaded the kml and put it on my server so it would work with geoxml3).
Here is an example (taken directly from the documentation) that does that
here is the original

How could a share a Google map mashup with my own datapoints and links back to my site?

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.