jquery ui modal google maps
Hello experts.
I want to use the jquery modal and in the pop up window the google maps .
I downloaded the google maps code with the reverse geocoding tutorial from here:
http://code.google.com/intl/el-GR/apis/maps/documentation/services.html.
The working modal is from the solution here:
https://www.experts-exchange.com/questions/24657327/Jquery-UI-modal-content.html.
Because the mypopup.cfm is working without problems (when i load it direct)but when i'm trying to call the page ia a pop up , the page shows that it is trying to load something but nothing happens i think the problem has to do with coldfusion language.
Any help?
I want to use the jquery modal and in the pop up window the google maps .
I downloaded the google maps code with the reverse geocoding tutorial from here:
http://code.google.com/intl/el-GR/apis/maps/documentation/services.html.
The working modal is from the solution here:
https://www.experts-exchange.com/questions/24657327/Jquery-UI-modal-content.html.
Because the mypopup.cfm is working without problems (when i load it direct)but when i'm trying to call the page ia a pop up , the page shows that it is trying to load something but nothing happens i think the problem has to do with coldfusion language.
Any help?
test page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
$("#dialog").load("getcoordinates.cfm"); // Add line for load data
return false;
});
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>
<style type="text/css">
/*demo page css*/
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
</style>
</head>
<body>
<p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>
<div id="dialog" title="Dialog Title">
</div>
</body>
</html>
mypopup.cfm:
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API Example: Reverse Geocoder</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=mykey"
type="text/javascript"></script>
<script type="text/javascript">
var map;
var geocoder;
var address;
initialize=function () {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(46.153332,18.168331), 4);
map.setUIToDefault();
GEvent.addListener(map, "click", getAddress);
geocoder = new GClientGeocoder();
}
getAddress=function (overlay, latlng) {
if (latlng != null) {
address = latlng;
geocoder.getLocations(latlng, showAddress);
}
}
showAddress=function (response) {
map.clearOverlays();
if (!response || response.Status.code != 200) {
alert("Status Code:" + response.Status.code);
} else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(
'<b>latlng:</b>' + place.Point.coordinates[1] + "," + place.Point.coordinates[0] + '<br>' +
'<b>Status Request:</b>' + response.Status.request + '<br>' +
'<b>Address:</b>' + place.address + '<br>' +
'<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode);
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 650px; height: 400px"></div>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you azadi
regards
Panos
regards
Panos
ASKER
I did have a API key (i did not post it) and make all the changes.Now it is working perfect.
Thank you.