Download presentation
Presentation is loading. Please wait.
1
Creating Databases Example using Google Maps API + file creation. Dollar sign problem. Classwork/Homework: [catch up]. Work on final project
2
Google Maps example Challenge: create list of positions defining polygon(s) for a quiz (or something else) Solution: Create .html and .php pair of scripts to create file Create drawing program using the file created. Recreates inserting name of file Note: student's project will still need work on file, namely combining multiple files into one.
3
Scripts A file has been created (with the name of file
hard coded in it):
4
About the creation html file
Mouse clicks on map add to an array A form invokes a client side function "sendit()" using onsubmit and then the server side writeoutlatlongs.php using action The form also requests a name for the file.
5
Html script </style> <script type="text/javascript" charset="UTF-8" src=" </script> <script> var map; var redx = "rx1.png"; function init() { blatlng = new google.maps.LatLng( , ); myOptions = { zoom: 17, center: blatlng, mapTypeId: google.maps.MapTypeId.SATELLITE }; map = new google.maps.Map(document.getElementById("place"), myOptions); listener = google.maps.event.addListener(map, 'click', function(event) { checkit(event.latLng); }); }
6
Html script, cont. var elements = []; var markersArray = []; function sendit() { var data = elements.join(':'); //alert("in sendit, data is "+data); document.f.positions.value = data; return false; } function checkit(clatlng) { lastmarker = clatlng; marker = new google.maps.Marker({ position: clatlng, icon: redx, map: map }); markersArray.push(marker); pos = "["+String(clatlng.lat())+", "+String(clatlng.lng())+"]"; elements.push(pos); //alert("position is "+pos+" and number of elements is "+elements.length); </script>
7
Html script, cont.: body <body onLoad="init();"> <header> Mark polygon </header> <div id="place" style="width:800px; height:600px"></div> <article> <p> When done inserting points, accept or enter name of area to be used as file name and click on Done. </p> <form name="f" onsubmit="sendit();" action="writeoutlatlongs.php"> Your name for the polygon <input type="text" name="subject" value="myplace"/> <br/> <input type="submit" value="Done" /> <input type="hidden" name="positions" /> </form> </article> </body>
8
php script <?php $newname = $_GET['subject']; $positions = $_GET['positions']; $filen ="uploads/" . $newname . ".js" ; $open = fopen($filen,"w"); print ("<br/> Saving positions in $filen <br/> "); //explode into array $positions = explode(":",$positions); //now write out each pair as line in file
9
php script, cont. if ($open) { fwrite($open,"var positions = [ \n"); for($i=0;$i<count($positions)-1;$i++) { fwrite($open,$positions[$i].",\n"); } fwrite($open,$positions[$i]."\n "); // omit comma after last element fwrite($open,"]; \n"); fclose($open); else { print ("<br/> Unable to write updated file.<br/>"); ?>
10
myplace.js var positions = [ [ , ], [ , ], [ , ], [ , ], [ , ] ];
11
Draw script You can view source. Makes use of Google Maps API google.maps.Polygon and google.maps.Infowindow Robust system could include facility for editing positions.
12
What if… CTS assigned you a password with a dollar sign in it.
Two solutions (say password was abc$def Use single quotes: $password = ‘abc$def’ Escape character: $password = “abc\$def” Can use this in other situations.
13
<?php $stringWdollar = 'abc$def'; print ("string with single quotes ".$stringWdollar); print("<br/>"); $stringWdollarescaped = "abc\$def"; print ("string with dollar sign escaped ".$stringWdollarescaped); print ("<br/>"); $stringWdollarescapedsinglequotes = 'abc\$def'; print ("string with dollar sign escaped, single quotes ".$stringWdollarescapedsinglequotes); $stringWdollarplain = "abc$def"; print ("string with dollar, double quotes ".$stringWdollarplain); ?>
14
Classwork/homework [Catch up with postings, showing work.]
[Evaluation surveys.] Prepare to show something on final project.
![Classwork/homework [Catch up with postings, showing work.]](http://slideplayer.com./slide/12228654/72/images/14/Classwork%2Fhomework+%5BCatch+up+with+postings%2C+showing+work.%5D.jpg "[Evaluation surveys.] Prepare to show something on final project.")
Similar presentations
![Programming Games Google Map API examples. CSS. Classwork/homework: Catch up. Upload work. Show your [more] complex Google Maps API example. Plan your.](/24/7516764/big_thumb.jpg "Programming Games Google Map API examples. CSS. Classwork/homework: Catch up. Upload work. Show your [more] complex Google Maps API example. Plan your.>")
