Updating search results for user generated markers

This has sort of been touched upon in a previous question Google Maps: Resetting Markers with Coordinates so I'm going to do my best to abridge the issue. (I am very sorry for revisiting this, but I've been more or less ruining my map or getting no results when trying to reference back the function createMarkers(places), so I'm using the previously answered version, as there are no issues with that one.)

I'm working on a Google Maps based HTML program that provides location markers based on the entered latitude and longitude, along with several other "user locations"; orange markers that are entered manually. The results are displayed to the right, and there's a table at the bottom that tells you the total number of locations along with user locations, and total users.

The problem however, is that I can get the search for the orange markers to update. The blue markers associated with the nearbySearch will update, but the table at the bottom does not recognize the change in latitude & longitude, or the addition or removal of orange markers.

Notice how the only thing that changes on the bottom table is the number of locations to 10 (because of the API's nearbySearch function), but the user locations and total users does not change.

I need help to have the table update the user locations with the change in lat & lng. Updating the latitude and longitude would be nice, but that isn't really important in the grand scheme of things, and having the user locations and total users update is the only real important thing in this. Once that happens, this program will more or less be complete.

The user markers can be found in the function createMarkers(places), so I'm fairly certain calling that function multiple times and probably clearly the results when that happens is the key to making it work. I just have not been able to successfully do that, so I may just be wrong entirely if that's the case.

The entire code is provided below and should run without issue but you need your own Google Maps API key.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Base Mapper</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style id="compiled-css" type="text/css">
#map {
height: 100%;
}

html,
body {
height: 100%;
margin: 0;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
background-color: #ffd1b2
}

#right-panel {
font-family: 'Roboto', 'sans-serif';
line-height: 30px;
padding-left: 10px;
}

#right-panel select,
#right-panel input {
font-size: 15px;
}

#right-panel select {
width: 100%;
}

#right-panel i {
font-size: 12px;
}

#right-panel {
font-family: Arial, Helvetica, sans-serif;
position: absolute;
right: 5px;
top: 60%;
margin-top: -395px;
height: 650px;
width: 200px;
padding: 10px;
padding-left: 10px;
z-index: 10;
border: 1px solid #999;
background: #fff;
}

h2 {
font-size: 23px;
margin: 0 0 5px 0;
}

ul {
list-style-type: none;
padding: 0;
margin: 0;
height: 580px;
width: 200px;
overflow-y: scroll;
}

li {
background-color: #ffc965;
padding: 5px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

li:nth-child(odd) {
background-color: #fff065;
}

#more {
width: 100%;
margin: 5px 0 0 0;
}

input[type=text],
select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
background-color: #ffefe5
}

.container {
border-radius: 5px;
background-color: #ffd1b2 padding: 80px;
width: 80%
}

button {
width: 100%;
background-color: #8f20b6;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:hover {
background-color: #cba00d;
}

table {
width: 100%;
background-color: #8f20b6;
color: white;
padding: 25px 0px;
margin: 8px 0;
border: none;
cursor: pointer;
}

</style>
</head>
<body>
<div class="container">
<form id="mapCenterForm" action="" onsubmit="return false;">
<label for="latitude">lat</label>
<input type="text" id="lat" name="latitude" placeholder="0.000000">

<label for="longitude">lng</label>
<input type="text" id="lng" name="longitude" placeholder="0.000000">
<br>
<button onclick="change_center(); return false">
Submit
</button>
</form>
<div id="map" style="height: 500px"></div>

</div>
<div id="right-panel">
<h2>Locations</h2>
<div id="number_results"></div>
<ul id="places"></ul>
<button id="more">More Results</button>
</div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=MY_API_KEY&callback=initMap" async defer></script>

<script type="text/javascript">
var blue_icon = 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png';
var orange_icon = 'http://maps.google.com/mapfiles/ms/icons/orange-dot.png';
var map;
var lat = 41.18076;
var lng = -73.20537;
var userLoc = 0;
var userCount = 0;
var stopper = 1;
var markers = [];

function initMap() {
// Create the map.
var SHU = {
lat: lat,
lng: lng
}
map = new google.maps.Map(document.getElementById('map'), {
center: SHU,
zoom: 13
});

google.maps.event.addListener(map, 'click', function(e) {
document.getElementById('lat').value = e.latLng.lat();
document.getElementById('lng').value = e.latLng.lng();
})

nearbySearch();
}

