popcorn.js googlemaps - google-maps

Is there a secret to getting the googlemaps plugin to work with popcorn.js. I can get footnotes, normal video, youtube etc. to work but not the googlemaps stuff. Is there some other configuration or extra scripts required? I have looked at the videos on the popcorn.js site and cannot even get their googlemaps example to work. I cannot find any reference in their api documentation to any additonal scripts required.

The solution was rather easy - I needed to set a width and height for the div I was using to display the map.

Related

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

How do I remove 'Earth' button from Google Maps?

I'm using the Google Maps generator to create a few maps for a client. The maps embeded on the site are a bit small (255x176), so map real state is crucial. I've already removed the balloon, but can't find a way to remove the "Earth" view button from it (all newly generated maps come with it now, 4 views in total).
The annoying part is that the "Earth" view requires a Google Earth plugin to be used anyway, something the client could live without - me too.
Any advices there? Feedback will be greatly appreciated!
Cheers,
Wallace
You may customize the map controls using the MAPS API.
Visit http://code.google.com/apis/maps/documentation/javascript/controls.html#DefaultUI
Look for MapTypeControlOptions and pass appropriate map type you want to show.
Refer http://code.google.com/apis/maps/documentation/javascript/reference.html#MapTypeControlOptions
http://code.google.com/apis/maps/documentation/javascript/reference.html#MapTypeId
If using the default UI, you would get only the map types in G_DEFAULT_MAP_TYPES, which does not include the Earth map type (G_SATELLITE_3D_MAP).
This means your generator is adding this map type explicitly. So you should be able to simply look for G_SATELLITE_3D_MAP in the javascript you get from the generator, and remove references to it.
If you are still having troubles, can you provide a link to the map generator you are using?

Put several Google Maps on page using Symfony and sfEasyGMapPlugin

I'm using Symfony 1.2.9 and sfEasyGMapPlugin 3.0.0
I need to put two gmaps on one page.
I've made custom ma name and DIV's id for each map. But I still can't make it work. Only second map is shown. The first one is not created.
Does anybody knows how to make them work using sfEasyGMapPlugin?
One of the TODO items for sfEasyGMapPlugin is to "correct javascript files that suppose that the map's javascript object is called 'map'".
My guess is that, because of this problem, you can only refer to one map object per page. You could try finding where 'map' is hardcoded and replace it with $gMap. I haven't used the plugin myself, so I can't say for sure. I've only used the Google Maps API directly with Symfony. Hope that helps.

how does google maps render the map etc, is it flash a java applet?

how does google maps render the map etc, is it flash a java appelet?
A bit more detail, google maps uses a big div element to contain several img elements. each of those img elements is 256 pixels square, and is positioned on a regular grid. from there, the google maps javascript program calculates which grid images should be loaded into each img tag and uses regular dom manipulation to position each img in the right place. Only the tiles of the map that would be visible inside the div are loaded. when you scroll off the side, the javascript library unloads the image, and loads new ones as needed. Other elements, like the zoom controls, markers, and lines, are stacked or drawn on top of that as needed.
It's all HTML and Javascript, plus a lot of video trucks, satellites (and airplanes?), and google magic.. More information:
How does Google Maps work?
No, it is all based on JavaScript and AJAX.
To oversimply... A small script tag is embedded in the HTML which points to a big .js file over at Google. This contains a whole lot of JavaScript that builds the "map box", downloads the map images, and does things when you move your mouse around and click on stuff.
Google Maps is done via fancy JavaScript if I'm not mistaken. If you don't already have it, install Firebug in Firefox and "Inspect" the map at Google Maps, and you'll see that it's a bunch of images together, with JavaScript to provide the functionality.
It is neither flash nor a java applet. It is simply HTML, CSS and images with a great deal of javascript to drive the interactive elements.
Please see the Google Maps API for instructions and examples on how to create and integrate the google maps widget.
http://code.google.com/apis/maps/