Web-Based Alternative to native.newMapView()

This is a reposting of a code snippet I contributed to the Corona Labs Code Exchange back in 2012. It’s worth noting that the impetus for this bit of code was that in 2012 Android native map views were not yet available. Corona’s APIs have evolved quite a bit since then and Android native map views are now on-par with iOS. However, there are still some developers who prefer the level of customization you get by displaying your map in a webView generated with the Google Maps API.

Furthermore, fellow Corona Developers T and G Apps Ltd. have taken this code and expanded upon it, offering an even greater level of customization. You can check out their expanded version here.

Hi Everybody,

I don’t know about you, but I’ve grown desperate waiting for Android MapViews, so I’ve taken matters into my own hands and come up with what I think is a pretty decent workaround, using HTML, JavaScript, and a WebPopup.

Obviously, this isn’t a perfect replacement for native mapViews, but it can help get us through in the meantime, and it might come in handy later for devices like the Kindle Fire – which I’m pretty sure won’t support native webViews, since it doesn’t come bundled with the standard Google Apps, like Gmail and Maps. (correct me if I’m wrong, though.)

And there are even some perks that we don’t currently get with the native.newMapView API, like Street View, and the ability to create lengthy map markers that can even include web links! (hint, hint, Ansca!) 😉 EDITORIAL NOTE: Back in 2012 Corona Labs was still called Ansca Mobile.

The way it works is that the code generates an HTML file on-the-fly that when loaded up in a webPopup, displays a map that can be swiped and zoomed. Unfortunately, my tests on Android devices don’t support pinch-zooming (though it does work on iPhone) – this appears to be a limitation of the way the Android web browser views maps, but you can still zoom in and out using the buttons that appear on screen. And you can also switch to different types of maps. It’s pretty decent, all things considered.

Well, enough of my jabbering. Let’s get right to the code. Below is a fully-functioning main.lua file that will load up a full-screen mapView on any device – including Android! All you need to do is plug in a free Google Maps API Key (see the commented-out text in the code for instructions). Please let me know what you think in the comments, and do make suggestions for improvements. I’m not a Javascript guy by trade, so I’m making some of this up as I go. I hope this comes in handy for some of you.

Thanks,
Jason

--MAIN.LUA (Android MapView workaround for Corona SDK by Jason Schroeder)
 
------------------------
--REQUIRED VARIABLES
------------------------
 
local APIkey = "YOUR_API_KEY" --This variable is your Google Maps API key (copy and paste it from the web). You can obtain a Google Maps API Key for free at http://code.google.com/apis/console
 
local lat, lon = 37.450876, -122.156689 --These are the latitude and longitude values where our map will center when it first loads.
 
local path = system.pathForFile( "map.html", system.DocumentsDirectory ) --This is the path for the HTML document that we'll create to load our custom Google Map.

------------------------
--OPTIONAL MARKER DATA
------------------------
 
local markerTable = {}
--This table will contain all of the data for our map markers.
 
markerTable[1]={
	name = "Ansca HQ",
	lat = 37.450876,
	lon = -122.156689,
	notes = "Play more. Code less."
}

markerTable[2]={
	name = "Chipotle Mexican Grill",
	lat = 37.4238658,
	lon = -122.1433494,
	notes = "Because Corona is even tastier with a burrito in your hand."
}

