tutorial three :: advanced [???] topics :: 00
Step 00 doesn't start out very advanced. We're just going to create a basic map, declare some global variables, get ready to use some polylines, and do the UI.
Here's our code. Add the following to the <html> tag:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
Add the following within the <head> tags:
<style type="text/css" media="all">
<!--
v\:* {
behavior:url(#default#VML);
}
-->
</style>
[add some info about VML here]
Now we start the JavaScript that will be the core of this tutorial First, we'll declare some global variables. These variables are global, because they're declared outside of any functions. Therefore all functions will have read/write access to these variables. At the moment we'll just declare them, later you'll see what they're for.
We'll also get our map prepped. So, in the <head>, add:
1. <script type="text/javascript" language="javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAY4fplJ67BZi1AR7Ilefq2RTf-p6f-jBiOKWFQzzWSYwKG0Mn1BRGGs164PZM7UTwBaDtnmm7i60z-g"></script>
2. <script type="text/javascript" language="javascript">
3. <!-- begin hiding script from older browsers
4. /* ------- declare global variables and objects ------- */
5. var strAction;
6. var objMap, objXml, arrMarkers;
7. var objPointFrom, intPoint;
8. var blnDownloaded = false;
9. var strTutorialData = "xml/tutorialone.xml";
10. var strTest = "";
11. /* ------- functions ------- */
12. function wmLoad() {
13. // test for browser compatibility
14. if (GBrowserIsCompatible()) {
15. // initialize map and form
16. objMap = new GMap2(document.getElementById("map"));
17. var objTools = document.getElementById("rdoPan");
18. objTools.checked = true;
19. objTools = document.getElementById("txtDistance");
20. objTools.value = "";
21. // add map controls
22. objMap.addControl(new GMapTypeControl());
23. objMap.addControl(new GLargeMapControl());
24. objMap.addControl (new GScaleControl());
25. } else {
26. // browser doesn't support google maps
27. alert("We're sorry, but your browser doesn't support Google Maps. Please upgrade to a compatible browser.");
28. if (document.getElementById) {
29. objMap = document.getElementById("map");
30. objMap.innerHTML = '<p><b>→ <a href="http://local.google.com/support/bin/answer.py?answer=16532&topic=1499" target="_blank">upgrade your browser</a></b></p>';
31. }
32. }
33. }
34. // end hiding script from older browsers -->
35. </script>
36. </head>
Based on the previous tutorial, I think this code should be fairly self-explanatory. The only new thing here occurs on lines 17–20, where we initialize the form we're about to create.
We also need to add the following function calls to the <body> tag:
<body onload="javascript:wmLoad();" onunload="javascript:GUnload();">
Finally, the UI. Add the following code to the <body>:
1. <div id="datadisplay"> </div>
2. <div id="map" style="height:300px;width:500px;"></div>
3. <div style="border:1px solid #CCCCCC;margin:5px 5px 5px 0;padding:5px;width:490px;">
4. <input id="rdoPan" name="rdoTools" type="radio" value="pan" selected="selected" onclick="javascript:wmTools(this.value);" /> <label for="rdoPan">pan + query</label>
5. <input id="rdoMeasure" name="rdoTools" type="radio" value="measure" onclick="javascript:wmTools(this.value);" /> <label for="rdoMeasure">measure</label>
6. <input id="rdoSelect" name="rdoTools" type="radio" value="select" onclick="javascript:wmTools(this.value);" /> <label for="rdoSelect">select all points within</label> <input id="txtDistance" name="txtDistance" type="text" style="border-bottom:1px solid #333333;border-top:0;border-left:0;border-right:0;width:30px" /> feet
8. </div>
A few notes on the code here. Line one defines the <div> that will output our data. Line two defines the <div> that will contain our map.
In line three, we can see some serious abuse of inline CSS. In a real application, we probably wouldn't see. All CSS would be nicely tucked away in an external stylesheets. [Then again, given time/budget constraints, hacks like this are pretty prevalent]
Line four begins our toolbox. Note that radio buttons have to have the same name to work, but must have different IDs for the <label> to work and to use JavaScript's handy getElementById function. We'll be using both, hence the need for a unique ID and the same name.
last update . 20061113
