如何动态生成不同的谷歌地图

Question

这是我遇到的问题。我有很多企业，我想显示每个企业的谷歌地图（都在一个 HTML 页面中）。

对于我拥有的每项业务：

• 纬度和经度（始终）。
• 地址，但有时不是门牌号。

问题。

如何使用 lat/long 为每个企业或使用 Google Map API 的企业插入谷歌地图？

困难

-为每个业务使用 ID 并不理想。

-如何将纬度/经度传递给 javascript 函数以插入地图？

这是我想要做的一般想法。

假设我有一个包含每个企业信息的企业数组。

foreach($businessesList as $businessName =>bInfo)
{
       list($about, addressText, $lat, $long) = $bInfo

       <div> $businessName</div>
       <div> $about</div>
       <div class='map'>

//使用 $lat、$long 和 Google Maps API 在此 div 中为每个企业插入谷歌地图。

            </div>

}

我没有太多使用 javascript 和 jquery 的经验，因为我主要使用 PHP

我可以设置一个数组来包含 Google Maps 嵌入代码，并且基本上可以查找每个企业的嵌入代码，但我不喜欢这样。

例如 addressArray =['business1'=>'嵌入从谷歌地图复制的代码。'，.....]

PS 随时要求澄清。

提前致谢。

Answer 1

所以你有 php 数组，其中包含所有需要的数据，如 latlng

然后您可以在 php 上对其进行迭代并为每个项目呈现 html

每个商业地图都有 html id没问题

一些元代码：

<?php

$myplaces = [
    [
        'address'=>'Example 1, NY',
        'lat'=>30.123456,
        'lng'=>50.123456
    ],
    [
        'address'=>'Example 2, LA',
        'lat'=>40.123456,
        'lng'=>50.123456
    ],
    //as many you like
];

$unique_id = 0;
foreach($myplaces as $place){    
    ?>
    <h1><?php echo $place['address']; ?></h1>
    <div id="map_<?php echo $unique_id; ?>"></div>
    <script>
    var pos = {lat: <?php echo $place['lat']; ?>, lng: <?php echo $place['lng']; ?>};
    var map = new google.maps.Map(document.getElementById('map_<?php echo $unique_id; ?>'), {
        zoom: 4,
        center: pos 
    });
    var marker = new google.maps.Marker({
        position: pos,
        map: map
    });
    </script>
    <?php
    $unique_id++;
}
?>

文档：https://developers.google.com/maps/documentation/javascript/adding-a-google-map

不要忘记使用适当的 api 密钥包含谷歌地图脚本本身