We Keep Coding

google map map.fitBounds() is not a function

I have error when I load my page: https://www.cupsubito.it/dove-siamo
I don't kwon because about this error. Thank you very much for helping.
Thanks for help me!
The code JS is:
let _locations = [];
var elenco;
google.maps.visualRefresh = true;
var slider, infowindow = null;
var bounds = new google.maps.LatLngBounds();
var current = 0;
var map = 0;
var icons = {
//'default': '/assets/img/marker.png'
};
function showMap() {
infowindow.close();
if (!map.slide) {
return;
}
var next, marker;
if (_locations.length == 0) {
return
} else if (_locations.length == 1) {
next = 0;
}
if (_locations.length > 1) {
do {
next = Math.floor(Math.random() * _locations.length);
} while (next == current)
}
current = next;
marker = _locations[next];
setInfo(marker);
//infowindow.open(map, marker);
}
function initialize() {
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(42.4053848, 12.4276547),
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
map.slide = true;
//setMarkers(map, _locations);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
google.maps.event.addListener(infowindow, 'closeclick', function () {
infowindow.close();
});
slider = window.setTimeout(showMap, 3000);
}
function setInfo(marker) {
var content =
'<div class="profile-widget" style="width: 100%; display: inline-block;">' +
'<div class="doc-img">' +
'<a href="' + marker.profile_link + '" tabindex="0" target="_blank">' +
'<img class="img-fluid" alt="' + marker.doc_name + '" src="' + marker.image + '">' +
'</a>' +
'</div>' +
'<div class="pro-content">' +
'<h4 class="text-center">' +
'' + marker.doc_name + '' +
'</h4>' +
'<ul class="available-info pt-5">' +
'<li><i class="fas fa-map-marker-alt"></i> ' + marker.address + ' </li>' +
'</ul>' +
'</div>' +
'</div>';
infowindow.setContent(content);
}
function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
var item = markers[i];
var latlng = new google.maps.LatLng(item.lat, item.lng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
doc_name: item.doc_name,
address: item.address,
speciality: item.speciality,
profile_link: item.profile_link,
animation: google.maps.Animation.DROP,
icon: icons[item.icons],
image: item.image
});
bounds.extend(marker.position);
markers[i] = marker;
google.maps.event.addListener(marker, "click", function () {
setInfo(this);
infowindow.open(map, this);
window.clearTimeout(slider);
});
}
map.fitBounds(bounds);
google.maps.event.addListener(map, 'zoom_changed', function () {
if (map.zoom > 16) map.slide = false;
});
// Add a marker clusterer to manage the markers.
new markerClusterer.MarkerClusterer({ markers, map });
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function () {
$.ajax({
url: "?handler=ElencoStrutture",
type: "POST",
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
data: elenco,
contentType: "application/json; charset=utf-8",
success: function (data) {
//console.error(data.ElencoStrutture);
_locations = data.ElencoStrutture;
setMarkers(map, _locations);
slider = window.setTimeout(showMap, 3000);
//alert("done ELENCO STRUTTURE");
}
});
});
Sometimes it works and sometimes it doesn't, I don't understand why it doesn't always work.
The problem is that it usually works the first time, so I don't understand where I'm wrong on the code side.
The map should display all pointers correctly and instead it sometimes shows me a blank map with this error.
I added part of code where I load setMarkers(map, _locations) for to have more informations.
thank you very much for answers.
I hope I have added useful information to my problem, I don't understand why it sometimes works and sometimes it doesn't.

Changing and saving content inside info window after close

