如何創建兩個谷歌地圖

Question

我想知道如何嵌入兩個不同的谷歌地圖與兩個公司的信息窗口。 this is sample one, i want two different maps。 我想要兩張不同的地圖。 在同一張地圖上沒有兩個信息窗口。

感謝。

Answer 1

在HTML把兩個div而不是一個：

... 
<div id="map1"></div> 
<div id="map2"></div> 
... 

然後添加JavaScript代碼來製作的地圖：

function initMap(mapName, lat, lng, title, content) { 
    var map = new google.maps.Map(document.getElementById(mapName), { 
     zoom: 4, 
     center: {lat: lat, lng: lng} 
    }); 

    var infowindow = new google.maps.InfoWindow({ 
     content: content 
    }); 

    var marker = new google.maps.Marker({ 
     position: coords, 
     map: map, 
     title: title 
    }); 
    marker.addListener('click', function() { 
     infowindow.open(map, marker); 
    }); 
    } 

var contentUrulu = '<div id="content">'+ 
      '<div id="siteNotice">'+ 
      '</div>'+ 
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+ 
      '<div id="bodyContent">'+ 
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' + 
      'sandstone rock formation in the southern part of the '+ 
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+ 
      'south west of the nearest large town, Alice Springs; 450&#160;km '+ 
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+ 
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+ 
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+ 
      'Aboriginal people of the area. It has many springs, waterholes, '+ 
      'rock caves and ancient paintings. Uluru is listed as a World '+ 
      'Heritage Site.</p>'+ 
      '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+ 
      'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+ 
      '(last visited June 22, 2009).</p>'+ 
      '</div>'+ 
      '</div>'; 
var 
    contentWhatever = '...'; 

    initMap('map1', -25.363, 131.044, 'Uluru (Ayers Rock)', contentUrulu); 
    initMap('map2', 46.106,7.049, 'Whatever', contentWhatever);