We Keep Coding

google maps: remove marker clusters [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
Looking to clear all marker clusters using on click from a floating panel. I can clear and show all markers but not the marker clustered icons. I have scoured through multiple similar questions but am missing something for sure.
When I try to use the below code it comes back with markerCluster is not defined at clearMarkers.
JS Code:
var map;
var geocoder;
var markerAll;
var markers = [];
//Code to load the map with center point of Monterey MA
function initMap() {
var monterey = {lat: 42.181613, lng: -73.215013};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: monterey,
mapTypeId: google.maps.MapTypeId.HYBRID,
labels: true,
});
//collect customer data and geocoder object - declare geocoder as global
var cusdata = JSON.parse(document.getElementById('data').innerHTML);
geocoder = new google.maps.Geocoder();
codeAddress(cusdata);
var allData = JSON.parse(document.getElementById('allData').innerHTML);
showAllCustomers(allData);
var searchData = JSON.parse(document.getElementById('searchData').innerHTML);
showSearchedCustomer(searchData);
}
function showAllCustomers(allData) {
//declare info window variable outside of loop to allow to clear when selecting other markers
var infoWind = new google.maps.InfoWindow;
//Create marker clusterer to group data
var markerCluster = new MarkerClusterer(map, [], {
imagePath: 'images/m'
});
Array.prototype.forEach.call(allData, function(data){
var content = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = [data.lastName + ' ' + data.physicalAddress];
content.appendChild(strong);
//add image to infowindow - you are also able to add image path to mysql and then append dynamically
// var img = document.createElement('img');
// img.src = 'images/santahat.png';
// img.style.width = '50px';
// content.appendChild(img);
//Create markers for customer locations and customize
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var markerAll = new google.maps.Marker({
position: new google.maps.LatLng(data.latitude, data.longitude),
map: map,
icon: iconBase + 'homegardenbusiness.png'
});
//push markers to marker clusterer
markerCluster.addMarker(markerAll);
markers.push(markerAll);
})
}
// Sets the map on all markers in the array.
function setMapOnAll(map) {
for (let i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setMapOnAll(null);
markerCluster.clearMarkers(markerAll); <----- THIS IS WHAT I TRIED TO ADD TO CLEAR CLUSTERS
}
// Shows any markers currently in the array.
function showMarkers() {
setMapOnAll(map);
}

You need to put the markerCluster in the global scope so it can be used in the clearMarkers function (which is (probably) defined in the the global scope).
var markerCluster;
function showAllCustomers(allData) {
//Create marker clusterer to group data
markerCluster = new MarkerClusterer(map, [], {
imagePath:
"https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
});
proof of concept fiddle
code snippet:
var map;
var geocoder;
var markerAll;
var markers = [];
//Code to load the map with center point of Monterey MA
function initMap() {
var monterey = {
lat: 42.181613,
lng: -73.215013
};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {
lat: -28.024,
lng: 140.887
},
mapTypeId: google.maps.MapTypeId.HYBRID,
labels: true,
});
//collect customer data and geocoder object - declare geocoder as global
var cusdata = JSON.parse(document.getElementById('data').innerHTML);
geocoder = new google.maps.Geocoder();
// codeAddress(cusdata);
var allData = JSON.parse(document.getElementById('allData').innerHTML);
allData = locations;
showAllCustomers(allData);
var searchData = JSON.parse(document.getElementById('searchData').innerHTML);
// searchData = locations;
// showSearchedCustomer(searchData);
}
var markerCluster;
function showAllCustomers(allData) {
//Create marker clusterer to group data
markerCluster = new MarkerClusterer(map, [], {
imagePath: 'https://unpkg.com/#google/markerclustererplus#4.0.1/images/m',
});
//declare info window variable outside of loop to allow to clear when selecting other markers
var infoWind = new google.maps.InfoWindow;
Array.prototype.forEach.call(allData, function(data) {
var content = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = [data.lastName + ' ' + data.physicalAddress];
content.appendChild(strong);
//add image to infowindow - you are also able to add image path to mysql and then append dynamically
// var img = document.createElement('img');
// img.src = 'images/santahat.png';
// img.style.width = '50px';
// content.appendChild(img);
//Create markers for customer locations and customize
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var markerAll = new google.maps.Marker({
position: new google.maps.LatLng(data.latitude, data.longitude),
map: map,
// icon: iconBase + 'homegardenbusiness.png'
});
//push markers to marker clusterer
markerCluster.addMarker(markerAll);
markers.push(markerAll);
})
google.maps.event.addDomListener(document.getElementById('btn'), 'click', clearMarkers);
}
// Sets the map on all markers in the array.
function setMapOnAll(map) {
for (let i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setMapOnAll(null);
markerCluster.clearMarkers(markerAll);
}
// Shows any markers currently in the array.
function showMarkers() {
setMapOnAll(map);
}
const locations = [{
latitude: -31.56391,
longitude: 147.154312,
lastName: "Smith",
physicalAddress: "New York, NY"
},
{
latitude: -33.718234,
longitude: 150.363181,
lastName: "Smith",
physicalAddress: "New York, NY"
},
{
latitude: -33.727111,
longitude: 150.371124,
lastName: "Smith",
physicalAddress: "New York, NY"
},
{
latitude: -33.848588,
longitude: 151.209834,
lastName: "Smith",
physicalAddress: "New York, NY"
},
{
latitude: -33.851702,
longitude: 151.216968,
lastName: "Smith",
physicalAddress: "New York, NY"
},
{
latitude: -34.671264,
longitude: 150.863657,
lastName: "Smith",
physicalAddress: "New York, NY"
},
{
latitude: -35.304724,
longitude: 148.662905,
lastName: "Smith",
physicalAddress: "New York, NY"
},
{
latitude: -36.817685,
longitude: 175.699196,
lastName: "Smith",
physicalAddress: "New York, NY"
},
{
latitude: -36.828611,
longitude: 175.790222,
lastName: "Smith",
physicalAddress: "New York, NY"
},
{
latitude: -37.75,
longitude: 145.116667,
lastName: "Smith",
physicalAddress: "New York, NY"
},
{
latitude: -37.759859,
longitude: 145.128708,
lastName: "Smith",
physicalAddress: "New York, NY"
},
{
latitude: -37.765015,
longitude: 145.133858,
lastName: "Smith",
physicalAddress: "New York, NY"
},
{
latitude: -37.770104,
longitude: 145.143299,
lastName: "Smith",
physicalAddress: "New York, NY"
},
{
latitude: -37.7737,
longitude: 145.145187,
lastName: "Smith",
physicalAddress: "New York, NY"
},
{
latitude: -37.774785,
longitude: 145.137978,
lastName: "Smith",
physicalAddress: "New York, NY"
},
{
latitude: -37.819616,
longitude: 144.968119,
lastName: "Smith",
physicalAddress: "New York, NY"
},
{
latitude: -38.330766,
longitude: 144.695692,
lastName: "Smith",
physicalAddress: "New York, NY"
},
{
latitude: -39.927193,
longitude: 175.053218,
lastName: "Smith",
physicalAddress: "New York, NY"
},
{
latitude: -41.330162,
longitude: 174.865694,
lastName: "Smith",
physicalAddress: "New York, NY"
},
{
latitude: -42.734358,
longitude: 147.439506,
lastName: "Smith",
physicalAddress: "New York, NY"
},
{
latitude: -42.734358,
longitude: 147.501315,
lastName: "Smith",
physicalAddress: "New York, NY"
},
{
latitude: -42.735258,
longitude: 147.438,
lastName: "Smith",
physicalAddress: "New York, NY"
},
{
latitude: -43.999792,
longitude: 170.463352,
lastName: "Smith",
physicalAddress: "New York, NY"
},
];
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Marker Clustering</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://unpkg.com/#google/markerclustererplus#4.0.1/dist/markerclustererplus.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<input id="btn" type="button" value="Clear Markers" />
<div id="map"></div>
<div id="data">[]</div>
<div id="allData">[]</div>
<div id="searchData">[]</div>
</body>
</html>

data subscribed to Knockout ObservableArray but displaying empty array

I'm new to javascript. i'm having difficulty printing the data from the location ObservableArray. The data - bind works and i could list out the data from the location ObservableArray at the view but can't print it out on the console. i have been on it for hours now, any help would be appreciated. thank you
Here is the ViewModel
let MapViewModel = function() {
let map
let geocoder;
let self = this;
self.location = ko.observableArray([]);
for (let i = 0; i < locationList.length; ++i) {
self.location.push(new Location(locationList[i]));
}
console.log(this.location()); // Location, Location, Location, Location, Location, Location, Location]
console.log(this.location()[0].name); // Location {name: ƒ, address: ƒ} ...
console.log(this.location().length); //length is 7
}
let Location = function(data) {
this.name = ko.observable(data.name);
this.address = ko.observable(data.address);
}
ko.applyBindings(new MapViewModel());
Here is the Binding Code`
<div class="menu_item_container">
<h1>Neighborhood Map</h1>
<input type="text" id="search" data-bind= 'value:filterLocations, valueUpdate: 'afterKeyDown',value:filterLocations' placeholder="Search Locations...">
<hr>
<nav id=nav>
<ul data-bind='foreach:location'>
<li data-bind="text:name"></li>
</ul>
</nav>
</div>
LocationList
let locationList = [{
name: 'Brooklyn Museum',
address: '200 Eastern Pkwy, Brooklyn, NY 11238'
}, {
name: 'Empire State Building',
address: '350 5th Ave, New York, NY 10118'
}, {
name: 'Statue of liberty',
address: 'New York, NY 10004'
}, {
name: 'Rockefeller Center',
address: '45 Rockefeller Plaza, New York, NY 10111'
},
{
name: 'Brooklyn Bridge',
address: 'Brooklyn Bridge, New York, NY 10038'
},
{
name: 'Time Square',
address: '45 Rockefeller Plaza, New York, NY 10111'
},
{
name: 'World Trade Center',
address: '285 Fulton St, New York, NY 10007'
},
];

This can unwrap observable to regular js and convert this to single string (if needed) and then u can print it console :
let locationsJSON = ko.toJS(self.location);
let locationsString = JSON.stringify(locationsJSON);

Ways to handle more than 23 waypoints Google Maps

I followed the below reference posted by mikep to handle more than 23 waypoints with premier license, it does handle more than 23 waypoints however it's not considering the optimal route with 28 waypoints. Please find the snippet of code below. Please let me know, if I missed anything.
Reference: Exceed 23 waypoint per request limit on Google Directions API (Business/Work level)
<!DOCTYPE html>
<html>
<head>
<title>Distance Matrix service</title>
<style>
#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;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
width: 50%;
}
#right-panel {
float: right;
width: 48%;
padding-left: 2%;
}
#output {
font-size: 11px;
}
</style>
</head>
<body>
<div id="right-panel">
<div id="inputs">
<pre>
var origin1 = {lat: 55.930, lng: -3.118};
var origin2 = 'Greenwich, England';
var destinationA = 'Stockholm, Sweden';
var destinationB = {lat: 50.087, lng: 14.421};
</pre>
</div>
<div>
<strong>Results</strong>
</div>
<div id="output"></div>
</div>
<div id="map"></div>
<script>
function initMap() {
var service = new google.maps.DirectionsService;
var map = new google.maps.Map(document.getElementById('map'));
// list of points
// list of points
var stations = [
{lat: 42.304403, lng: -89.04231900000002, name: 'Station 1'},
{lat: 42.236168, lng: -88.54327699999999, name: 'Station 2'},
{lat: 42.234782, lng: -88.53974299999999, name: 'Station 3'},
{lat: 42.151208, lng: -88.47053599999998, name: 'Station 4'},
{lat: 42.159458, lng: -88.44529899999998, name: 'Station 5'},
{lat: 42.157442, lng: -88.45886899999999, name: 'Station 6'},
{lat: 42.187703, lng: -88.36313100000001, name: 'Station 7'},
{lat: 42.188238, lng: -88.34060099999999, name: 'Station 8'},
{lat: 42.185022, lng: -88.309731, name: 'Station 9'},
{lat: 42.17901, lng: -88.32207499999998, name: 'Station 10'},
{lat: 42.165468, lng: -88.322519, name: 'Station 11'},
{lat: 41.91145, lng: -88.30584899999997, name: 'Station 12'},
{lat: 41.903634, lng: -88.3133890000000, name: 'Station 13'},
{lat: 41.67167, lng: -88.548182, name: 'Station 14'},
{lat: 41.564786, lng: -88.600822, name: 'Station 15'},
{lat: 41.561587, lng: -88.60028599999998, name: 'Station 16'},
{lat: 41.560347, lng: -88.597355, name: 'Station 17'},
{lat: 41.582568, lng: -88.90418599999998, name: 'Station 18'},
{lat: 41.5849, lng: -88.90929499999999, name: 'Station 19'},
{lat: 41.584279, lng: -88.91100, name: 'Station 20'},
{lat: 41.794906, lng: -88.93928299999999, name: 'Station 21'},
{lat: 41.796471, lng: -88.94241299999999, name: 'Station 22'},
{lat: 41.849191, lng: -89.0242670000000, name: 'Station 23'},
{lat: 41.846972, lng: -89.020418, name: 'Station 24'},
{lat: 41.875845, lng: -88.45214199999998, name: 'Station 25'},
{lat: 42.030196, lng: -88.271702, name: 'Station 26'},
{lat: 42.304403, lng: -89.04231900000002, name: 'Station 27'},
// ... as many other stations as you need
];
// Zoom and center map automatically by stations (each station will be in visible map area)
var lngs = stations.map(function(station) { return station.lng; });
var lats = stations.map(function(station) { return station.lat; });
map.fitBounds({
west: Math.min.apply(null, lngs),
east: Math.max.apply(null, lngs),
north: Math.min.apply(null, lats),
south: Math.max.apply(null, lats),
});
// Show stations on the map as markers
for (var i = 0; i < stations.length; i++) {
new google.maps.Marker({
position: stations[i],
map: map,
title: stations[i].name
});
}
// Divide route to several parts because max stations limit is 25 (23 waypoints + 1 origin + 1 destination)
for (var i = 0, parts = [], max = 25 - 1; i < stations.length; i = i + max)
parts.push(stations.slice(i, i + max + 1));
// Service callback to process service results
var service_callback = function(response, status) {
if (status != 'OK') {
console.log('Directions request failed due to ' + status);
return;
}
var renderer = new google.maps.DirectionsRenderer;
renderer.setMap(map);
renderer.setOptions({ suppressMarkers: true, preserveViewport: true });
renderer.setDirections(response);
};
// Send requests to service to get route (for stations count <= 25 only one request will be sent)
for (var i = 0; i < parts.length; i++) {
// Waypoints does not include first station (origin) and last station (destination)
var waypoints = [];
for (var j = 1; j < parts[i].length - 1; j++)
waypoints.push({location: parts[i][j], stopover: false});
// Service options
var service_options = {
origin: parts[i][0],
destination: parts[i][parts[i].length - 1],
waypoints: waypoints,
optimizeWaypoints: true,
travelMode: 'DRIVING'
};
// Send request
service.route(service_options, service_callback);
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyABPfm9lb39EOvsKMyrdnwdTJSN8IjqVy0&callback=initMap">
</script>
</body>
</html>

Global minima is not possible in that case using Google's API. We have to have an approximation -
Iteratively, cluster 20-25 points together and generate route based on that; Select one master point from the 20-25 points from each cluster - it can be 1st point/one in the middle by comparing averages etc,.
Generate another calcRoute using cluster's master points. Based on this, try to generate a broad route between clusters and route between clusters.

Load content with URL update and default content

I have a jQuery plugin that loads content into a certain div. Ignore the drawmap function at the beginning. It only serves in one of the pages. I'm trying to load content into the div while updating the url (not redirecting). For example, if I click on About Us the url will show: calstateautoparts.com/beta/aboutus.html. If I click on contact us the url will show calstateautoparts.com/beta/contactus.html.
Also, I would like to have the plugin load a page in the div by default, home.html. How do I make both of these changes in my code?
You can see the live site at: http://calstateautoparts.com/beta
<script type="text/javascript">
jQuery(function($){
function drawmap(){
new Maplace({
locations: [
{
lat: 33.8583,
lon: -117.8678,
title: 'Anaheim',
html: [
'<h3>Anaheim</h3>',
'<p>1361 N RedGum St, Anaheim CA 92806<br>(714) 630-5954</p>'
].join(''),
zoom: 8
},
{
lat: 34.2358,
lon: -118.5739,
title: 'Chatsworth',
html: [
'<h3>Chatsworth</h3>',
'<p>20233 Corisco St, Chatsworth CA 91311<br>(818) 998-3001</p>'
].join(''),
zoom: 8
},
{
lat: 32.8142,
lon: -117.1247,
title: 'San Diego',
html: [
'<h3>San Diego</h3>',
'<p>4000 Ruffin Road Suite K, San Diego CA 92123<br>(858) 292-1622</p>'
].join(''),
zoom: 8
}
,
{
lat: 34.9137,
lon: -120.4632,
title: 'Santa Maria',
html: [
'<h3>Santa Maria</h3>',
'<p>1459 W. Fairway Dr., Santa Maria CA 93455<br>(805) 922-4445</p>'
].join(''),
zoom: 8
}
,
{
lat: 34.5011,
lon: -117.3279,
title: 'Victorville',
html: [
'<h3>Victorville</h3>',
'<p>15400-B Tamarack Road, Victorville CA 92392<br>(760) 243-5666</p>'
].join(''),
zoom: 8
}
,
{
lat: 36.1605,
lon: -115.1050,
title: 'Las Vegas',
html: [
'<h3>Las Vegas</h3>',
'<p>3101 Builders Ave., Las Vegas, NV 89101<br>(702) 452-2440</p>'
].join(''),
zoom: 8
}
,
{
lat: 33.1677,
lon: -117.2202,
title: 'Vista',
html: [
'<h3>Vista</h3>',
'<p>2055 Thibodo Rd, Vista CA 92081<br>(760) 599-0791</p>'
].join(''),
zoom: 8
}
,
{
lat: 33.6224,
lon: -117.7194,
title: 'Laguna Hills',
html: [
'<h3>Laguna Hills</h3>',
'<p>23561 Ridge Route Suite P, Laguna Hills CA 92653<br>(949) 699-3308</p>'
].join(''),
zoom: 8
}
,
{
lat: 34.4245,
lon: -118.4998,
title: 'Santa Clarita',
html: [
'<h3>Santa Clarita</h3>',
'<p>26846 Oak Ave Unit R, Santa Clarita CA 91315<br>(661) 424-9396</p>'
].join(''),
zoom: 8
}
],
map_div: '#gmap-list',
controls_type: 'list',
controls_title: 'Choose a location:'
}).Load();
}
$('.menuitem').click(function(e){
$('#contentarea').load(this.href, $(this).data('loadfunc') || null);
e.preventDefault();
});
$('#contactus').data({loadfunc: drawmap});
});
</script>

Rails Google Maps integration Javascript problem

update I
Based on feedback, I've changed var maps to var adds.
problem description
I'm working on Rails 3.0.0.beta2, following Advanced Rails Recipes "Recipe #32, Mark locations on a Google Map" and I hit a road block: I do not see a google map. My #adds view uses #adds.to_json to connect the google maps api with my model. My database contains "latitude" "longitude", as floating points. And the entire project can be accessed at github.
Can you see where I'm not connecting the to_json output with the javascript correctly? Can you see other glairing errors in my javascript? Thanks in advance!
My application.js file:
function initialize() {
if (GBrowserIsCompatible() && typeof adds != 'undefined') {
var adds = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addControl(new GLargeMapControl());
function createMarker(latlng, add) {
var marker = new GMarker(latlng);
var html="<strong>"+add.first_name+"</strong><br />"+add.address;
GEvent.addListener(marker,"click", function() {
map.openInfoWindowHtml(latlng, html);
});
return marker;
}
var bounds = new GLatLngBounds;
for (var i = 0; i < adds.length; i++) {
var latlng=new GLatLng(adds[i].latitude,adds[i].longitude)
bounds.extend(latlng);
map.addOverlay(createMarker(latlng, adds[i]));
}
map.setCenter(bounds.getCenter(),map.getBoundsZoomLevel(bounds));
}
}
window.onload=initialize;
window.onunload=GUnload;
Layouts/adds.html.erb:
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=ABQIAAAAeH4ThRuftWNHlwYdvcK1QBTJQa0g3IQ9GZqIMmInSLzwtGDKaBQvZChl_y5OHf0juslJRNx7TbxK3Q" type="text/javascript"></script>
<% if #adds -%>
<script type="text/javascript">
var adds = <%= raw #adds.to_json %>;
</script>
<% end -%>
Rails Console Output
a = Add.all
=> [#<Add id: 1, first_name: "Jason", last_name: "Wade", address: "225 Anzavista Ave, San Francisco, CA", address2: "", zip: "94115", city: "San Francisco", phone: "415-280-6678", float: nil, campaign_id: 1, email: "jwade#gmail.com", employer: "Google", occupation: "", created_at: "2010-04-06 14:00:36", updated_at: "2010-04-06 14:00:36", latitude: 37.779623, longitude: -122.445662>]
ruby-1.9.1-p378 > a.to_json
=> "[{\"address\":\"225 Anzavista Ave, San Francisco, CA\",\"address2\":\"\",\"campaign_id\":1,\"city\":\"San Francisco\",\"created_at\":\"2010-04-06T14:00:36Z\",\"email\":\"jwade#gmail.com\",\"employer\":\"Google\",\"first_name\":\"Jason\",\"float\":null,\"id\":1,\"last_name\":\"Wade\",\"latitude\":37.779623,\"longitude\":-122.445662,\"occupation\":\"\",\"phone\":\"415-280-6678\",\"updated_at\":\"2010-04-06T14:00:36Z\",\"zip\":\"94115\"}]"

var bounds = new GLatLngBounds;
should be
var bounds = new GLatLngBounds();
And you were initially correct:
var map = new GMap2(document.getElementById("map"));