Save google maps location to google account only allowing 1 query - google-maps

Question

I am trying to allow users to save their markers lat and lng to their google account. It works fine for the first marker, but then stops working for subsequent markers.
For example load the fiddle bellow then
1. click the left marker (saving is allowed)
2. click the marker on the right (saving is NOT allowed)
3. reload the fiddle(refresh the page)
4. this time click the RIGHT marker (saving is allowed)
5. click the marker on the left (saving is NOT allowed)
https://jsfiddle.net/74zfffj3/
How to I allow all markers to be saved to user google account, and not just the first marker clicked?

Answer 1

I can enable save on multiple markers/infowindows if I provide a placeId and a location for each marker.
var marker = new google.maps.Marker({
map: map,
// Define the place with a location, and a query string.
place: {
location: {lat: 44.4948543, lng: -81.3695635},
placeId: "ChIJydDgDrzPKYgR5ME3zdbglZ8",
},
// Attributions help users find your site again.
attribution: {
source: 'Google Maps JavaScript API',
webUrl: 'https://developers.google.com/maps/'
}
});
var marker2 = new google.maps.Marker({
map: map,
// Define the place with a location, and a query string.
place: {
location: {lat: 44.373129, lng: -81.438245},
placeId: "ChIJaW-levq1KYgR5VDN9cpgH1c",
},
// Attributions help users find your site again.
attribution: {
source: 'Google Maps JavaScript API',
webUrl: 'https://developers.google.com/maps/'
}
});
proof of concept fiddle
code snippet (doesn't seem to work with "signed_in=true"):
function initMap() {
// When you add a marker using a Place instead of a location, the Maps
// API will automatically add a 'Save to Google Maps' link to any info
// window associated with that marker.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {
lat: 44.429734680509064,
lng: -81.52421951293945
}
});
var marker = new google.maps.Marker({
map: map,
// Define the place with a location, and a query string.
place: {
location: {
lat: 44.4948543,
lng: -81.3695635
},
placeId: "ChIJydDgDrzPKYgR5ME3zdbglZ8",
},
// Attributions help users find your site again.
attribution: {
source: 'Google Maps JavaScript API',
webUrl: 'https://developers.google.com/maps/'
}
});
var marker2 = new google.maps.Marker({
map: map,
// Define the place with a location, and a query string.
place: {
location: {
lat: 44.373129,
lng: -81.438245
},
placeId: "ChIJaW-levq1KYgR5VDN9cpgH1c",
},
// Attributions help users find your site again.
attribution: {
source: 'Google Maps JavaScript API',
webUrl: 'https://developers.google.com/maps/'
}
});
// Construct a new InfoWindow.
var infoWindow1 = new google.maps.InfoWindow({
content: 'Google Sydney'
});
var infoWindow2 = new google.maps.InfoWindow({
content: 'Google Sydney'
});
// Opens the InfoWindow when marker is clicked.
marker.addListener('click', function() {
infoWindow1.setContent("Southampton, CA");
infoWindow1.open(map, marker);
});
marker2.addListener('click', function() {
infoWindow2.setContent("North Bruce, CA");
infoWindow2.open(map, marker2);
});
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true"></script>
<div id="map"></div>