按钮上的setTimeout事件单击不起作用

Question

Hey guys I am trying to make it to where when this button is clicked, the setTimeout function will kick off and display a google map in a modal. Right now, whenever I click the button the modal just gets stuck displaying the loading gif. Any ideas of how to fix this would be greatly appreciated! (I have to have the map on a timer when it loads or else it will just load in the top left corner of the modal.)

The button:

<p><a id ="hammondButton" data-toggle="modal" href="#HmapModal" class="btn btn-de
fault"><b>View Map &raquo;</b></a></p>

The code:

<!-- Hammond Modal -->
    <div class="modal fade" id="HmapModal" tabindex="-1" role="dialog" aria-labelledby="HmapModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" align="center">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h2 class="modal-title">Hammond Location</h2>
                </div>
                <div class="modal-body">
                    <div id="loadingGif" style="position: fixed; margin-left: 14%; margin-top: 15%;" ><img src="~/Content/Images/LGIF.gif" /></div>
                    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
                    <div style="overflow:hidden;height:500px;width:578px;">
                        <div id="gmap_canvas" style="height:500px;width:578px;"></div>
                        <style>
                            #gmap_canvas img {
                                max-width: none !important;
                                background: none !important;
                            }
                        </style><a class="google-map-code" href="http://www.map-embed.com" id="get-map-data">www.map-embed.com</a>
                    </div>
                    <script type="text/javascript">
                        $("#hammondButton").button().click(function () {
                            setTimeout(function init_map() {
                                google.maps.event.trigger(map, 'resize');
                                var myOptions = {
                                    zoom: 13,
                                    center: new google.maps.LatLng(30.4900271, -90.4629746),
                                    mapTypeId: google.maps.MapTypeId.ROADMAP
                                };
                                map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
                                marker = new google.maps.Marker({ map: map, position: new google.maps.LatLng(30.4900271, -90.4629746) });
                                google.maps.event.addListener(marker, "click", function() { infowindow.open(map, marker); });
                                infowindow.open(map, marker);
                            }, 2500);
                            google.maps.event.addDomListener(window, 'load', init_map);
                            google.maps.event.trigger(map, 'resize');
                        });
                    </script>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" onclick="window.location.href=window.location.href">Close</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

Answer 1

In your code you haven;t given the google API key.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

If you want to use <a> , in your java script write the following.

$("#hammondButton").button().click(function () {
 event.preventDefault();
}

or else, Just use button instead of <a>.

<button id="HmapModal" data-toggle="modal" data-target="HmapModal"></button>

Then add click even in java script

$("#hammondButton").click(function () {
                            setTimeout(function init_map() {
                                google.maps.event.trigger(map, 'resize');
                                var myOptions = {
                                    zoom: 13,
                                    center: new google.maps.LatLng(30.4900271, -90.4629746),
                                    mapTypeId: google.maps.MapTypeId.ROADMAP
                                };
                                map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
                                marker = new google.maps.Marker({ map: map, position: new google.maps.LatLng(30.4900271, -90.4629746) });
                                google.maps.event.addListener(marker, "click", function() { infowindow.open(map, marker); });
                                infowindow.open(map, marker);
                            }, 2500);
                            google.maps.event.addDomListener(window, 'load', init_map);
                            google.maps.event.trigger(map, 'resize');
                        });

Answer 2

All I can offer right now is some cleaned-up code, not sure how much, if any, further it will get you but here it is.

<script type="text/javascript">
    var loc = new google.maps.LatLng(30.4900271, -90.4629746),
        myOptions = {
            zoom: 13,
            center: loc,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        },
        map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions),
        marker = new google.maps.Marker({
            map: map,
            position: loc
        });

    function init_map() {
        $("#hammondButton").click(function () {
            google.maps.event.addListener(marker, "click", function() {
                infowindow.open(map, marker);
            });

            // is this necessary?
            google.maps.event.trigger(map, 'resize');
        });

    }

    window.addEventListener("load", init_map);
</script>