I have a map that geocodes locations retrieved from JSON and sticks a marker on the map.
The markers also have an infowindow that shows the markers name and rating.
There's a button inside an infowindow that increments a rating counter when you click a button.
The initial counter is retrieved from JSON.
Annoyingly, when the info window closed and reopen, the counter value resets.
I tried populating an object with all of the marker ratings, updating the object when the button is clicked and then output the rating from the object inside the contentString for the infowindow. This didn't work and the same initial rating counter was shown after re-opening the infowindow.
My code is below, any help would be appreciated.
var map;
var geocoder;
var infowindow;
var rating;
function initMap() {
var mapElement = document.getElementById("map_canvas");
geocoder = new google.maps.Geocoder();
var mapOptions = {
center: new google.maps.LatLng(53.481949, -2.237430),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
infowindow = new google.maps.InfoWindow();
map = new google.maps.Map(mapElement, mapOptions);
}
$(document).on('click', '#been-there', function(event){
var entryID = $(this).data('entry-id');
var rating = $(this).data('rating');
var dataString = 'id='+ entryID;
rating++;
$.ajax({
type: "POST",
url: "db-been-there.php",
data: dataString,
cache: false,
}).success(function(html){
console.log(html);
}).fail(function(html){
console.log(html);
});
$('#rating').html(rating);
});
$.getJSON("db-output.php", function(dbJSON) {
$.each(dbJSON, function(key, data) {
var url = "https://maps.googleapis.com/maps/api/geocode/json?latlng=" + data.lat + "," + data.lng + "&result_type=sublocality|political&key=AIzaSyCsY-LOPL7dGbA1ShBEu7zMO8_GaSBA3Vg";
$.getJSON(url, function(reverseGeo) {
var postal_town = reverseGeo.results[0].formatted_address;
geocoder.geocode( { 'address': postal_town}, function(results, status) {
if (status == 'OK') {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: data.name
});
var contentString = '<div id="content">'+
'<h1>' + data.name + '</h1>' +
'<button id="been-there" data-rating="' + data.rating + '" data-entry-id="' + data.id + '">Seen it</button>' +
'<p><strong>Rating: </strong><span id="rating">' + data.rating + '</span></p>' +
'</div>';
marker.addListener('click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
});
});
});
EDIT: Resolved code and JSFiddle below
Resolved JSFiddle: https://jsfiddle.net/BleepyEvans/3czqmqav/
var locations = [
{
"id": "1",
"name": "Location 1",
"lat": "53.408371",
"lng": "-2.991573",
"rating": "17"
},
{
"id": "2",
"name": "Location 2",
"lat": "53.789528",
"lng": "-2.969411",
"rating": "8"
},
]
var map;
var geocoder;
var infowindow;
var rating;
var markers = [];
function initMap() {
var mapElement = document.getElementById("map_canvas");
geocoder = new google.maps.Geocoder();
var mapOptions = {
center: new google.maps.LatLng(53.481949, -2.237430),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
infowindow = new google.maps.InfoWindow();
map = new google.maps.Map(mapElement, mapOptions);
}
$(document).on('click', '#been-there', function(event){
var entryID = $(this).data('entry-id');
var dataString = 'id='+ entryID;
rating = markers[entryID].rating;
rating++;
markers[entryID].rating = rating;
console.log(markers[entryID].rating);
$('#rating').html(rating);
});
$.each(locations, function(key, data) {
var url = "https://maps.googleapis.com/maps/api/geocode/json?latlng=" + data.lat + "," + data.lng + "&result_type=sublocality|political&key=AIzaSyCsY-LOPL7dGbA1ShBEu7zMO8_GaSBA3Vg";
$.getJSON(url, function(reverseGeo) {
var postal_town = reverseGeo.results[0].formatted_address;
geocoder.geocode( { 'address': postal_town}, function(results, status) {
if (status == 'OK') {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: data.name,
rating: data.rating
});
markers[data.id] = marker;
console.log(markers[data.id].rating);
marker.addListener('click', function() {
var contentString = '<div id="content">'+
'<h1>' + data.name + '</h1>' +
'<button id="been-there" data-rating="' + data.rating + '" data-entry-id="' + data.id + '">Been There</button>' +
'<p><strong>Rating: </strong><span id="rating">' + markers[data.id].rating + '</span></p>' +
'</div>';
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
});
});

Rather than just create an HTML string which includes the rating data that you assign to your infowindow, I'd add the rating value to the Marker object itself.
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: data.manufacturer_name,
rating: data.rating
});
Save those markers in an object keyed on their ID:
markers[data.id] = marker;
Then when the user clicks the button, update that value:
$(document).on('click', '#been-there', function(event){
var entryID = $(this).data('entry-id');
rating = markers[entryID].rating;
rating++;
And update the value on the Marker:
markers[entryID].rating = rating;
If it doesn't work directly accessing the rating property on the markers, you might need to use:
markers[entryID].get('rating');
markers[entryID].set('rating', rating);

Content window on marker

I try this code for plotting data on google map and I plot it successfully currently there is 2 marker when i click on marker then content window is open but second marker content window is not open
this is the result on console
{"response":[["B9","5",27.13197”,”34.95 "],["L330","5",”27.06688”,”34.864"]}"
image
image
when i click on second marker then content window not open
Here is my code :
success: function (result) {
var d = JSON.parse(result.d).response;
console.log(JSON.parse(result.d).response);
console.log(JSON.stringify(result.d));
$("#tabledata").empty();
if (d.length > 0) {
$("#tabledata").append(
"<thead><tr><th>RegNo</th><th>Status</th><th>Longitude</th><th>Latitude</th></tr></thead>");
for (var i = 0; i < d.length - 1; i++) {
if (d[i] !== null) {
$("#tabledata").append("<tbody><tr><td>" +
d[i][0] + "</td> <td>" +
d[i][1] + "</td> <td>" +
d[i][2] + "</td> <td>" +
d[i][3] + "</td></tr></tbody>");
Status = d[i][2];
debugger;
RegNo = d[i][0];
latit = d[i][4];
longi = d[i][3];
}
}
}
else {
$("#tabledata").hide();
}
alert(d.length);
var map;
//var markers;
debugger;
var latlng = new google.maps.LatLng(24.0895898, 67.0998546);
debugger;
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
debugger;
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
debugger;
debugger;
for (i = 0; i < d.length - 1; i++) {
var data = d[i]
var myLatlng = new google.maps.LatLng(d[i][4], d[i][3]);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Click me'
});
}
debugger;
for (i = 0; i < d.length - 1; i++){
var infowindow = new google.maps.InfoWindow({
content: 'RegNo:' + d[i][0] + '<br>Status:' + d[i][2] + '<br>Lat:' + d[i][4] + 'Long:' + d[i][3]
});
}
debugger;
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker, data);
});
}

Your problem is this line here:
infowindow.open(marker, data, map);
The InfoWindow open function takes 1 or 2 arguments, and it should be like this:
infowindow.open(map, marker);

Save Button Not attached to the Right InfoWindow, Google Map

After adding a delete function and adding my markers into an array the save button/ save function is no longer attached to the right infowindow on my google map.
If I open two infowindows, enter the info in both, then click save on the first one I opened it will update the last infowindow created with "You submitted" and it will save it twice. I tried a few different things based on different stack overflow posts including adding an iterator around the initialization of my infowindow and also adding an external function for adding a marker, but this did not work. I also made sure my global variables (like map) are declared before initializing. I am a nube that has been struggling for days.
I'm sure the issue surrounds my confusion about how the infowindow is attached to the markers in the array. My code is in the snippet below.
var markers = [];
var uniqueId = 1;
var marker;
var infowindow;
var map;
var html;
function initialize() {
var mapOptions = {
zoom: 8,
center: {
lat: 48.591130,
lng: -119.682349
},
mapTypeControlOptions: {
mapTypeIds: ['roadmap']
}
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
//Attach click event handler to the map.
google.maps.event.addListener(map, 'click', function(e) {
//Determine the location where the user has clicked.
var location = e.latLng;
//Create a marker and placed it on the map.
var marker = new google.maps.Marker({
position: location,
map: map,
});
//Set unique id
marker.id = uniqueId;
uniqueId++;
markers.push(marker);
//Attach click event handler to the marker.
google.maps.event.addListener(marker, "click", function(e) {
html = "<p style='color:#173e43;font-size:120%;font-weight:bold;text-align:center; width:150pxs; margin-top: 2px; margin-bottom:4px' >Add A Comment</p>" +
"<table>" +
"<tr><td>Issue/Idea:</td> <td> <textarea rows='1' cols='26' id='name' style='height: 30px; width:150px' name='reply'></textarea></td> </tr>" +
"<tr><td>Address:</td> <td><input type='text' id='address' style='width:150px'/></td> </tr>" +
"</td></tr>";
html += "<tr><td><input type = 'button' value = 'Delete' onclick = 'DeleteMarker(" + marker.id + ");' value = 'Delete' /></td>" +
"<td><input type='button' value='Submit' onclick='saveData(" + marker.id + ")'/></td></tr>";
infowindow = new google.maps.InfoWindow({
content: html
});
infowindow.setContent(html);
infowindow.open(map, marker);
});
//Add marker to the array.
markers.push(marker);
});
};
function DeleteMarker(id) {
//Find and remove the marker from the Array
for (var i = 0; i < markers.length; i++) {
if (markers[i].id == id) {
//Remove the marker from Map
markers[i].setMap(null);
//Remove the marker from array.
markers.splice(i, 1);
return;
}
}
};
function saveData(id) {
for (var i = 0; i < markers.length; i++) {
if (markers[i].id == id) {
var name = escape(document.getElementById("name").value);
var address = escape(document.getElementById("address").value);
var latlng = markers[i].getPosition();
var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address +
"&lat=" + latlng.lat() + "&lng=" + latlng.lng();
downloadUrl(url, function(data, responseCode) {
if (responseCode == 200 && data.length >= 1) {
document.getElementById("message").innerHTML = "Location added. Contents: name=" + name +", address=" + address+ " latlng=" +latlng;
}
});
infowindow.setContent("You submitted Contents: name=" + name +", address=" + address+ " latlng=" +latlng);
}
}
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
function doNothing() {}
}
google.maps.event.addDomListener(window, 'load', initialize);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<div id="dvMap" style="width: 1000px; height: 490px"></div>
<div id="message"></div>

Ok, so I moved the push statement so that it is pushing the marker to the array after I declare the infowindow. This stopped the save function from saving the html contents multiple times. So the save is working great now, the only problem is my ability to update the right infowindow with the message "You submitted..."
It is still just updating the last infowindow I opened with that message.
var markers = [];
var uniqueId = 1;
var marker;
var infowindow;
var map;
var html;
function initialize() {
var mapOptions = {
zoom: 8,
center: {
lat: 48.591130,
lng: -119.682349
},
mapTypeControlOptions: {
mapTypeIds: ['roadmap']
}
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
//Attach click event handler to the map.
google.maps.event.addListener(map, 'click', function(e) {
//Determine the location where the user has clicked.
var location = e.latLng;
//Create a marker and placed it on the map.
var marker = new google.maps.Marker({
position: location,
map: map,
});
//Set unique id
marker.id = uniqueId;
uniqueId++;
//Attach click event handler to the marker.
google.maps.event.addListener(marker, "click", function(e) {
html = "<p style='color:#173e43;font-size:120%;font-weight:bold;text-align:center; width:150pxs; margin-top: 2px; margin-bottom:4px' >Add A Comment</p>" +
"<table>" +
"<tr><td>Issue/Idea:</td> <td> <textarea rows='1' cols='26' id='name' style='height: 30px; width:150px' name='reply'></textarea></td> </tr>" +
"<tr><td>Address:</td> <td><input type='text' id='address' style='width:150px'/></td> </tr>" +
"</td></tr>";
html += "<tr><td><input type = 'button' value = 'Delete' onclick = 'DeleteMarker(" + marker.id + ");' value = 'Delete' /></td>" +
"<td><input type='button' value='Submit' onclick='saveData(" + marker.id + ")'/></td></tr>";
infowindow = new google.maps.InfoWindow({
content: html
});
infowindow.setContent(html);
infowindow.open(map, marker);
});
//Add marker to the array.
markers.push(marker);
});
};
function DeleteMarker(id) {
//Find and remove the marker from the Array
for (var i = 0; i < markers.length; i++) {
if (markers[i].id == id) {
//Remove the marker from Map
markers[i].setMap(null);
//Remove the marker from array.
markers.splice(i, 1);
return;
}
}
};
function saveData(id) {
for (var i = 0; i < markers.length; i++) {
if (markers[i].id == id) {
var name = escape(document.getElementById("name").value);
var address = escape(document.getElementById("address").value);
var latlng = markers[i].getPosition();
var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address +
"&lat=" + latlng.lat() + "&lng=" + latlng.lng();
downloadUrl(url, function(data, responseCode) {
if (responseCode == 200 && data.length >= 1) {
document.getElementById("message").innerHTML = "Location added. Contents: name=" + name +", address=" + address+ " latlng=" +latlng;
}
});
infowindow.setContent("You submitted Contents: name=" + name +", address=" + address+ " latlng=" +latlng);
}
}
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
function doNothing() {}
}
google.maps.event.addDomListener(window, 'load', initialize);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<div id="dvMap" style="width: 1000px; height: 490px"></div>
<div id="message"></div>

How can I use an Anchor Tag in a .Append Statement Jquery

Im stuck in the situation where i need to Append an Anchor Tag Link in an Appended <li>
But i dont know how where to start
This is my Codes:
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
function codeAddress() {
infoBubble = new InfoBubble({
map: map,
shadowStyle: 0,
padding: 10,
borderRadius: 10,
arrowSize: 15,
maxWidth: 300,
borderWidth: 1,
borderColor: '#ccc',
arrowPosition: 50,
arrowStyle: 0
});
$.getJSON('/Dashboard/LoadWorkerList', function (address) {
$.each(address, function () {
var currVal = this["AddressLine1"];
var Name = this["Name"];
var Gender = this["Gender"];
var Bdate = this["Birthdate"];
var ID = this["Worker_ID"];
geocoder.geocode({ 'address': currVal }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
icon: iconBase + 'man.png',
position: results[0].geometry.location,
title: currVal
})
$('#places').append($('<li>')
.text(currVal)
.data('location', results[0].geometry.location));
google.maps.event.addListener(map, 'bounds_changed', function () {
$('#places li').css('display', function () {
return (map.getBounds().contains($(this).data('location')))
? ''
: 'none';
});
});
function myclick(i) {
google.maps.event.trigger(address[i], "click");
}
//mgr = new MarkerManager(map);
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infoBubble.removeTab(0);
infoBubble.addTab(Name, "Name: " + Name + "<br> Address: " + currVal + "<br> Gender: " + Gender + "<br> Birthdate: " + Bdate + "<br><br>" + '<center>View Profile</center>');
infoBubble.open(map, marker);
}
})(marker, currVal));
address.push(marker);
}
else if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
setTimeout(codeAddress, 2000);
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
});
google.maps.event.trigger(map, 'bounds_changed');
});
}
But i tried Changing this but its not working
$('#places').append($('<li>')
.wrap('' + location + '<br>')
.data('location', results[0].geometry.location));
Its not showing on the list . .
Thanks in advance!

Not sure of what you want to achieve, but inline event handlers are not the way to go
Maybe you should try
var j =i;
var link = $('linkTextHere')
.data('location', results[0].geometry.location);
$('#places').append($('<li/>').append(link));
link.on('click', function(event){
event.preventDefault();
google.maps.event.trigger(address[j], "click");
}
);
instead of :
$('#places').append($('<li>')
.wrap('' + location + '<br>')
.data('location', results[0].geometry.location));