-- The above variables contain data for 2 markers. You can place additional markers, or attach other pieces of data to each marker (address, phone #, etc.)
 
 
local markerCode = {}
--This table will contain the compiled Javascript to place the markers we specified in the markerList table.

 
for i=1, #markerTable do
	markerCode[i] = [[

	var infowindow]]..i..[[ = new google.maps.InfoWindow({
	content: "&lt;strong&gt;]]..markerTable[i].name..[[&lt;/strong&gt;&lt;br&gt;]]..markerTable[i].notes..[["
	});

	var marker]]..i..[[ = new google.maps.Marker({
	position: new google.maps.LatLng(]]..markerTable[i].lat..', '..markerTable[i].lon..[[),
	map: map,
	animation: google.maps.Animation.DROP,
	});

	google.maps.event.addListener(marker]]..i..[[, 'click', function() {
	infowindow]]..i..[[.open(map,marker]]..i..[[);
	});
 
	]]
end
 
local markerString = table.concat(markerCode)
--The above code compiles a string that contains all of our marker data, to be inserted (optionally) into the HTML file we're creating.

 
------------------------
--HTML & JAVASCRIPT CODE
------------------------

local mapString = [[
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	html { height: 100% }
	body { height: 100%; margin: 0; padding: 0 }
	#map_canvas { height: 100% }
	</style>
	<script type="text/javascript"
	src="https://maps.googleapis.com/maps/api/js?key=]]..APIkey..[[&sensor=true">
	</script>
	<script type="text/javascript">
	function initialize() {
	var myOptions = {
	center: new google.maps.LatLng(]]..lat..', '..lon..[[),
	zoom: 12,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById("map_canvas"),
	myOptions);

	]]..markerString..[[

	}
	</script>
	</head>
	<body onload="initialize()">
	<div id="map_canvas" style="width:100%; height:100%"></div>
	</body>
	</html>
]]
--This string is the text that will be written to our HTML file.

 
 
------------------------
--HTML FILE CREATION
------------------------
 
local htmlFile = io.open( path, "w" )
htmlFile:write( mapString )
io.close( htmlFile )
--The above code writes our "mapString" variable to an HTML file and saves it in the Documents directory.

 
 
------------------------
--LOAD YOUR MAP!
------------------------

native.showWebPopup (0, 0, display.contentWidth, display.contentHeight, "map.html",{baseUrl=system.DocumentsDirectory})
--This loads up our custom-made HTML document in a WebPopup. Enjoy!

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

--MAIN.LUA (Android MapView workaround for Corona SDK by Jason Schroeder)

------------------------

--REQUIRED VARIABLES

------------------------

local APIkey = "YOUR_API_KEY" --This variable is your Google Maps API key (copy and paste it from the web). You can obtain a Google Maps API Key for free at http://code.google.com/apis/console

local lat, lon = 37.450876, -122.156689 --These are the latitude and longitude values where our map will center when it first loads.

local path = system.pathForFile( "map.html", system.DocumentsDirectory ) --This is the path for the HTML document that we'll create to load our custom Google Map.

------------------------

--OPTIONAL MARKER DATA

------------------------

local markerTable = {}

--This table will contain all of the data for our map markers.

markerTable[1]={

name = "Ansca HQ",

lat = 37.450876,

lon = -122.156689,

notes = "Play more. Code less."

}

markerTable[2]={

name = "Chipotle Mexican Grill",

lat = 37.4238658,

lon = -122.1433494,

notes = "Because Corona is even tastier with a burrito in your hand."

}

-- The above variables contain data for 2 markers. You can place additional markers, or attach other pieces of data to each marker (address, phone #, etc.)

local markerCode = {}

--This table will contain the compiled Javascript to place the markers we specified in the markerList table.

for i=1, #markerTable do

markerCode[i] = [[

var infowindow]]..i..[[ = new google.maps.InfoWindow({

content: "<strong>]]..markerTable[i].name..[[</strong><br>]]..markerTable[i].notes..[["

});

var marker]]..i..[[ = new google.maps.Marker({

position: new google.maps.LatLng(]]..markerTable[i].lat..', '..markerTable[i].lon..[[),

map: map,

animation: google.maps.Animation.DROP,

});

google.maps.event.addListener(marker]]..i..[[, 'click', function() {

infowindow]]..i..[[.open(map,marker]]..i..[[);

});

]]

end

local markerString = table.concat(markerCode)

--The above code compiles a string that contains all of our marker data, to be inserted (optionally) into the HTML file we're creating.

------------------------

--HTML & JAVASCRIPT CODE

------------------------

local mapString = [[

<!DOCTYPE html>

<html>

<head>

html { height: 100% }

body { height: 100%; margin: 0; padding: 0 }

#map_canvas { height: 100% }

</style>

src="http://maps.googleapis.com/maps/api/js?key=]]..APIkey..[[&sensor=true">

</script>

function initialize() {

var myOptions = {

center: new google.maps.LatLng(]]..lat..', '..lon..[[),

zoom: 12,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById("map_canvas"),

myOptions);

]]..markerString..[[

}

</script>

</head>

</body>

</html>

]]

--This string is the text that will be written to our HTML file.

------------------------

--HTML FILE CREATION

------------------------

local htmlFile = io.open( path, "w" )

htmlFile:write( mapString )

io.close( htmlFile )

--The above code writes our "mapString" variable to an HTML file and saves it in the Documents directory.

------------------------

--LOAD YOUR MAP!

------------------------

native.showWebPopup (0, 0, display.contentWidth, display.contentHeight, "map.html",{baseUrl=system.DocumentsDirectory})

--This loads up our custom-made HTML document in a WebPopup. Enjoy!

No Comments Yet

Leave a Reply Cancel reply

Please Do Not Feed The Developers

Jason on GitHub

Jason on Twitter