地图未加载到HTML页面

时间:2015-11-05 08:16:00

标签: javascript jquery html5 google-maps twitter-bootstrap-3

我有一张我要加载到HTML页面的地图,地图文件位于app文件夹中,但未加载。以下是插入地图的地方代码

<!-- Contact section start -->
    <div id="contact" class="contact">
        <div class="section ">
            <div class="container">
                <div class="title">
                    <h1>Contact Us</h1>
                    <p>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</p>
                </div>
            </div>
            <div class="map-wrapper">
                <div class="map-canvas" id="map-canvas">Loading map...</div>
                <div class="container">
                    <div class="row-fluid">
                        <div class="span5 contact-form centered">
                            <h3>Say Hello</h3>
                            <div id="successSend" class="alert alert-success invisible">
                                <strong>Well done!</strong>Your message has been sent.</div>
                            <div id="errorSend" class="alert alert-error invisible">There was an error.</div>
                            <form id="contact-form" action="php/mail.php">
                                <div class="control-group">
                                    <div class="controls">
                                        <input class="span12" type="text" id="name" name="name" placeholder="* Your name..." />
                                        <div class="error left-align" id="err-name">Please enter name.</div>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <div class="controls">
                                        <input class="span12" type="email" name="email" id="email" placeholder="* Your email..." />
                                        <div class="error left-align" id="err-email">Please enter valid email adress.</div>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <div class="controls">
                                        <textarea class="span12" name="comment" id="comment" placeholder="* Comments..."></textarea>
                                        <div class="error left-align" id="err-comment">Please enter your comment.</div>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <div class="controls">
                                        <button id="send-mail" class="message-btn">Send message</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="span9 center contact-info">
                    <p style="color:black;">123 Fifth Avenue, 12th,Belgrade,SRB 11000</p>
                    <p class="info-mail">ourstudio@somemail.com</p>
                    <p style="color:black;">+11 234 567 890</p>
                    <p style="color:black;">+11 286 543 850</p>

                </div>

            </div>
        </div>
    </div>
    <!-- Contact section edn -->

这里是js文件,其中包含加载地图所需的所有代码。

    //Initialize google map for contact setion with your location.

function initializeMap() {

var lat = '44.8164056'; //Set your latitude.
var lon = '20.46090424'; //Set your longitude.

var centerLon = lon - 0.0105;

var myOptions = {
    scrollwheel: false,
    draggable: false,
    disableDefaultUI: true,
    center: new google.maps.LatLng(lat, centerLon),
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

//Bind map to elemet with id map-canvas
var map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(lat, lon),
});

var infowindow = new google.maps.InfoWindow();

google.maps.event.addListener(marker, 'click', function () {
    infowindow.open(map, marker);
});

infowindow.open(map, marker);
google.maps.event.addDomListener(window, 'load', initializeMap);

}

我看到其他人遇到类似的问题,但是他们通过在标记区域输入optimize:false来修复它,但对我来说它仍然无效。

1 个答案:

答案 0 :(得分:1)

您有两个问题:

  1. 您在 google.maps.event.addDomListener(window, 'load', initializeMap);内部呼叫initializeMap() - 然后地图永远不会被初始化。

  2. 您需要在#map-canvas上设置一些维度;即使问题#1不是这种情况,也不会显示地图。

  3. 当纠正这两个问题时,它有效 - &gt;的 http://jsfiddle.net/1fdzz7gv/

    小提琴具有与OP中完全相同的代码,除了google.maps.event.addDomListener(window, 'load', initializeMap);位于initializeMap()之外且#map-canvas已被赋予某些维度

    #map-canvas {
        width: 300px;
        height: 200px;
    }