function createMarkers(places) {
var harry = new google.maps.Marker({
position: {
lat: 41.18076,
lng: -73.20537
},
map: map,
icon: orange_icon,
title: 'Harry & Martha Richardson'
})
if (((lat > 40.78076 && lat < 41.58076) || (lng > -73.60537 && lng < -72.80537)) && (stopper == 1)) {
userLoc = userLoc + 1
userCount = userCount + 2
};
var Maria = new google.maps.Marker({
position: {
lat: 41.14055,
lng: -73.26827
},
map: map,
icon: orange_icon,
title: 'Maria Blane'
})
if (((lat > 40.74055 && lat < 41.54055) || (lng > -74.00537 && lng < -73.20537)) && (stopper == 1)) {
userLoc = userLoc + 1
userCount = userCount + 1
};
var Kent = new google.maps.Marker({
position: {
lat: 41.19613,
lng: -73.21837
},
map: map,
icon: orange_icon,
title: 'Kent, Pedro, Natasha'
})
if (((lat > 40.79613 && lat < 41.59613) || (lng > -73.61837 && lng < -72.81837)) && (stopper == 1)) {
userLoc = userLoc + 1
userCount = userCount + 3
};
var DummyVar1 = new google.maps.Marker({
position: {
lat: 38.897957,
lng: -77.036560
},
map: map,
icon: orange_icon,
title: 'Dummy Name'
})
if (((lat > 38.497957 && lat < 39.297957) || (lng > -77.43656 && lng < -76.63656)) && (stopper == 1)) {
userLoc = userLoc + 1
userCount = userCount + 100
};
var DummyVar2 = new google.maps.Marker({
position: {
lat: 36.056595,
lng: -112.125092
},
map: map,
icon: orange_icon,
title: 'Dummier Name'
})
if ((lat > 35.656595 && lat < 36.456595) || (lng > -112.525092 && lng < -111.725092)) {
userLoc = userLoc + 1
userCount = userCount + 100
}; {
stopper = 0
};
var bounds = new google.maps.LatLngBounds();
var placesList = document.getElementById('places');

for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};

var marker = new google.maps.Marker({
map: map,
icon: blue_icon,
title: place.name,
position: place.geometry.location
});
markers.push(marker);

var li = document.createElement('li');
li.textContent = place.name;
placesList.appendChild(li);
document.getElementById('number_results').innerHTML = placesList.children.length + " returned";
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
document.getElementById("val").innerHTML = "Based on your latitude of " + lat + " and longitude of " + lng +
", the total places found is: " + (document.getElementById('places').children.length) + ". User locations: " + userLoc + ". Total users: " + userCount + ".";
}

function change_center() {
var newLat = parseFloat(document.getElementById("lat").value);
var newLng = parseFloat(document.getElementById("lng").value);

map.setCenter({
lat: newLat,
lng: newLng
});
nearbySearch();
return false;
}

function nearbySearch() {
document.getElementById('places').innerHTML = "";
for (var i=0; i<markers.length;i++) {
markers[i].setMap(null);
}
markers = [];
// Create the places service.
var service = new google.maps.places.PlacesService(map);
var getNextPage = null;
var moreButton = document.getElementById('more');
moreButton.onclick = function() {
moreButton.disabled = true;
if (getNextPage) getNextPage();
};

service.nearbySearch({
location: map.getCenter(),
radius: 4000,
keyword: "(library) OR (hospital)"
},

function(results, status, pagination) {
if (status !== 'OK') return;

createMarkers(results);
moreButton.disabled = !pagination.hasNextPage;
getNextPage = pagination.hasNextPage && function() {
pagination.nextPage();
};
});
}
</script>

<table>
<tr>
<th id="val"></th>
</tr>
</table>
</body>
</html>

Upvotes: 1

Answers (1)

evan

Reputation: 5701

I'm not sure what you're trying to do with the hard-coded markers or how you want them to update, but as for the bottom panel, you can do the following.

First, to update the lat/lng displayed, use your global lat and lng variables instead of creating new ones.

function change_center() {
  lat = parseFloat(document.getElementById("lat").value);
  lng = parseFloat(document.getElementById("lng").value);

  map.setCenter({
    lat: lat,
    lng: lng
  });

  ...

Then, reset the userLoc and userCount variables upon each new nearby search.

function nearbySearch() {
  userLoc = 0;
  userCount = 0;

  ...

Now create a new function that updates the HTML (and remove this code from your createMarkers function).

function updateBottomTable() {
  document.getElementById("val").innerHTML = "Based on your latitude of " + lat + " and longitude of " + lng +
    ", the total places found is: " + (document.getElementById('places').children.length) + ". User locations: " + userLoc + ". Total users: " + userCount + ".";
}

Finally, call it after the nearbySearch, regardless of whether the status is OK or not:

function(results, status, pagination) {
  if (status === 'OK') {
    createMarkers(results);
    moreButton.disabled = !pagination.hasNextPage;
    getNextPage = pagination.hasNextPage && function() {
      pagination.nextPage();
    };
  }
  updateBottomTable();
});

Also note that it makes more sense to use the AND operator here and to remove the stopper variable that you are always setting to 0. E.g.:

if ((lat > 40.78076 && lat < 41.58076) && (lng > -73.60537 && lng < -72.80537)) {

Hope this helps you!

Upvotes: 1

Updating search results for user generated markers

Answers (1)

Related Questions