Question

我试图在网站上放置三个Google地图标记，但它们无法正常工作。我无法弄明白为什么。我已经多次检查了几遍，但我是新手，我找不到问题。

这是我的JS代码

<!-- Google Maps JS -->
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>

<!--[if IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

<script type="text/javascript"> 
    function initialize() {

        //Locations Coordinates
        var myLatlngBusto = new google.maps.LatLng(45.6084,8.850165);
        var myLatlngMagnago = new google.maps.LatLng(45.5808394,8.850165);
        var myLatlngBienate = new google.maps.LatLng(51.520614,-0.121825);

        //Options List
        var mapOptionsBusto = {
            zoom: 15,
            center: myLatlngOH,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: 0
        }

        var mapOptionsMagnago = {
            zoom: 15,
            center: myLatlngCA,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: 0
        }

        var mapOptionsBienate = {
            zoom: 15,
            center: myLatlngUK,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: 0
        }

        //Maps Variables
        var mapBusto = new google.maps.Map(document.getElementById('map-Busto'), mapOptionsBusto);
        var mapMagnago = new google.maps.Map(document.getElementById('map-Magnago'), mapOptionsMagnago);
        var mapBienate = new google.maps.Map(document.getElementById('map-Bienate'), mapOptionsBienate);

        //Markers List
        var markerBusto = new google.maps.Marker({
            position: myLatlngBusto,
            map: mapBusto,
            title: 'Busto Arsizio, via Dante Alighieri, 5'
        });

        var markerMagnago = new google.maps.Marker({
            position: myLatlngMagnago,
            map: mapMagnago,
            title: 'Magnago, via Goffredo Mameli, 9'
        });      

        var markerBienate = new google.maps.Marker({
            position: myLatlngBienate,
            map: mapBienate,
            title: 'Bienate (fraz. Magnago), Piazzale del Tricolore'
        });

    }  
</script>

我的HTML代码：

<div class="col-md-5">
                <p class="dark-section"><i><strong>Busto Arsizio</strong></i>, via Dante Alighieri 5<br/>Palestra scuola media G.A.Bossi</p><br/>
                <p class="dark-section"><span>ADULTI:</span><br/>lunedì e giovedì<br/>Inizio ore 20.30, fine ore 22.00</p><br/>
                <p class="dark-section"><span>BAMBINI:</span><br/>mercoledì e venerdì<br/>Inizio ore 17.00, fine ore 18.30</p>
            </div>

            <div class="col-md-7">
                <a href="https://www.google.it/maps/place/Via+Dante+Alighieri,+5,+21052+Busto+Arsizio+VA/@45.6084,8.850165,17z/data=!3m1!4b1!4m2!3m1!1s0x47868b8f5fcdbda1:0xc536e6f9f778dea" target="_blank"><div id="map-Busto"></div></a>
            </div>

            <!-- Divider -->
            <div class="col-md-12">
                <div class="hr5" style="margin-top:20px;margin-bottom:20px;"></div>
            </div>

            <div class="col-md-5">
                <br/>
                <p class="dark-section"><i><strong>Magnago</strong></i>, via Goffredo Mameli 9<br/>Palestra scuola elementare Ada Negri</p><br/>
                <p class="dark-section"><span>ADULTI:</span><br/>martedì e venerdì<br/>inizio ore 21.00, fine ore 23.00</p><br/>
            </div>

            <div class="col-md-7">
                <a href="https://www.google.it/maps/place/Via+Goffredo+Mameli,+9,+20020+Magnago+MI/@45.5808394,8.8014125,17z/data=!3m1!4b1!4m2!3m1!1s0x47868adf70308f8d:0x9373e8e46d562c9f" target="_blank"><div id="map-Magnago"></div></a>
            </div>

            <!-- Divider -->
            <div class="col-md-12">
                <div class="hr5" style="margin-top:20px;margin-bottom:20px;"></div>
            </div>

            <div class="col-md-5">
                <br/>
                <p class="dark-section"><i><strong>Bienate (fraz. Magnago)</strong></i>, Piazzale del Tricolore<br/>Palestra scuola elementare Giacomo Leopardi</p><br/>
                <p class="dark-section"><span>BAMBINI:</span><br/>lunedì e giovedì<br/>Inizio ore 18.30, fine ore 20.00</p><br/>
            </div>

            <div class="col-md-7">
                <a href="https://www.google.it/maps/place/Piazza+Tricolore,+20020+Magnago+MI/@45.5778806,8.8173467,17z/data=!3m1!4b1!4m2!3m1!1s0x47868b3c7573abc9:0xd99dc1eade985c9c" target="_blank"><div id="map-Bienate"></div></a>
            </div>

您可以在此处查看网站页面上的结果：http://westexperiments.altervista.org/index.html

那么如何修复这些Google地图标记？

Answer 1

看起来你没有触发initialize（）。

在脚本底部添加此内容（在线示例的第121行）：

SELECT Parish,parid,Parish,parishname FROM Parish ORDER BY 2.


if  not work then tell me more and proper  description of your question

Answer 2

你有几个问题：

尚未调用函数initialize，因此不会生成映射。可以使用google.maps.event.addDomListener(window, 'load', initialize);
您正在使用变量myLatlngOH，myLatlngCA和myLatlngUK来固定地图 - 它们不存在并且会阻止生成地图。我认为这些应该是myLatlngBusto，myLatlngMagnago和myLatlngBienate而不是

＆＃13;

function initialize() {
    //Locations Coordinates
    var myLatlngBusto = new google.maps.LatLng(45.6084, 8.850165);
    var myLatlngMagnago = new google.maps.LatLng(45.5808394, 8.850165);
    var myLatlngBienate = new google.maps.LatLng(51.520614, -0.121825);

    //Options List
    var mapOptionsBusto = {
        zoom: 15,
        center: myLatlngBusto,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: 0
    }

    var mapOptionsMagnago = {
        zoom: 15,
        center: myLatlngMagnago,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: 0
    }

    var mapOptionsBienate = {
        zoom: 15,
        center: myLatlngBienate,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: 0
    }

    //Maps Variables
    var mapBusto = new google.maps.Map(document.getElementById('map-Busto'), mapOptionsBusto);
    var mapMagnago = new google.maps.Map(document.getElementById('map-Magnago'), mapOptionsMagnago);
    var mapBienate = new google.maps.Map(document.getElementById('map-Bienate'), mapOptionsBienate);

    //Markers List
    var markerBusto = new google.maps.Marker({
        position: myLatlngBusto,
        map: mapBusto,
        title: 'Busto Arsizio, via Dante Alighieri, 5'
    });

    var markerMagnago = new google.maps.Marker({
        position: myLatlngMagnago,
        map: mapMagnago,
        title: 'Magnago, via Goffredo Mameli, 9'
    });

    var markerBienate = new google.maps.Marker({
        position: myLatlngBienate,
        map: mapBienate,
        title: 'Bienate (fraz. Magnago), Piazzale del Tricolore'
    });

}

google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

div {
    height: 200px;
    width: 200px;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&.js"></script>
<div id="map-Busto"></div>
<div id="map-Magnago"></div>
<div id="map-Bienate"></div>

＆＃13;

GoogleMaps标记无法正常工作

2 个答案: