在谷歌js地图中添加多个位置

Adding multiple locations to google js map

本文关键字：位置 添加 谷歌 js 地图      更新时间：2024-07-01

我正试图在我正在开发的网站中嵌入的谷歌地图中添加3个位置。现在，使用单个位置引脚，地图可以正常工作。有没有办法修改js文件来添加额外的点？

// ==========  START GOOGLE MAP ========== //
function initialize() {
var myLatLng = new google.maps.LatLng(30.227686, -81.386146); 

var mapOptions = {
zoom: 14,
center: myLatLng,
disableDefaultUI: true,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: true,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'roadatlas']
}
};
var map = new google.maps.Map(document.getElementById('map-canvas'),  mapOptions);

var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: 'img/location-icon.png',
  title: '',
 });
 var contentString = '<div style="max-width: 300px" id="content">'+
  '<div id="bodyContent">'+
  '<h5 class="color-primary"><strong>Location 1</br> Ponte Vedra   Office</strong></h5>' +
  '<p style="font-size: 12px">103 B Solana Road </br>' +
  'Ponte Vedra, FL 32082</br>' +
  'Phone: 904-273-2717</p>'+
  '</div>'+
  '</div>';
var infowindow = new google.maps.InfoWindow({
  content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
var styledMapOptions = {
name: 'US Road Atlas'
};
var usRoadMapType = new google.maps.StyledMapType(
  roadAtlasStyles, styledMapOptions);
map.mapTypes.set('roadatlas', usRoadMapType);
map.setMapTypeId('roadatlas');
}
google.maps.event.addDomListener(window, "load", initialize);



// ========== END GOOGLE MAP ========== //

我试图在我的地图上包括这3个纬度/经度集：（30.227686，-81.8386146）（30.65000，-81.4555185）（30.056330，-81.535824）

谢谢！

您的代码带有原始标记和两个附加标记（第一个标记上只有一个信息窗口）。

代码片段：

// ==========  START GOOGLE MAP ========== //
function initialize() {
  var map = new google.maps.Map(document.getElementById('map-canvas'));
  // I am trying to include these 3 latitude/longitude sets on my map: (30.227686, -81.386146) (30.650060, -81.455185) (30.056330, -81.535824)
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(30.227686, -81.386146),
    map: map,
    // icon: 'img/location-icon.png',
    title: '1',
  });
  var marker2 = new google.maps.Marker({
    position: new google.maps.LatLng(30.650060, -81.455185),
    map: map,
    // icon: 'img/location-icon.png',
    title: '2',
  });
  var marker3 = new google.maps.Marker({
    position: new google.maps.LatLng(30.056330, -81.535824),
    map: map,
    // icon: 'img/location-icon.png',
    title: '3',
  });
  
  // show all the markers on the map, replaces the mandatory zoom/center parameters in mapOptions
  var bounds = new google.maps.LatLngBounds();
  bounds.extend(marker.getPosition());
  bounds.extend(marker2.getPosition());
  bounds.extend(marker3.getPosition());
  map.fitBounds(bounds);
  var contentString = '<div style="max-width: 300px" id="content">' +
    '<div id="bodyContent">' +
    '<h5 class="color-primary"><strong>Location 1</br> Ponte Vedra   Office</strong></h5>' +
    '<p style="font-size: 12px">103 B Solana Road </br>' +
    'Ponte Vedra, FL 32082</br>' +
    'Phone: 904-273-2717</p>' +
    '</div>' +
    '</div>';
  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
  });
  var styledMapOptions = {
    name: 'US Road Atlas'
  };
  var usRoadMapType = new google.maps.StyledMapType(
    roadAtlasStyles, styledMapOptions);
  map.mapTypes.set('roadatlas', usRoadMapType);
  map.setMapTypeId('roadatlas');
}
google.maps.event.addDomListener(window, "load", initialize);
// ========== END GOOGLE MAP ========== / /
html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

只需添加其他2个标记（类似于上面实现marker对象的方式，但请确保为position分配不同的值）。

相关文章：