一页上有多个谷歌地图的问题答案

【问题标题】：Problems with Multiple Google Maps on One Page一页上有多个谷歌地图的问题
【发布时间】：2016-02-08 11:36:53
【问题描述】：

您好，我无法在一页上显示多个 Google 地图

第一张地图显示正确，但第二张没有显示

我使用 Smarty 来显示模板。结果来自一个分贝。任何人都可以检查代码并帮助我显示多个地图

{foreach item=row  from=$adress}
                <tr>
                  <td>
                    <script type="text/javascript">
                      function initialize() {
                        var position = new google.maps.LatLng({$row->lat}, {$row->longi});
                        var myOptions = {
                          zoom: 12,
                          center: position,
                          mapTypeId: google.maps.MapTypeId.ROADMAP
                        };
                        var map = new google.maps.Map(
                            document.getElementById("map_canvas{$row->site_id}"),
                            myOptions);

                        var marker = new google.maps.Marker({
                            position: position,
                            map: map,
                            title:"This is the place."
                        });  

                        var contentString = 'Hello <strong>World</strong>!';
                        var infowindow = new google.maps.InfoWindow({
                            content: contentString
                        });

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

                      }

                    </script>
                  <div id="map_canvas{$row->site_id}" style="width:300px;height:200px;"></div>

【问题讨论】：

你能在没有程序{}等的情况下静态检查代码吗？
你是什么意思？
我的意思是复制粘贴两个代码块，一个用于 map_canvas1，另一个用于第二个地图的 map_canvas2。然后找出它是否给出错误。示例代码：- stackoverflow.com/questions/4074520/…
不能有多个同名函数（每个地图都有一个initialize函数）

标签： php mysql google-maps maps smarty

【解决方案1】：

这是您的 html 代码：-

</head>
<body onload="initialize()">
<H1 align="center">Two Google maps side-by-side</h1>
<div id="map_canvas1" style="top: 10px; left: 25px; width:210px; height:220px; float: left"></div>
<div id="map_canvas2" style="top: 10px; left: 75px; width:210px; height:220px"></div>
</body>
</html>

<script>


    function initialize()
    {
        <?php 

    for($i=1; $i<=2; $i++){

    ?>

        var latlng<?php echo $i ?> = new google.maps.LatLng(18.520266,73.856406);

        var myOptions =
        {
            zoom: 15,
            center: latlng<?php echo $i; ?>,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };


        var map<?php echo $i; ?> = new google.maps.Map(document.getElementById("map_canvas<?php echo $i ?>"), myOptions);



        var myMarker<?php echo $i; ?> = new google.maps.Marker(
        {
            position: latlng<?php echo $i; ?>,
            map: map<?php echo $i; ?>,
            title:"Pune"
       });

    <?php } ?>

    }


    </script>

我知道您使用不同的编程语言来定义您的代码。但我希望你理解的逻辑。

【讨论】：

我不明白这样做。我现在使用带有标记的静态谷歌地图图像来显示