Добавление нескольких местоположений в google js map

Question

Я пытаюсь добавить 3 местоположения на карту Google, которую я встроил в веб-сайт, над которым я работаю. Прямо сейчас карта работает так, как предполагалось, с единственным выводом местоположения. Есть ли способ изменить файл 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.386146) (30.650060, -81.455185) (30.056330, -81.535824)

Спасибо!

Answer 1

Ваш код с оригинальным и двумя дополнительными маркерами (только для первого).

фрагмент кода:

// ========== 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>

Answer 2

Просто добавьте другие 2 маркера (аналогично тому, как вы реализовали объект выше, но не забудьте присвоить разные значения position).