THe following code loops through a JSON array which contains 2 values - city_name and counter and places a pin on the map.
I am trying to display the city_name and counter on an info popup on the Google map, but the variables dont change after the first loop.
e.g. The last item in the JSON is Blackpool, but on all loops it remains Blackpool and will always be Blackpool.
function initMap() {
var resultsNonJSON = document.getElementsByName('tbResults')[0].value;
var jsonResults = JSON.parse(resultsNonJSON);
var geocoder = new google.maps.Geocoder();
var myLatLng = {lat: 53.810066, lng: -1.776427};
var votes;
var town;
var map = new google.maps.Map(document.getElementById('dvMap'), {
center: {lat: 54.636633, lng: -2.952166},
zoom: 6
});
for(var i = 0; i < jsonResults.length; i++) {
var obj = jsonResults[i];
town = obj.city_name;
geocoder.geocode({'address': obj.city_name.concat(", UK")}, function(results, status) {
if (status == 'OK')
{
var contentString = '<div id="content">'+
'<div id="siteNotice"></div>'+
'<h1 id="firstHeading" class="firstHeading">' + town + '</h1>'+
'<div id="bodyContent">'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: obj.city_name,
icon: {
url: "https://maps.google.com/mapfiles/ms/icons/green-dot.png"
}
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
else
{
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
}
Any ideas why this is happening? Also if I was to show the i value, it will always be 7. It seems to stop changing the variables after the geocode is called.
You are calling an Asynchronous code inside an array loop. In your case,
geocode is an Asynchronous function, and the result that you get in the callback function might be delayed for several reasons, and also this is not predictable.
There are various solutions to fix this.
One way to fix this is to use let scoped variable instead of var in your for loop if you are using ES6. See the example below.
let list = ['Canada', 'US', 'Japan', 'Mexico'];
for (let i = 0; i < list.length; i++) {
geoCode(list[i], function(index) {
createMarker(list[i]); // test the value (let vs var)
});
}
function geoCode(item, cb) {
setTimeout(function() {
cb(item);
}, 4000);
}
function createMarker(i) {
console.log(i);
}
In your case, just change
for(var i = 0; i < jsonResults.length; i++)
to
for(let i = 0; i < jsonResults.length; i++)
and move town variable inside the loop
for (let i = 0; i < jsonResults.length; i++) {
var obj = jsonResults[i];
geocoder.geocode({ 'address': obj.city_name.concat(", UK") }, function (results, status) {
if (status == 'OK') {
town = jsonResults[i].city_name;
Next solution is to use closure inside the loop. We need to wrap your async function with anonymous IIFE.
(function (town) {
geocoder.geocode({ 'address': obj.city_name.concat(", UK") }, function (results, status) {
if (status == 'OK') {
var contentString = '<div id="content">' +
'<div id="siteNotice"></div>' +
'<h1 id="firstHeading" class="firstHeading">' + town + '</h1>' +
'<div id="bodyContent">' +
'</div>' +
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: obj.city_name,
icon: {
url: "https://maps.google.com/mapfiles/ms/icons/green-dot.png"
}
});
marker.addListener('click', function () {
infowindow.open(map, marker);
});
}
else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
})(town);
Related
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.
I wrote this code:
<script type="text/javascript">
var address = JSON.parse('<?php echo $jsonLocations ?>');
console.log(address.locations[0]);
var latitude = '1';
var longitude = '1';
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(latitude, longitude)
});
for(var i = 0; i < address.locations.length; i++){
new google.maps.Marker({
position: new google.maps.LatLng(address.locations[i]['lat'], address.locations[i]['long']),
map: map
}).addListener('click', function(){
new google.maps.InfoWindow({
content: '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h5>' + i +'</h5>'+
'<div id="bodyContent">'+
'</div>'+
'</div>'
}).open(map, this);
})
}
}
</script>
I'm trying to display i onClick of the marker. So for the first maker I should be 0 and for the second 1. But somehow i is always the same value
This is a classic closure problem.
The function which is using the i variable is a async callback.
The first thing what is happening is, that all the markers will be created. Therefore i will be address.locations.length at the end of the loop.
The async callbacks now reference this exact variable.
There are some possible fixes for this:
use the let statement if you are able to use ES6 JavaScript features:
for(let i = 0; i < address.locations.length; i++){
[...]
}
The second one is to create a closure with this exact binding:
for(var i = 0; i < address.locations.length; i++){
(function(i){
[...]
})(i)
}
The last option for you is to use the Function.bind method.
for(var i = 0; i < address.locations.length; i++){
new google.maps.Marker({
position: new google.maps.LatLng(address.locations[i]['lat'], address.locations[i]['long']),
map: map
}).addListener('click', (function(i){
new google.maps.InfoWindow({
content: '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h5>' + i +'</h5>'+
'<div id="bodyContent">'+
'</div>'+
'</div>'
}).open(map, this);
}).bind(this,i))
}
I hope that one of this methods will work for you.
This happens because the click event happens later in time and then i has the last value ...
To fix this you can use a self invoking anonymous function inside the for loop - this way you will create a scope for each loop and the value of i will remain for the click when it happens.
This is called Closure - you can read more about closures here and here
function initMap() {
var address = {
locations: [{
"lat": 30.53625,
"lng": -111.92674,
}, {
"lat": 33.53625,
"lng": -112.92674,
}, {
"lat": 32.53625,
"lng": -111.92674,
}, {
"lat": 33.53625,
"lng": -115.92674,
}]
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: new google.maps.LatLng(32.53625, -111.92674)
});
var markers = [];
for (var i = 0; i < address.locations.length; i++) {
(function(index) { /* <--- Self invoking function */
var marker = new google.maps.Marker({
position: new google.maps.LatLng(address.locations[index]['lat'], address.locations[index]['lng']),
map: map
});
marker.addListener('click', function() {
new google.maps.InfoWindow({
content: '<div id="content">' +
'<div id="siteNotice">' +
'</div>' +
'<h5>' + index + '</h5>' +
'<div id="bodyContent">' +
'</div>' +
'</div>'
}).open(map, this);
markers.push(marker);
});
})(i); /* <---- Pass the index to the closure to keep its value */
}
}
.as-console-wrapper{
display:none !important;
}
<script async defer type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&callback=initMap"></script>
<div id="map" style="width:500px;height:150px"></div>
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);
I am using Google place autocomplete. And I don't know how to get place_id of address_components. In JSON there are only long_name, short_name, types.
My code is here:
var object_location = document.getElementById('object_location'),
autoComplete = new google.maps.places.Autocomplete(object_location);
autoComplete.addListener('place_changed', function() {
var place = autoComplete.getPlace();
console.log('place = ', place);
});
Here is my JSON (picture)
I don't need place_id of my place. I need especially place_ids of address_components
If you reverse geocode the result, it will return results (which include a place_id) for each of the address components that contain that location.
autoComplete.addListener('place_changed', function() {
var place = autoComplete.getPlace();
map.setZoom(11);
var marker = new google.maps.Marker({
position: place.geometry.location,
map: map
});
infowindow.setContent(place.formatted_address);
infowindow.open(map, marker);
geocoder.geocode({
latLng: place.geometry.location
},
function(results, status) {
if (status === 'OK') {
console.log("revGeo result=" + JSON.stringify(results));
var htmlStr = "<table border='1'>";
for (var i = 0; i < results.length; i++) {
htmlStr += "<tr><td>" + results[i].formatted_address + "</td><td>" + results[i].place_id + "</td></tr>";
}
htmlStr += "</table>";
infowindow.setContent(infowindow.getContent() + "<br>" + htmlStr);
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
});
proof of concept fiddle
code snippet:
var geocoder;
var map;
var infowindow;
function initialize() {
geocoder = new google.maps.Geocoder();
infowindow = new google.maps.InfoWindow();
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var object_location = document.getElementById('object_location'),
autoComplete = new google.maps.places.Autocomplete(object_location);
autoComplete.addListener('place_changed', function() {
var place = autoComplete.getPlace();
map.setZoom(11);
var marker = new google.maps.Marker({
position: place.geometry.location,
map: map
});
infowindow.setContent(place.formatted_address);
infowindow.open(map, marker);
geocoder.geocode({
latLng: place.geometry.location
},
function(results, status) {
if (status === 'OK') {
var htmlStr = "<table border='1'>";
for (var i = 0; i < results.length; i++) {
htmlStr += "<tr><td>" + results[i].formatted_address + "</td><td>" + results[i].place_id + "</td></tr>";
}
htmlStr += "</table>";
infowindow.setContent(infowindow.getContent() + "<br>" + htmlStr);
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input id="object_location" />
<div id="map_canvas"></div>
I am currently plotting multiple points on a map, using addresses from an object. The program loops over the object, geocodes the address, and plots a marker for each location.
The problem I am having is when a user clicks on a place in a list, the map is to pan to that location. The API has a panTo() function that accepts lat, lng values, but the results, i.e. results[0].geometry.location, from the geocode function are not available outside of it.
Question
How do I somehow retrieve the lat, lng from the results, maybe append them to the existing data object, and use them outside the function, so I am able to use them in the panTo() function?
[The lat/lng values are output in html data attributes]
Click handler
$('.place').on('click', function() {
$this = $(this);
lat = $this.data('lat');
lng = $this.data('lng');
map.panTo(new google.maps.LatLng(lat, lng));
});
Data
var locations = [
{
id: 'place1',
postcode: 'B1 1AA'
},
{
id: 'place2',
postcode: 'CB9 8PU'
}
];
Code
for (i = 0; i < locations.length; i++) {
geocoder.geocode({'address': locations[i].postcode}, function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map
});
} else {
console.log('Geocode was not successful ' + status);
}
}); // end geocode
$(places).append(
'<li class="place" data-id="'+locations[i].id+'" data-lat="<!--lat to go here-->" data-lng="<!--lng to go here-->">'+
'<div class="place-wrap">'+
'<h2>'+locations[i].name+'</h2>'+
'<p class="territory">'+locations[i].territory+'<p>'+
'</div>'+
'</li>'
);
} // end for
Give this a go. The IIFE is there to enclose the index so you don't keep hitting the last index of the locations array due to the asynchronous nature of geocode.
for (i = 0, l = locations.length; i < l; i++) {
(function(i) { // index passed in as parameter
geocoder.geocode({ address: locations[i].postcode }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map
});
$('#places').append(
'<li class="place" data-id="' + locations[i].id + '" data-lat="' + results[0].geometry.location.lat() + '" data-lng="' + results[0].geometry.location.lng() + '">' +
'<div class="place-wrap">' +
'<h2>' + locations[i].name + '</h2>' +
'<p class="territory">' + locations[i].territory + '<p>'+
'</div>' +
'</li>'
);
} else {
console.log('Geocode was not successful ' + status);
}
});
}(i)); // index passed in to IIFE
}