Ticket #5038: index.html

File index.html, 3.5 KB (added by lsiden, 12 years ago)

The unsuccessful 'close' event handler is on line 33. The successful one is on line 39.

Line 
1<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
2  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml">
4  <head>
5    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
6    <meta http-equiv="cache-control" content="no-cache">
7    <title>Google Maps JavaScript API Example</title>
8    <link type="text/css" href="jquery-ui/css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="Stylesheet" />     
9    <script type="text/javascript" src="jquery-ui/js/jquery-1.3.2.min.js"></script>
10    <script type="text/javascript" src="jquery-ui/js/jquery-ui-1.7.2.custom.min.js"></script>
11<!--
12    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
13    <script type="text/javascript">
14      google.load("jquery", "1.3.2");
15    </script>
16-->
17    <script type="text/javascript" src="jquery.json-2.2.js"></script>
18    <script type="text/javascript" src="http://www.thomasfrank.se/downloadableJS/xml2json.js"></script>
19    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAU30dLdwngRfuIx_fqzIlbRRMzm9EFgCeUTIY4VMDguMmHKsUbBSTuwMsSH3ybDfxRpsZp6ZAHF52GA&sensor=false"
20            type="text/javascript"></script>
21    <script type="text/javascript">
22
23    var geocoder, map;
24
25    $(document).ready(function() {
26      $.ui.dialog.defaults.bgiframe = true;
27      $('#no-match').dialog({autoOpen: false});
28      $('#several-matches').dialog({
29        autoOpen: false,
30
31        // This doesn't work on Google Chrome or FF.
32        // Haven't tested IE.
33        close: function(ev, ui) {
34          $('#textarea-user-address')[0].focus();
35        },
36      });
37
38      // I had to do this instead.
39      $('#no-match').bind('dialogclose', function(event, ui) {
40        $('#textarea-user-address')[0].focus();
41      });
42
43      if (GBrowserIsCompatible()) {
44        geocoder = new GClientGeocoder();
45        var canvas = document.getElementById("map_canvas");
46        map = new GMap2(canvas);
47        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
48        map.setUIToDefault();
49      }
50    });
51
52    function showAddress(address) {
53      geocoder.getLatLng(address, function(point) {
54        if (!point) {
55          alert(address + " not found");
56        } else {
57          map.setCenter(point, 13);
58          var marker = new GMarker(point);
59          map.addOverlay(marker);
60          marker.openInfoWindowHtml(address.replace(/, /g, '<br/>'));
61        }
62      });
63    }
64
65    function verifyAddress() {
66      if (!map || !geocoder) return;
67
68      geocoder.getLocations($('#textarea-user-address').val(), function(response) {
69        var a_pm = $.grep(response.Placemark, function(pm, i) {
70          return pm.AddressDetails.Accuracy >= 8;
71        });
72        var a_addr = $.map(a_pm, function(pm, i) {
73          return pm.address;
74        });
75        //document.getElementById('placemark').value = $.toJSON(a_addr);
76
77        if (a_addr.length == 0) {
78          $('#no-match').dialog('open');
79        }
80        else {
81          showAddress(a_addr[0]);
82        }
83      });
84    }
85
86    </script>
87  </head>
88  <body onunload="GUnload()">
89<!--
90-->
91    <textarea id="textarea-user-address" cols="30" rows="3" id="address" onchange="verifyAddress(this);"></textarea>
92    <div id="map_canvas" style="width: 500px; height: 300px"></div>
93    <div id="no-match">
94      <p>The address you entered needs to be more specific.</p>
95      <p>Please correct.</p>
96    </div>
97    <div id="several-matches">
98      <p>There is more than one match for the address you entered.</p>
99      <p>Please choose one or select "I want to retype the address".</p>
100    </div>
101  </body>
102</html>