As I'm going over the documentation of https://developers.google.com/maps/documentation/ios/overlays and https://developers.google.com/maps/documentation/javascript/overlays
there is a huge gap, same goes for other functionalities and abilities, I was wondering if there is a way to "wrap" the javascript abilities in order to use them in IOS applications
for example create a custom overlay or dragable marker, or even use distance, geocoding and elevation services
You can use a UIWebView in your iOS app, and then use the JavaScript API in there. This gives you access to all of the features of the JavaScript API, but you would lose the iOS-specific features (like rotating/tilting the map, 3D buildings), and there are other downsides (like performance, offline use, etc).
You can use Google Maps data services like the elevation API from an iOS app by making a web request to the appropriate URL, and then drawing/displaying the results within the app. It's a bit more complicated than the JavaScript API which is already integrated with the underlying maps API, but it's doable.
But yes, the major limitation of the Google Maps iOS API is its minimal support for custom overlays. The latest version includes tile overlays, but if you want something more dynamic this might not be enough. There's a feature request for dynamic overlays here, but I don't think it's on Google's priority list. Something like a draggable marker might require you to implement the dragging yourself, or it might not be possible. Annotation and overlay support is one area where Apple's MapKit still offers more flexibility than the Google Maps SDK for iOS, so you might want to take a look at that as an option (but then you can't use Google Maps data services).
Related
I want to replicate the sketch functionality provided by chrome canvas in my own project.
I understand that Google uses their ink library for this purpose.
The reasons I want to use this library are:
Draws smooth lines for pencil/pen/marker
Provides very low latency for touch input
Provides ink-pen emulation
However I can't find any documentation for this library. How to compile and use this library in a web project?
I have a Google Earth Web Story. (https://www.google.com/earth/outreach/learn/create-a-map-or-story-in-google-earth-web/), and currently, I'm looking to embed it into my website.
I think you see where I'm going with this, as the Google Earth API has been deprecated.
Is there any way to still embed it?
I've looked into alternatives like Cesium but their "Story" features aren't nearly as capable as what Google Earth can provide.
Edit: Looking at Cesium again, it's not bad, it has everything I need, except 3D Maps and Street-view. So I'd still prefer to be able to use Google Earth
At this time, Google Earth does not provide an API nor the ability to embed it in iFrames or web pages.
I have a map that displays custom markers with filtering options and different markers colors based on the filtering options. Clicking a marker displays a text bubble with a picture as expected.
What is required to make a google map comply with level A. Obviously a screen reader version will be far less exciting.
WCAG 2.0
What do I need to do to make my google map comply with WCAG 2.0 level A?
EDIT:
I think I need a solution for:
1.1 TEXT ALTERNATIVES
-Map has hundreds of markers, and not accessible because they exist as js objects
1.3 ADAPTABLE
-It's not possible to detect a screen reader and adapt accordingly
2.1 KEYBOARD ACCESSIBLE
-Google maps does not provide hot-keys although I'm sure it's possible to wire some up with js.
4.1 COMPATIBLE
-This would rule out any js hacks to make google maps respond to hotkeys.
What's best practice?
What about linking to a list of my markers as text via an accessible version link?
My solution for this is going to be:
Treat the map like video/media content
Provide a text list similar to what's being displayed on the map on an alternate page. With the link clearly labeled as the accessible version.
Provide a description of what the map is trying to achieve.
This is a section of the WCAG 2.0 that talks about linking to accessible versions:
http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G73
Someone is trying to solve a similar problem here:
http://www.accessifyforum.com/viewtopic.php?t=23294
What approaches are there for hiding Google's Static Maps on wider viewports, while displaying the dynamic Google JavaScript Maps instead?
It is common to build mobile-first websites, enhanced through CSS media queries for larger viewports.
When it comes to maps, static ones are arguably better for mobile UX (smartphones too). But you might decide that for larger viewports (computer displays and even tablets), the interactive/dynamic maps may be better for your users — depending on the purpose of the website.
What criteria are important to use to choose the best approach to combine the two? What should one be careful with?
I have not been able to find a conclusive answer, but here is my research so far:
One author suggested in 2010 that a fallback option is built into the JavaScipt API:
The basic premise here is that the API replaces the content of the
map_canvas container with the map display. So, why not just add some
fallback content to that container?
Modifying his code, I can insert an image inside the div that will become the JS-enabled Google Maps. In this case, the image is from Static Maps V2:
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%">
<img src="http://maps.googleapis.com/maps/api/staticmap?center=Berkeley,CA&zoom=14&size=400x400&sensor=false">
</div>
</body>
However, that does not disable JavaScript Maps on smartphones — simply provides a fallback for devices without JS.
Another author (also in 2010) also suggests to use a single line of jQuery to hide that image — the updates code for V3 would likely be:
$('#map_canvas img').remove();
But that also does nothing to disable Google's JS Maps on narrow-viewport devices (smartphones).
Both of those guides are from 2010 — likely using V2 of Google Maps? (I even came across another author's guide from 2009 using some clever regex, but he is yet to update to "the new way [V3] of doing things".)
The second approach(hiding the image) is absolutely useless, the image will be replaced anyway when the map loads.
The first approach looks good, all you need is a condition at the start of initialize(), where you filter "small" devices and leave the function. It may look like that:
if(Math.min(screen.width,screen.height)<768){
return;
}
I am researching the feasibility of setting up a mapping tool for my alliance in an online game.
The game is not based in the real world so I am not interested in the content of the map tools available, just the functionality.
Minimally, I would like the map to display information about where allied cities are located in the world. Ideally, I'd like to be able to display information about desired trades, levels of development, and military actions. All this should be editable by the map users.
I've been looking at the google maps API and it appears that I could use it to serve my ends by using my own map tiles with a custom defined map object and some custom overlays, but it looks like it would be a lot of work to set up.
Is there another tool that would be better suited to this task?
A List Apart has an article from the creators of EveryBlock.com. They use a full open-source stack (client side library, tile cache, map generator) as an alternative to Google Maps. That sounds like it has exactly what you need.
I would argue that the Goole Maps API approach is not as difficult as you imagine. The API provides a very nice interface to define custom tilesets to render your own maps.
This interface is actually quite simple to use. There is a detailed description of it here. When you create a GMapType object you can specify a vector of urls to your own image tiles, label images and fundamentally change the display paradigm.
There are quite a few examples of this on the web:
George R R Martin's Game of Thrones. I found the javascript they have written pretty clear.
The Oblivion Gameworld (as Matt mentioned).
World of Warcraft Gameworld
I reckon this is a really powerful way of implementing your own maps on the web.
There is a google map implementation of the Oblivion gameworld - this might serve as a reference.
Wouldn't defining your own overlay with a KMZ file in Google Maps work?