link76 wrote:
how to create html page with live code ?
It's very easy.
-take a standard html page (with javascript) that manages the creation of a google map and the creation of markers
-remove the variable parts, replaced them with special "tags"
-then in LiveCode your script will "fill in" this script with data (by replacing the tags)
-save the file and initiate the command launch
Here is the "core" html page i use. You'll notice the 2 tags [DATA1] [DATA2]
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PC Pro - Google Maps Simple Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(document).ready(function () {
// Define the latitude and longitude positions
[DATA1]
// Set up options for the Google map
var myOptions = {
zoom: 6,
center: latlngPos1,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Define the map
map = new google.maps.Map(document.getElementById("map"), myOptions);
// Add the marker
[DATA2]
});
</script>
</head>
<body>
<div id="map" style="width:800px;height:800px;margin-top:10px;"></div>
</body>
</html>
And here my script :
Code: Select all
put fld "coreScript" into lamorce
put empty into lesData1
put empty into lesData2
set itemdelimiter to tab
--- here my data, name of the marker and geocode of the marker, one per line
repeat with i = 1 to the number of lines of aTraiter
put item 1 of line i of atraiter into leNom
put item 2 of line i of atraiter into lesCoordonnees
put "var latlngPos"&i&" = new google.maps.LatLng("&lesCoordonnees&");"&cr after lesData1
put "var marker = new google.maps.Marker({"&cr after lesData2
put "position: latlngPos"&i&","&cr after lesData2
put " map: map,"&cr after lesData2
put "title: ""e&leNom"e&"});"&cr after lesData2
end repeat
---we replace the tags with our data
replace "[DATA1]" with lesData1 in lamorce
replace "[DATA2]" with lesData2 in lamorce
--then save the file as a html file, and launch into browser
put the effective filename of this stack into tPath
set the itemDelimiter to slash
delete last item of tPath
put "file:"&tPath&"/map.html" into myFile
put lamorce into url myFile
launch url "file:"&tPath&"/map.html"
To help you, I attach a html file generated by my script (with 3 markers).
