I want to put more markers on the map. The problem is that the map is not loaded and gives me the errors:
"SyntaxError: missing: after property id""uncaught exception: Object"
<html>
<head>
<!-- styles put here, but you can include a CSS file and reference it instead! -->
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// Create a map variable
var map;
var markers = [];
// Function to initialize the map within the map div
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 40.74135, lng: -73.99802},
zoom: 14
});
var locations = [
{title: 'Markerul', location: {lat: 40,7713024, lng: -73.9632393}},
{title: 'Markerul', location: {lat: 40,7713024, lng: -73.9632393}}
];
var largeInfowindow = new google.maps.InfoWindow();
for(var i = 0; i<locations.length; i++){
var positions = locations[i].location;
var title = locations[i].title;
var marker = new google.maps.Marker({
map: map,
position: position,
title: title,
animation: google.maps.Animation.DROP,
id: i
});
markers.push(marker);
// onclick
marker.addListener('click', function (){
populateInfoWindow(this, largeInfowindow);
});
}
function populateInfoWindow(marker, infowindow){
// verifica daca fereastra de info nu este deja deschisa
if(infowindow.marker !=marker){
infowindow.marker = marker;
infowindow.setContent('<div>' + marker.title + '</div>');
infowindow.open(map, marker);
infowindow.addListener('closeclick', function(){
infowindow.setMarker(null);
});
}
}
var largeInfowindow = new google.InfoWindow();
var bounds = new google.maps.LatLngBounds();
// crearea unei arii de markere
for (var i = 0; i < locations.length; i++){
// ia pozitia
var position = locations[i].location;
var title = locations[i].title;
//crearea unui marker per locatie si punerea lui in aria de markere
var marker = new google.maps.Marker({
map: map,
position: position,
title: title,
animation: google.maps.Animation.DROP,
id: i
});
//push the marker to our array of markers
markers.push(marker);
//extinderea ariei pt markere
bounds.extend(marker.position);
//onclick
marker.addListener('click', function (){
populateInfoWindow(this, largeInfowindow);
});
}
map.fitBounds(bounds);
}
</script>
<!--TODO: Insert your API Key in the below call to load the API.-->
<script async defer
src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyC7IPwLdvIOgAywGauAOOCrWG8JD5hfTaA&callback=initMap">
</script>
</body>
</html>
The web page should display some markers getting the latlong from a vector i created. I have tried some solutions I've found online but did not manage to solve the issue.