在標記信息窗口中顯示地圖（google）

Question

我嘗試在Google地圖信息窗口中顯示一個小地圖。 目的是一旦用戶單擊標記，就會打開一個信息窗口，並在其中顯示一個小地圖，顯示衛星視圖。 下面的主要代碼運行良好。 唯一的事情是我有一個空的“ 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));
}

謝謝你的幫助。

Answer 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
     });
};