Thanks. It’s a bad habit from Coronas side that they keep on releasing half-baked stuff like this and then ignores the feedback from the users.
I’ll check out the google maps javascript api pages and see if I get any wiser (shouldn’t be too hard (to get any wiser I mean)).
https://developers.google.com/maps/documentation/javascript/
I implemented Weather Underground radar imagery over top of a Google Map through a webView. It was fairly easy to do, but I’m also javascript savvy and understand how Google’s objects works. I have pinch-zoomable weather radar with animated GIFs for the radar.
Basically have a multi-line Lua string that holds my HTML, Javascript and CSS in several variables. Then when the scene loads, I fill in the other variables (latitude, longitude, etc) and write out an index.html file to system.TemoraryDirectory and ship that puppy into a webView designed to fit between the navbar and tabbar. Javascript then fetches the Weather Underground animated GIF for that Lat, Long and ZoomLevel and overlays it on the map.
I do have to detect zoom changes or x, y changes and refetch the radar data for the new map setup.
local header = [[\<!DOCTYPE html\> \<html\> \<head\> \<title\>Google Maps JavaScript API v3 Example: Map Simple\</title\> \<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"\> \<meta charset="utf-8"\> \<style\> html, body, #map\_canvas { margin: 0; padding: 0; height: 100%; } \</style\> \<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXX"\>\</script\> \<script\> var map; var radarOverlay; var mapBounds; var API\_calls = 0; var rateLimitTimer;]] local body = [[function initialize() { var myLatLong = new google.maps.LatLng(latitude, longitude); var mapOptions = { zoom: 8, center: myLatLong, mapTypeId: google.maps.MapTypeId.ROADMAP, zoomControl: false, scaleControl: false, panControl: false, streetViewControl: false, overviewMapContro: false }; map = new google.maps.Map(document.getElementById('map\_canvas'), mapOptions); google.maps.event.addListener(map, 'idle', function() { API\_calls++; if (API\_calls \> 9) { // rate limit return(true); } var center = map.getCenter(); var bounds = map.getBounds(); var zoom = map.getZoom(); ne = bounds.getNorthEast(); sw = bounds.getSouthWest(); var URL = 'http://api.wunderground.com/api/XXXXXXXXXXXXXXXX/animatedradar/image.gif?num=5&delay=50&maxlat=' + ne.lat() + '&maxlon=' + sw.lng() + '&minlat=' + sw.lat() + '&minlon=' + ne.lng() + '&width=' + screenWidth + '&height=' + screenHeight + '&rainsnow=1&smooth=1&noclutter=1'; if (radarOverlay) { radarOverlay.setMap(null); } radarOverlay = new google.maps.GroundOverlay( URL, bounds ); radarOverlay.setMap(map); }); rateLimitTimer = setInterval(function () { API\_calls--; if (API\_calls \< 0) { API\_calls = 0; } }, 15000); } google.maps.event.addDomListener(window, 'load', initialize); \</script\> \</head\> \<body\> \<div id="map\_canvas"\>\</div\> \</body\> \</html\>]] function scene:show( event ) local sceneGroup = self.view params = event.params if event.phase == "will" then local path = system.pathForFile( "radar.html" , system.TemporaryDirectory ) local fp = io.open( path, "w" ) if fp then fp:write(header) fp:write("var latitude = " .. tostring( myData.latitude ) .. ";\n") fp:write("var longitude = " .. tostring( myData.longitude ) .. ";\n") fp:write("var screenWidth = " .. tostring( display.contentWidth) .. ";\n") fp:write("var screenHeight = " .. tostring( display.contentHeight - 50) .. ";\n") fp:write(body) fp:close() end else webView = native.newWebView( display.contentCenterX, display.contentCenterY - 25, display.contentWidth, display.contentHeight - 50 ) local path = system.pathForFile( "radar.html" , system.TemporaryDirectory ) local fp = io.open( path, "r" ) -- make sure I can access the file I just created if fp then fp:close(); webView:request( "radar.html", system.TemporaryDirectory ) else webView:request( "radar.html", system.ResourceDirectory ) end end end
Rob
Thanks for the code, Rob 
Creating html code on the fly like this was inventive. I think I may be able to do something similar. I need to add a variable number of markers, dependent on user filter settings. Maybe I have a database of 1000 markers. The user may apply misc filters so that, say, 50 of them are visible. When the user applies a filter, I have to recreate a local file like above, adding the markers.
But how fast is such an implementation compared to what I do today (having a map and just adding and removing markers)? Will the user experience be smooth? I also note that you recreate a newWebView for each scene:show. I guess this is the way to do it since you (of all people) do it, but will a recreate/file create/load operation like this feel smooth to the user?
Guess the only way to know is to actually DO it… 
It’s pretty fast. In my case getting the GIF from Weather Underground is a bit pokey, but that’s the nature of what I’m doing. An animated gif that screen size with multiple frames is a big file to download.
But creating the HTML processing some data points out of a database should be pretty quick, and if you’re going to a scene, you can hide some of the work by doing part of it in the “will” phase (setup the HTML, fetch the data, etc.) and then when the scene is on screen create the webView. There is no network traffic since the HTML is local so it’s a next frame kind of update. That said, you’re still hitting Google Maps web service for the tiles. You’re going to be limited to how fast your network connect and their servers are. But the native.newMapView()'s would suffer a similar fate.
Rob
Ok, Rob, I’ve now successfully generated an html file and markers using your “formula” above.
It’s does not have all functionality yet, but it’s probably a solution for my “advance marker usage”. Advanced being this functionality:
Click once on a marker = popup info
Click once more = go to a new web page
The app I’m struggling with is a kind of a “panorama app” showing my drone panoramas.
The panoramas are made with PTGUI, which also exports the panoramas to a “web format” (meaning a html file, some javascript and the image files themselves). An example is this:
http://www.allthumbsdev.com/BorgPanorama/panos/2daf1273f2747d6aeb019dcd02a6a3d0/pano.html
Now, the challenge is to show these panoramas within a webview to hide the URL. Before playing with the “realtime html assembly” solution above he app worked like this:
The main screen consisted of a top menu and a newMapView filling the rest of the screen. The mapView was populated with markers, each for a panorama position. Then, when such a marker was tapped I opened up the corresponding panorama html file in a separate scene with a webview. When the Android back button was pressed, I simply closed webview scene and returned to the main screen with the mapView.
This works absolutely brilliantly and looks about like this:
https://www.youtube.com/watch?v=2v8LQMObLWQ
But using a webview for both the map and the panorama is challenging, especially when it comes to the “back” handling. I can only see two solutions:
Recode the panorama html file so that it includes a back button which can be pressed
Somehow handle the back button press from within the app itself. If the back button is pressed I can
a] call the back() method on the webview
b] Load the local map URL in the webview
I’m hoping to avoid 1 since these files are generated by the panorama program and I really don’t want to mess with those files…
But both 2a and 2b depends on knowing if it is the map or if it is the pano that is showing in the webview and how can I know that? Is there some way of communicating back to the app that a marker has been tapped?
It’s been a very long day and I might have overlooked something very obvious, but currently I don’t see how I can solve this with the one-the-fly html assembly thing.
Another issue I have with the Google Maps Javascript API solution is the zoom levels. Using native: newMap I could use map:setRegion() to show the region containing my selected markers and not much more. With the Google API it is much more difficult and probably impossible to get something similar, because it operates with integer zoom levels.
Found the solution to my problem with determining what was showing in the webview myself. Turns out I can use the webListener to keep track of the url which is shown in the webview… Obvious if you know about it
So now I just check the first letters for “file”, which means that the webview is showing the base map page and I can take actions from there.
local function webListener( event ) if event.url then if (string.sub(event.url, 1, 4) == "file") then composer.webViewShowsMap = true else composer.webViewShowsMap = false end end end webView = native.newWebView( \_CENTER\_X, \_CENTER\_Y, \_FULL\_W, \_FULL\_H) webView:addEventListener( "urlRequest", webListener )Not to hijack this thread, I’ve moved any further the discussion (about my “personal” issues) here:
https://forums.coronalabs.com/topic/63305-panorama-app-my-webview-challenges-and-some-solutions/
@rob, in your example you put
https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXX
the key you created on google api console was server, android, ios or web?
web keys seems unsecured. i can’t put a web site as a refer because i’m requesting from an app not a website so everyone will be able to use my key if they find it.
android and ios keys will give me 2 different keys so the statistics will be divided for the same app and i need to code more to check what device the user is using to call the correct key.
server looks the best option. i can create a .php that accept parameters and inside the .php i will execute the call to google server, and i can limite the use of that call from my server only.
what’s your experience in this?
regards,
Carlos.
It’s being used in a webView not using a native SDK, so web is what makes sense.
Rob
web makes senses but when you create the key in google account, it asks an internet address so the requests can only be made from that address, even if anyone gots the key they can’t use it. since i’m using in my app i don’t have an address so “anyone” can use my key. the methods i saw, the one that looks more appropriate is android and ios. i can put the package name there so only my app can use the key. the problem is that i need to do 2 keys and make if statments in my code to check if its android or ios to put the correct key.