javascript - Adding Google maps inside a modal in HTML -
i have working distance calculator, use google api. because takes lot of space on website, decided put inside modal.
the problem map disappears , calculations doesn't work anymore.. see screenshot.
and when use calculator in empty html file without modal, work.
so modal code is:
<button style="margin:7px 15px 17px 0;" type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#mymodal">bereken nu met korting!</button> <div id="mymodal" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <!-- modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">modal header</h4> </div> <div class="modal-body"> <p> <label for="start">start: </label> <input type="text" name="start" id="start" /> <label for="end">end: </label> <input type="text" name="end" id="end" /> <input type="submit" value="calculate route" onclick="calcroute()" /> </p> <p> <label for="distance">distance (km): </label> <input type="text" name="distance" id="distance" readonly="true" /> <input type="text" name="durationh" id="timeh" readonly="true" /> <input type="text" name="durationm" id="timem" readonly="true" /> </p> </div> <div class="modal-body" id="map_canvas"></div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> </div> </div> </div> and js use is:
var directiondisplay; var map; function initialize() { directionsdisplay = new google.maps.directionsrenderer(); var melbourne = new google.maps.latlng(51.6904085, 5.29543006); var myoptions = { zoom:12, maptypeid: google.maps.maptypeid.roadmap, center: melbourne } map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions); directionsdisplay.setmap(map); } var directionsservice = new google.maps.directionsservice(); function calcroute() { var start = document.getelementbyid("start").value; var end = document.getelementbyid("end").value; var distanceinput = document.getelementbyid("distance"); var hours = document.getelementbyid("timeh"); var minutes = document.getelementbyid("timem"); var request = { origin:start, destination:end, travelmode: google.maps.directionstravelmode.driving }; directionsservice.route(request, function(response, status) { if (status == google.maps.directionsstatus.ok) { directionsdisplay.setdirections(response); distanceinput.value = response.routes[0].legs[0].distance.value / 1000; <!-- added myself--> hours.value = parseint( response.routes[0].legs[0].duration.value / 3600) % 24; minutes.value = parseint( response.routes[0].legs[0].duration.value / 60) % 60; <!-- end adding--> } }); } css simple:
#map_canvas { height: 100%; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5udgw3ahqw6xtjmnntr+obrjulgknjeo78p4b0yrw= sha512-nno+ycheyn0smmxsswnf/onx6/kwjuztlnzbjaukhtk0c+zt+q5jocx0ufhxq6rjr9jg6es8gpud2uzcydlqsw==" crossorigin="anonymous"> <style> #map_canvas { height: 100%; } </style> <button style="margin:7px 15px 17px 0;" type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#mymodal">bereken nu met korting!</button> <div id="mymodal" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <!-- modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">modal header</h4> </div> <div class="modal-body"> <p> <label for="start">start: </label> <input type="text" name="start" id="start" /> <label for="end">end: </label> <input type="text" name="end" id="end" /> <input type="submit" value="calculate route" onclick="calcroute()" /> </p> <p> <label for="distance">distance (km): </label> <input type="text" name="distance" id="distance" readonly="true" /> <input type="text" name="durationh" id="timeh" readonly="true" /> <input type="text" name="durationm" id="timem" readonly="true" /> </p> </div> <div class="modal-body" id="map_canvas"></div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-kxn5pumvxcw+dayznun+drmdg1ifl3agk0p/pqt9kao= sha512-2e8qq0etcfwri4hjbzqia3uoyfk6tbnyg+qsaibzlyw9xf3swzhn/lxe9fth1u45dppf07yj94ksuhhwe4yk1a==" crossorigin="anonymous"></script> <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> <script> var directiondisplay; var map; initialize() function initialize() { directionsdisplay = new google.maps.directionsrenderer(); var melbourne = new google.maps.latlng(51.6904085, 5.29543006); var myoptions = { zoom:12, maptypeid: google.maps.maptypeid.roadmap, center: melbourne } map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions); directionsdisplay.setmap(map); } var directionsservice = new google.maps.directionsservice(); function calcroute() { var start = document.getelementbyid("start").value; var end = document.getelementbyid("end").value; var distanceinput = document.getelementbyid("distance"); var hours = document.getelementbyid("timeh"); var minutes = document.getelementbyid("timem"); //after click cacl call google maps size reset google.maps.event.trigger(map, 'resize') var request = { origin:start, destination:end, travelmode: google.maps.directionstravelmode.driving }; directionsservice.route(request, function(response, status) { if (status == google.maps.directionsstatus.ok) { directionsdisplay.setdirections(response); distanceinput.value = response.routes[0].legs[0].distance.value / 1000; hours.value = parseint( response.routes[0].legs[0].duration.value / 3600) % 24; minutes.value = parseint( response.routes[0].legs[0].duration.value / 60) % 60; <!-- end adding--> } }); } </script> 
Comments
Post a Comment