Search and Top Navigation
Ticket #5038: index.html
File index.html, 3.5 KB (added by lsiden, January 04, 2010 09:39PM UTC)
The unsuccessful 'close' event handler is on line 33. The successful one is on line 39.
<!DOCTYPE html "-//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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="cache-control" content="no-cache">
<title>Google Maps JavaScript API Example</title>
<link type="text/css" href="jquery-ui/css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="jquery-ui/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui/js/jquery-ui-1.7.2.custom.min.js"></script>
<!--
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
-->
<script type="text/javascript" src="jquery.json-2.2.js"></script>
<script type="text/javascript" src="http://www.thomasfrank.se/downloadableJS/xml2json.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAU30dLdwngRfuIx_fqzIlbRRMzm9EFgCeUTIY4VMDguMmHKsUbBSTuwMsSH3ybDfxRpsZp6ZAHF52GA&sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
var geocoder, map;
$(document).ready(function() {
$.ui.dialog.defaults.bgiframe = true;
$('#no-match').dialog({autoOpen: false});
$('#several-matches').dialog({
autoOpen: false,
// This doesn't work on Google Chrome or FF.
// Haven't tested IE.
close: function(ev, ui) {
$('#textarea-user-address')[0].focus();
},
});
// I had to do this instead.
$('#no-match').bind('dialogclose', function(event, ui) {
$('#textarea-user-address')[0].focus();
});
if (GBrowserIsCompatible()) {
geocoder = new GClientGeocoder();
var canvas = document.getElementById("map_canvas");
map = new GMap2(canvas);
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.setUIToDefault();
}
});
function showAddress(address) {
geocoder.getLatLng(address, function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address.replace(/, /g, '<br/>'));
}
});
}
function verifyAddress() {
if (!map || !geocoder) return;
geocoder.getLocations($('#textarea-user-address').val(), function(response) {
var a_pm = $.grep(response.Placemark, function(pm, i) {
return pm.AddressDetails.Accuracy >= 8;
});
var a_addr = $.map(a_pm, function(pm, i) {
return pm.address;
});
//document.getElementById('placemark').value = $.toJSON(a_addr);
if (a_addr.length == 0) {
$('#no-match').dialog('open');
}
else {
showAddress(a_addr[0]);
}
});
}
</script>
</head>
<body onunload="GUnload()">
<!--
-->
<textarea id="textarea-user-address" cols="30" rows="3" id="address" onchange="verifyAddress(this);"></textarea>
<div id="map_canvas" style="width: 500px; height: 300px"></div>
<div id="no-match">
<p>The address you entered needs to be more specific.</p>
<p>Please correct.</p>
</div>
<div id="several-matches">
<p>There is more than one match for the address you entered.</p>
<p>Please choose one or select "I want to retype the address".</p>
</div>
</body>
</html>
Download in other formats:
Original Format
File index.html, 3.5 KB (added by lsiden, January 04, 2010 09:39PM UTC)
The unsuccessful 'close' event handler is on line 33. The successful one is on line 39.
<!DOCTYPE html "-//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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="cache-control" content="no-cache">
<title>Google Maps JavaScript API Example</title>
<link type="text/css" href="jquery-ui/css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="jquery-ui/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui/js/jquery-ui-1.7.2.custom.min.js"></script>
<!--
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
-->
<script type="text/javascript" src="jquery.json-2.2.js"></script>
<script type="text/javascript" src="http://www.thomasfrank.se/downloadableJS/xml2json.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAU30dLdwngRfuIx_fqzIlbRRMzm9EFgCeUTIY4VMDguMmHKsUbBSTuwMsSH3ybDfxRpsZp6ZAHF52GA&sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
var geocoder, map;
$(document).ready(function() {
$.ui.dialog.defaults.bgiframe = true;
$('#no-match').dialog({autoOpen: false});
$('#several-matches').dialog({
autoOpen: false,
// This doesn't work on Google Chrome or FF.
// Haven't tested IE.
close: function(ev, ui) {
$('#textarea-user-address')[0].focus();
},
});
// I had to do this instead.
$('#no-match').bind('dialogclose', function(event, ui) {
$('#textarea-user-address')[0].focus();
});
if (GBrowserIsCompatible()) {
geocoder = new GClientGeocoder();
var canvas = document.getElementById("map_canvas");
map = new GMap2(canvas);
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.setUIToDefault();
}
});
function showAddress(address) {
geocoder.getLatLng(address, function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address.replace(/, /g, '<br/>'));
}
});
}
function verifyAddress() {
if (!map || !geocoder) return;
geocoder.getLocations($('#textarea-user-address').val(), function(response) {
var a_pm = $.grep(response.Placemark, function(pm, i) {
return pm.AddressDetails.Accuracy >= 8;
});
var a_addr = $.map(a_pm, function(pm, i) {
return pm.address;
});
//document.getElementById('placemark').value = $.toJSON(a_addr);
if (a_addr.length == 0) {
$('#no-match').dialog('open');
}
else {
showAddress(a_addr[0]);
}
});
}
</script>
</head>
<body onunload="GUnload()">
<!--
-->
<textarea id="textarea-user-address" cols="30" rows="3" id="address" onchange="verifyAddress(this);"></textarea>
<div id="map_canvas" style="width: 500px; height: 300px"></div>
<div id="no-match">
<p>The address you entered needs to be more specific.</p>
<p>Please correct.</p>
</div>
<div id="several-matches">
<p>There is more than one match for the address you entered.</p>
<p>Please choose one or select "I want to retype the address".</p>
</div>
</body>
</html>