0

I need to load google map .js api in bootstrap 3 modal box after click in link and open modalbox using google map initialize method like this :

html:

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>

<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                 <h4 class="modal-title">Modal title</h4>

            </div>
            <div class="modal-body">Location:
                <input type="text" id="us2-address" style="width: 200px" />Radius:
                <input type="text" id="us2-radius" />
                <div id="us2" style="height: 400px;"></div>Lat.:
                <input type="text" id="us2-lat" />Long.:
                <input type="text" id="us2-lon" />
            </div>
            <div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a>
 <a href="#" class="btn btn-primary" id="save-changes">Save changes</a>

            </div>
        </div>
    </div>
</div>

JS:

var stillPresent = false;
function initialize() {
    if (stillPresent == false) {
        $('#us2').locationpicker({
            location : {
                latitude : 46.15242437752303,
                longitude : 2.7470703125
            },
            radius : 300,
            inputBinding : {
                latitudeInput : $('#us2-lat'),
                longitudeInput : $('#us2-lon'),
                radiusInput : $('#us2-radius'),
                locationNameInput : $('#us2-address')
            }
        });
        stillPresent = true;
    }
}

function loadScript() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://maps.google.com/maps/api/js?sensor=false&libraries=places&callback=initialize';
    document.body.appendChild(script);
}
$('#myModal').on('shown.bs.modal', function(e) {
    loadScript();
});

But in action this not work and not show map for me.

how do fix this problem?!

DEMO FIDDLE

Pink Code
  • 1,802
  • 7
  • 43
  • 65

1 Answers1

1

The problem in your demo is the initialize() function is scoped within the onload handler. This can be seen in error thrown in browser console.

Change the scope so that the function is global within window namespace and code works fine.

I suspect in your production code you have scoped the function inside a jQuery ready handler.

I also suggest you only load the google maps script once if you plan on using modal more than once

DEMO

charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • You right this worked. i have a new problem. I add two input for save longitude and latitude after click save change in modalbox. in first time location picker worked true but after click save changes and back to modalbox location picker not work!! how do fix this ?! demo : http://jsfiddle.net/Lzv7w/16/ – Pink Code Oct 12 '14 at 20:22
  • I suggest you create a new question for that along with relevant code – charlietfl Oct 12 '14 at 20:23
  • I add new Q : http://stackoverflow.com/questions/26329644/location-picker-not-work-in-google-map-initialize please check this. – Pink Code Oct 12 '14 at 20:28
  • u see new demo and Q? – Pink Code Oct 12 '14 at 20:44
  • Your fiddle demo link http://jsfiddle.net/Lzv7w/14/ code is not working due to script linking issue.Kindly check and update – Pranesh Janarthanan Sep 02 '17 at 10:31