Google Maps JavaScript API inside of jQuery Dialog Window -
i use google maps javascript api display maps - https://developers.google.com/maps/documentation/javascript/
there features in api need static maps not have.
so page works fine stand alone page:
<!doctype html> <html> <head> <title>map</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script> function initialize() { // set map coordinates lat , lng var cord = new google.maps.latlng(28.545078,-81.377196); // set map options var mapoptions = { zoom: 15, center: cord, maptypeid: google.maps.maptypeid.roadmap }; // set map var map = new google.maps.map(document.getelementbyid('map-canvas'),mapoptions); // set map marker var marker = new google.maps.marker({ position: cord, map: map, title: 'test' }); } // load map google.maps.event.adddomlistener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"style="width:600px; height:500px"></div> </body> </html> i need page working inside of jquery dialog window.
i call dialog , load external page this:
<script type="text/javascript"> $(document).ready(function() { $("#cc").click(function(){ $("#detailwin").dialog({ autoopen: false, modal: true, width:700, height:600, show: "fade", close: "fade", open: function () { $(this).load('p2.php'); } }); $('#detailwin').dialog("open"); }); }); </script> so when include first set of code maps.php page not work. realize not want include , tags on included page. i've been trying many different ways cannot maps load in dialog window.
i've tried loading maps api url jquery $.getscript() it's not helping.
if can me figure out best way working appreciated because stuck.
thanks!
update:
i ended getting work (this second page maps.php):
<script type="text/javascript"> $(document).ready(function() { function initialize() { // set map coordinates lat , lng var cord = new google.maps.latlng(28.545078,-81.377196); // set map options var mapoptions = { zoom: 15, center: cord, maptypeid: google.maps.maptypeid.roadmap }; // set map var map = new google.maps.map(document.getelementbyid('map-canvas'),mapoptions); // set map marker var marker = new google.maps.marker({ position: cord, map: map, title: 'test' }); } // load map google.maps.event.adddomlistener(window, 'load', initialize); initialize(); }); </script> <div> <div id="map-canvas"style="width:600px; height:500px"></div> </div>
there 2 important considerations here :-
- ensure javascript/jquery included on parent page. don't try deliver js via ajax.
- ensure map initialized when canvas visible. initializing invisible canvas ever partially successful.
depending on trying do, code :
$(document).ready(function() { var $detailwin, dialoginitialized, map; function getdialogcontent() { if(dialoginitialized) return; dialoginitialized = true;//well, @ least initializing. $.get('p2.php').done(function(html) { $detailwin.html(html); var cord = new google.maps.latlng(28.545078, -81.377196); var mapoptions = { zoom: 15, center: cord, maptypeid: google.maps.maptypeid.roadmap }; map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); var marker = new google.maps.marker({ position: cord, map: map, title: 'test' }); }).error(function(jqxhr, textstatus, errorthrown) { $detailwin.text(textstatus); }); } $detailwin = $("#detailwin").dialog({ autoopen: false, modal: true, width: 700, height: 600, show: "fade", close: "fade", open: getdialogcontent }); $("#cc").on('click', function() { $detailwin.dialog("open"); }); }); notes :
- ensure
p2.php, delivers html fragment including map-canvas, no<head>or<body>tags , no javascript. - the code above performs one-off initialization of dialog (including map). different if want reload dialog (or aspect of such new set of markers) every time dialog opened.
Comments
Post a Comment