在标记信息窗口中显示地图（谷歌）答案

【问题标题】：Display a map (google) within a marker infowindow在标记信息窗口中显示地图（谷歌）
【发布时间】：2013-09-13 19:40:54
【问题描述】：

我尝试在谷歌地图信息窗口中显示一张小地图。目的是一旦用户单击标记，就会打开一个信息窗口，其中包含一个显示卫星视图的小地图。下面的主要代码运行良好。唯一的问题是我有一个空的“map_loc”，因为我不知道将“var map_loc”放在哪里。

我在一个 mysql 数据库的 while 循环中使用查询来获取所需的信息。

基本上我的问题是，我必须将那部分代码放在下面的主代码中的哪里，以显示名为“map_loc”的小地图，其中 div 位于标记“位置”中：

var map_loc = new google.maps.Map(document.getElementById('map_loc'), {
  zoom: 17,
  center: new google.maps.LatLng(<?php echo $latlng_loc?>),
  mapTypeId: google.maps.MapTypeId.SATELLITE
});

<div id="map" style="width:600px; height:600px;"></div>

<script type="text/javascript">
var locations = [
<?php
        while ($x = $req->fetch())
        {
        // variables obtained :
        $name = $d['name'];
        $latlng_loc = $d['latlng']; // I need it to display the marker at the good location but also now to display the map within the infowindow
        ?>
        ['<h3><?php echo $name;?></h3><div id="loc_map" style="width:250px; height:150px;"></div>', <?php echo $latlng_loc?>],<?php
        }
?>
];

// here is the main map
var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 12,
  center: new google.maps.LatLng(<?php echo $latlng?>),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

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

var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

感谢您的帮助。

【问题讨论】：

标签： javascript google-maps-api-3 marker infowindow

【解决方案1】：

谷歌地图的信息窗口，它可以使用HTML意图..试试这个：以 1 个标记为例：

var content1 = '<div id="smallmap1"></div>';
var map_loc;
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
  infowindow.setContent(content1);
  infowindow.open(map, marker);
  set_small_map(i);
}
})(marker, i));

//"smallmap"+i == smallmap1, if i == 1;
function set_small_map(i){
     map_loc = new google.maps.Map(document.getElementById("smallmap"+i), {
     zoom: 17,
     center: new google.maps.LatLng(<?php echo $latlng_loc?>),
     mapTypeId: google.maps.MapTypeId.SATELLITE
     });
};

【讨论】：