Toggle groups of markers in Google Maps API - javascript

I have several groups ("state") of markers on a map which I want to be able to toggle their visibility without reloading the page.
I'm finding lots of variations of having markergroups but they all seem to be not working with this google api version.
Here is the HTML
<input type="checkbox" id="state" name="Backlog" checked> Backlog
<input type="checkbox" id="state" name="Breached" checked> Breached
<input type="checkbox" id="state" name="Active" checked> Active
<input type="checkbox" id="state" name="Scheduled" checked> Scheduled
<div id="map" style="height:800px;"></div>
Here is the javascript
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: 54.3266311, lng: -2.7585563},
mapTypeId: 'roadmap'
});
var infoWin = new google.maps.InfoWindow();
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location,
icon: 'https://maps.google.com/mapfiles/kml/'+location.type,
});
google.maps.event.addListener(marker, 'click', function(evt) {
infoWin.setContent(location.info);
infoWin.open(map, marker);
})
return marker;
});
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
minimumClusterSize: 2,
maxZoom: 4,
zoomOnClick: false
}
);
}
var locations = [{lat:53.750503,lng:-2.429168,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 75199925"},{lat:51.290162,lng:-0.833112,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 76669845"},{lat:51.301737,lng:0.051969,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 75199930"},{lat:50.525378,lng:-3.594341,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 78875603"},{lat:51.581895,lng:-0.724800,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 78581052"},{lat:50.391133,lng:-4.072097,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 78106941"},{lat:51.318527,lng:-1.021035,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 78396115"},{lat:50.443925,lng:-3.561630,type:'/paddle/ylw-square-lv.png',state:'Backlog',info:"<strong>Order ID:</strong> 78875582"},{lat:53.625107,lng:-2.337432,type:'/paddle/blu-square-lv.png',state:'Active',info:"<strong>Order ID:</strong> 80444510"},{lat:52.432582,lng:-2.026563,type:'/paddle/blu-square-lv.png',state:'Active',info:"<strong>Order ID:</strong> 80423141"}]
Any help would be great :) I don't mind getting rid of the clusters, I just can't figure out how to!

HTML element ids must be unique, all your checkboxes currently have the same id.
<input type="checkbox" id="state" name="Backlog" checked> Backlog
<input type="checkbox" id="state" name="Breached" checked> Breached
<input type="checkbox" id="state" name="Active" checked> Active
<input type="checkbox" id="state" name="Scheduled" checked> Scheduled
typically that is what "name" is used for (it is allowed to be the same), so you can do this:
<input type="checkbox" name="state" id="Backlog" checked> Backlog
<input type="checkbox" name="state" id="Breached" checked> Breached
<input type="checkbox" name="state" id="Active" checked> Active
<input type="checkbox" name="state" id="Scheduled" checked> Scheduled
then when the checkboxes are clicked, process through the array of markers, setting the visible property appropriately:
google.maps.event.addDomListener(document.getElementById('Backlog'), 'click', clickListener);
google.maps.event.addDomListener(document.getElementById('Breached'), 'click', clickListener);
google.maps.event.addDomListener(document.getElementById('Active'), 'click', clickListener);
google.maps.event.addDomListener(document.getElementById('Scheduled'), 'click', clickListener);
function clickListener() {
var typeId = this.id;
var type;
for (var i=0; i<iconMapping.length;i++) {
if (iconMapping[i].state==typeId)
type = iconMapping[i].icon;
}
var markers = markerCluster.getMarkers();
for (var i=0; i<markers.length; i++) {
if (markers[i].getIcon().includes(type)) {
markers[i].setVisible(this.checked);
}
}
}
}
// your example doesn't include examples for Active/Scheduled, if they are
// duplicates of existing marker icons, a different approach will need to be used.
var iconMapping = [
{icon:'ylw-square-lv.png',state:'Backlog'},
{icon:'blu-square-lv.png',state:'Active'}
];
proof of concept fiddle
(if you want the clusters to reflect the currently visible icons, you will need to update the markers array passed in to it, rather than the visible property of the markers).
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {
lat: 54.3266311,
lng: -2.7585563
},
mapTypeId: 'roadmap'
});
var infoWin = new google.maps.InfoWindow();
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location,
icon: 'https://maps.google.com/mapfiles/kml/' + location.type,
});
google.maps.event.addListener(marker, 'click', function(evt) {
infoWin.setContent(location.info);
infoWin.open(map, marker);
})
return marker;
});
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://unpkg.com/#google/markerclustererplus#4.0.1/images/m',
minimumClusterSize: 2,
maxZoom: 4,
zoomOnClick: false
});
google.maps.event.addDomListener(document.getElementById('Backlog'), 'click', clickListener);
google.maps.event.addDomListener(document.getElementById('Breached'), 'click', clickListener);
google.maps.event.addDomListener(document.getElementById('Active'), 'click', clickListener);
google.maps.event.addDomListener(document.getElementById('Scheduled'), 'click', clickListener);
function clickListener() {
var typeId = this.id;
var type;
for (var i = 0; i < iconMapping.length; i++) {
if (iconMapping[i].state == typeId)
type = iconMapping[i].icon;
}
var markers = markerCluster.getMarkers();
for (var i = 0; i < markers.length; i++) {
if (markers[i].getIcon().includes(type)) {
markers[i].setVisible(this.checked);
}
}
}
}
var iconMapping = [{
icon: 'ylw-square-lv.png',
state: 'Backlog'
},
{
icon: 'blu-square-lv.png',
state: 'Active'
}
];
var locations = [{
lat: 53.750503,
lng: -2.429168,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 75199925"
}, {
lat: 51.290162,
lng: -0.833112,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 76669845"
}, {
lat: 51.301737,
lng: 0.051969,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 75199930"
}, {
lat: 50.525378,
lng: -3.594341,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 78875603"
}, {
lat: 51.581895,
lng: -0.724800,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 78581052"
}, {
lat: 50.391133,
lng: -4.072097,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 78106941"
}, {
lat: 51.318527,
lng: -1.021035,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 78396115"
}, {
lat: 50.443925,
lng: -3.561630,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 78875582"
}, {
lat: 53.625107,
lng: -2.337432,
type: '/paddle/blu-square-lv.png',
state: 'Active',
info: "<strong>Order ID:</strong> 80444510"
}, {
lat: 52.432582,
lng: -2.026563,
type: '/paddle/blu-square-lv.png',
state: 'Active',
info: "<strong>Order ID:</strong> 80423141"
}]
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 90%;
}
/* 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>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<input type="checkbox" name="state" id="Backlog" checked> Backlog
<input type="checkbox" name="state" id="Breached" checked> Breached
<input type="checkbox" name="state" id="Active" checked> Active
<input type="checkbox" name="state" id="Scheduled" checked> Scheduled
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async></script>
</body>
</html>
If you want the clusters to reflect the number of visible markers, you need to change the code to update the markers array in the MarkerClusterer:
function clickListener() {
var typeId = this.id;
var type;
var visibleMarkers = [];
for (var i=0; i<iconMapping.length;i++) {
if (iconMapping[i].state==typeId)
type = iconMapping[i].icon;
}
for (var i=0; i<markers.length; i++) {
if (markers[i].getIcon().includes(type)) {
markers[i].setVisible(this.checked);
}
if (markers[i].getVisible())
visibleMarkers.push(markers[i]);
}
markerCluster.clearMarkers();
markerCluster.addMarkers(visibleMarkers);
}
proof of concept fiddle
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {
lat: 54.3266311,
lng: -2.7585563
},
mapTypeId: 'roadmap'
});
var infoWin = new google.maps.InfoWindow();
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location,
icon: 'https://maps.google.com/mapfiles/kml/' + location.type,
});
google.maps.event.addListener(marker, 'click', function(evt) {
infoWin.setContent(location.info);
infoWin.open(map, marker);
})
return marker;
});
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://unpkg.com/#google/markerclustererplus#4.0.1/images/m',
minimumClusterSize: 2,
maxZoom: 4,
zoomOnClick: false
});
google.maps.event.addDomListener(document.getElementById('Backlog'), 'click', clickListener);
google.maps.event.addDomListener(document.getElementById('Breached'), 'click', clickListener);
google.maps.event.addDomListener(document.getElementById('Active'), 'click', clickListener);
google.maps.event.addDomListener(document.getElementById('Scheduled'), 'click', clickListener);
function clickListener() {
var typeId = this.id;
var type;
var visibleMarkers = [];
for (var i = 0; i < iconMapping.length; i++) {
if (iconMapping[i].state == typeId)
type = iconMapping[i].icon;
}
console.log("click type=" + type)
for (var i = 0; i < markers.length; i++) {
console.log("markers[" + i + "] icon=" + markers[i].getIcon() + " map=" + markers[i].getMap() + "visible=" + markers[i].getVisible());
if (markers[i].getIcon().includes(type)) {
markers[i].setVisible(this.checked);
console.log("markers[" + i + "] map=" + markers[i].getMap() + " visible=" + markers[i].getVisible())
}
if (markers[i].getVisible())
visibleMarkers.push(markers[i]);
}
markerCluster.clearMarkers();
console.log("after clear:" + markerCluster.getMarkers().length)
markerCluster.addMarkers(visibleMarkers);
console.log("after add:" + markerCluster.getMarkers().length)
}
}
var iconMapping = [{
icon: 'ylw-square-lv.png',
state: 'Backlog'
},
{
icon: 'blu-square-lv.png',
state: 'Active'
}
];
var locations = [{
lat: 53.750503,
lng: -2.429168,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 75199925"
}, {
lat: 51.290162,
lng: -0.833112,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 76669845"
}, {
lat: 51.301737,
lng: 0.051969,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 75199930"
}, {
lat: 50.525378,
lng: -3.594341,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 78875603"
}, {
lat: 51.581895,
lng: -0.724800,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 78581052"
}, {
lat: 50.391133,
lng: -4.072097,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 78106941"
}, {
lat: 51.318527,
lng: -1.021035,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 78396115"
}, {
lat: 50.443925,
lng: -3.561630,
type: '/paddle/ylw-square-lv.png',
state: 'Backlog',
info: "<strong>Order ID:</strong> 78875582"
}, {
lat: 53.625107,
lng: -2.337432,
type: '/paddle/blu-square-lv.png',
state: 'Active',
info: "<strong>Order ID:</strong> 80444510"
}, {
lat: 52.432582,
lng: -2.026563,
type: '/paddle/blu-square-lv.png',
state: 'Active',
info: "<strong>Order ID:</strong> 80423141"
}]
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 90%;
}
/* 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>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<input type="checkbox" name="state" id="Backlog" checked> Backlog
<input type="checkbox" name="state" id="Breached" checked> Breached
<input type="checkbox" name="state" id="Active" checked> Active
<input type="checkbox" name="state" id="Scheduled" checked> Scheduled
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly&channel=2" async></script>
</body>
</html>

You can use the setVisible function in marker class like this:
for (var i in markersToHide) {
markersToHide[i].setVisible(true);
}
// if markers are inside a cluster
markerCluster.repaint();

Related

Showing map markers by location in list outside map

I have a number of markers and I want to show the markers in a list outside of the map. How can this be achieved using javascript? I am new to Javascript so help is appreciated. Code I have currently below, this is all working as expected apart from listing the map marker information.
I idea is that a list will appear depending on the option chosen in the dropdown for counties.
//List of Counties
var counties = [{
name: "Armagh",
code: "am",
zoom : 8,
center: {
lat: 54.274911,
lng: -6.626583
}
}, {
name: "Cork",
code: "c",
zoom : 8,
center: {
lat: 51.904246,
lng: -8.474038
}
}];
//List of Practices
var practice = [{
name: "Cross Veterinary Clinic",
position: {
lat: 54.07531,
lng: -6.60590
},
code: "am",
address: "8 Dundalk Road, Crossmaglen, Co. Armagh",
vet: "Carol Peterson",
programme: ['bvd', 'jd']
}, {
name: "Keltic Veterinary",
position: {
lat: 52.35386,
lng: -8.68204
},
code: "c",
address: "Charleville Town Centre, Bakers Road, Charleville, Co. Cork",
vet: "Gerald Gonzales",
programme: ['cck', 'bvd']
}];
var countyselect = document.getElementById('county')
countyselect.addEventListener("change", onCountySelect);
//render map
function initialize() {
var options = {
center: {
lat: 53.2734,
lng: -7.77832031
},
zoom: 6.5
};
map = new google.maps.Map(document.getElementById('map'), options);
marker = renderMarker();
}
function renderMarker() {
for (var i = 0; i < practice.length; i++) {
var marker = new google.maps.Marker({
position: practice[i].position,
title: practice[i].name,
map: map,
});
inforwindow(marker, map);
}
}
function inforwindow(marker, map) {
var infowindow = new google.maps.InfoWindow(); {
google.maps.event.addListener(marker, 'click', function(renderMarker) {
infowindow.setContent(marker.getTitle());
infowindow.open(map, marker);
});
}
}
function onCountySelect() {
let countySelect = document.getElementById("county");
let selectedCounty = countySelect.options[countySelect.selectedIndex];
let countyFound = (counties.find(({ name }) => name === selectedCounty.value));
if (selectedCounty.value === "all") {
map.setCenter({ lat: 53.2734, lng: -7.77832031 });
map.setZoom(6.5);
} else {
map.setCenter(countyFound.center);
map.setZoom(countyFound.zoom);
}
}
function resultsList() {
if (selectedCounty.value === "all") {
let countySelect = document.write(`<h3>${practice.name}</h3><p>${practice.address}</p><p>${practice.vet}</p>`);
}
}
I'm not sure at all from your code what your plan is with markers, or whether you intend to make items in the list clickable so that they highlight a specific marker on the map. But in any case, here's code to do what you asked - to create a list of relevant practices when a county is selected. I've dropped in some hacky test HTML just as it's easier to test.
Hopefully this will get you on the right path.
A couple of notes - you have used the backtick, ie using ` and ${variable} approach to rendering some content - this may not work on older browsers directly.
Also, please excuse the mix of single and double quotes - that's a matter of taste but I didn't see the point in going back and changing everything you had done. Good luck!
<!doctype html>
<html>
<head>
<title>Map Thing</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
font-family: Helvetica;
min-height: 100vh;
display: flex;
flex-direction: column;
}
#container {
flex: 1;
display: flex;
}
#options {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#results {
margin-top: 40px;
padding: 40px;
}
.result {
padding: 30px;
border: 1px solid #ddd;
}
#map {
flex: 3;
}
</style>
</head>
<body>
<div id="container">
<div id="options">
<select id="county" name="county" value="">
<option value="">Please choose</option>
<option value="am">Armagh</option>
<option value="c">Cork</option>
</select>
<div id="results"><!-- will be populated --></div>
</div>
<div id="map"></div>
</div>
<script>
//List of Counties
var counties = [{
name: "Armagh",
code: "am",
zoom : 8,
center: {
lat: 54.274911,
lng: -6.626583
}
}, {
name: "Cork",
code: "c",
zoom : 8,
center: {
lat: 51.904246,
lng: -8.474038
}
}];
//List of Practices
var practices = [{
name: "Cross Veterinary Clinic",
position: {
lat: 54.07531,
lng: -6.60590
},
code: "am",
address: "8 Dundalk Road, Crossmaglen, Co. Armagh",
vet: "Carol Peterson",
programme: ['bvd', 'jd']
}, {
name: "Keltic Veterinary",
position: {
lat: 52.35386,
lng: -8.68204
},
code: "c",
address: "Charleville Town Centre, Bakers Road, Charleville, Co. Cork",
vet: "Gerald Gonzales",
programme: ['cck', 'bvd']
}];
function initialize() {
var options = {
center: {
lat: 53.2734,
lng: -7.77832031
},
zoom: 6.5
};
map = new google.maps.Map(document.getElementById('map'), options);
var countyselect = document.getElementById('county');
countyselect.addEventListener('change', onCountySelect);
renderMarkers();
}
function renderMarkers() {
for (var i = 0; i < practices.length; i++) {
var marker = new google.maps.Marker({
position: practices[i].position,
title: practices[i].name,
map: map,
});
}
}
function showInfoWindow(marker, map) {
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(marker.getTitle());
infowindow.open(map, marker);
});
}
function onCountySelect() {
var countySelect = document.getElementById("county");
var countiesByCode = counties.map(function(c){
return c.code;
});
var index = countiesByCode.indexOf(countySelect.value)
if (index > -1) {
var selectedCounty = counties[index];
map.setCenter(selectedCounty.center);
map.setZoom(selectedCounty.zoom);
renderResultsList(selectedCounty);
} else {
map.setCenter({ lat: 53.2734, lng: -7.77832031 });
map.setZoom(6.5);
clearResultsList();
}
}
function renderResultsList(selectedCounty) {
var relevantPractices = practices.filter(function(p){
return p.code === selectedCounty.code;
});
var resultsArea = document.getElementById("results");
resultsArea.innerHTML = "";
for(var i = 0; i < relevantPractices.length; i++) {
var practice = relevantPractices[i];
var div = document.createElement("div");
div.className = "result";
div.innerHTML = `<h3>${practice.name}</h3><p>${practice.address}</p><p>${practice.vet}</p>`;
resultsArea.appendChild(div);
}
}
function clearResultsList() {
document.getElementById("results").innerHTML = "";
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&callback=initialize"
async defer></script>
</body>
</html>

Filter Google Map markers with a checkbox

I'm trying to show certain markers when a user selects a checkbox and clicks "show on map". It should show 2 markers when the "Gaudi Tour" is selected and two different markers when the "Gothic Tour" is selected. However, it isn't filtering the results in the createMarkers() function and is instead showing all the markers when the button is clicked.
I can't figure out why it's not filtering the results and I'm not getting any errors.
<section>
<div class="container">
<h2>Choose your tour:</h2>
<div class="container" id="selectTour">
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" id="one">Gaudi Tour
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" id="two">Gothic Tour
</label>
</div>
</div>
<div class="container">
<button onclick="updateMarkers();">Show on Map</button>
</div>
<!--The Map-->
<div class="container">
<div id="map"></div>
</div>
</div>
</section>
var map;
var markers = [];
//---------------------Data of Locations-----------------
let locations = [{
name: 'one',
tour: 'gaudi',
coords: { lat: 41.403706, lng: 2.173504 },
content: 'google',
},
{
name: 'one',
tour: 'gaudi',
coords: { lat: 41.4145, lng: 2.1527 },
content: 'maps',
},
{
name: 'two',
tour: 'gothic',
coords: { lat: 41.3839, lng: 2.1821 },
content: 'are'
},
{
name: 'two',
tour: 'gothic',
coords: { lat: 41.3840, lng: 2.1762 },
content: 'annoying'
}
];
//---------------------Initializing Map-----------------
function initMap() {
var mapOptions = {
center: new google.maps.LatLng(41.3851, 2.1734),
zoom: 12
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
//---------------------Markers-----------------
function addMarker(props) {
var marker = new google.maps.Marker({
position: props.coords,
map: map,
icon: props.iconImage
});
//checking for icon
if (props.iconImage) {
marker.setIcon(props.iconImage);
}
//checking for infowindow
if (props.content) {
var infoWindow = new google.maps.InfoWindow({
content: props.content
});
marker.addListener('click', function() {
infoWindow.open(map, marker);
});
}
}
function updateMarkers() {
createMarkers();
for (var i = 0; i < locations.length; i++) {
addMarker(locations[i]);
}
}
//---------------------Select Tour-----------------
function createMarkers() {
let selectedLocations = locations.filter(function(obj) {
var selectedTour = document.getElementById("selectTour").value;
return obj.tour === selectedTour;
});
let resultlist = [];
if (document.getElementById("one").checked) {
let one = selectedLocations.filter(function(obj) {
return obj.name === 'one';
});
resultlist = resultlist.concat(one);
}
if (document.getElementById("two").checked) {
let two = selectedLocations.filter(function(obj) {
return obj.name === 'two';
});
resultlist = resultlist.concat(two);
}
for (var i = 0; i < resultlist.length;) {
markers.push({
coords: {
lat: resultlist[i].lat,
lng: resultlist[i].lng
},
content: resultlist[i].name
});
}
}
Any advice would be a massive help.
Based upon your original code but modified - I hope this will help you towards finding google maps a little less "annoying" '-)
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Google Maps: </title>
<style>
#map{
width:100%;
height:80vh;
float:none;
margin:auto;
}
</style>
<script>
let map;
let markers=[];
let infoWindow;
let locations = [
{
name: 'one',
tour: 'gaudi',
latlng: { lat: 41.403706, lng: 2.173504 },
content: 'google',
},
{
name: 'one',
tour: 'gaudi',
latlng: { lat: 41.4145, lng: 2.1527 },
content: 'maps',
},
{
name: 'two',
tour: 'gothic',
latlng: { lat: 41.3839, lng: 2.1821 },
content: 'are'
},
{
name: 'two',
tour: 'gothic',
latlng: { lat: 41.3840, lng: 2.1762 },
content: 'annoying'
}
];
function initMap(){
let options = {
center: new google.maps.LatLng(41.3851, 2.1734),
zoom: 12
};
map = new google.maps.Map( document.getElementById('map'), options );
infoWindow = new google.maps.InfoWindow();
const addmarker=function(args){
let mkr=new google.maps.Marker({
position: args.latlng,
map: map
});
if( args.hasOwnProperty('icon') ) mkr.setIcon( args.icon );
if( args.hasOwnProperty('name') ) mkr.name=args.name;
if( args.hasOwnProperty('content') ) mkr.content=args.content;
google.maps.event.addListener( mkr, 'click', clickhandler );
return mkr;
};
const clickhandler=function(e){
infoWindow.open( map, this );
infoWindow.setContent( this.content );
};
const clearmarkers=function(){
markers.forEach( mkr=>{
mkr.setMap( null );
});
};
Array.prototype.slice.call( document.querySelectorAll('input[type="radio"][name="tour"]') ).forEach(function(input){
input.addEventListener('click', function(e){
if( this.value ){
/* clear any markers added to the map already */
clearmarkers();
/* only show those that qualify based upon selected tour */
locations.forEach( obj=>{
if( obj.tour==this.value ) markers.push( addmarker.call( this, obj ) );
});
}
});
});
}
</script>
<script async defer src='//maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap'></script>
</head>
<body>
<form>
<!--
if you use `radio` buttons instead of checkboxes then you ensure
that only 1 tour type can be selected at once.
You may note that there is also a hidden field with the same
name before the radio buttons - not strictly necessary in this
case but is a useful trick in some circumstances.
-->
<section>
<div class='container'>
<h2>Choose your tour:</h2>
<input type='hidden' name='tour' value=false />
<div class='container'>
<div class='form-check-inline'>
<label class='form-check-label'>
<input name='tour' value='gaudi' type='radio' class='form-check-input' />Gaudi Tour
</label>
</div>
<div class='form-check-inline'>
<label class='form-check-label'>
<input name='tour' value='gothic' type='radio' class='form-check-input' />Gothic Tour
</label>
</div>
</div>
<!--The Map-->
<div class='container'>
<div id='map'></div>
</div>
</div>
</section>
</form>
</body>
</html>

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.

AngularJS, NgMap and GoogleMaps Api (infowindow function error)

I'm going to initalize infowindows (for google map markers) through angular controller (i'm using ng-map module)
NgMap.getMap().then (map) ->
$scope.map = map
for marker in markers
latLng = new (google.maps.LatLng)(marker.latitude, marker.longitude)
#initialize infoWindows through google map api, not ng-map module
contentString = 'is an example string'
infoWindow = new (google.maps.InfoWindow)(content: contentString)
$scope.dynMarkers.push new (google.maps.Marker)(position: latLng)
marker.addListener 'click', ->
infoWindow.open map, marker
$scope.markerClusterer = new MarkerClusterer(map,$scope.dynMarkers, {})
I have an error in console:
marker.addListener is not a function
I can't use an ng-map 'infowindow' DOM element in my view.
What's wrong?
marker object needs to be of google.maps.Marker type, try to replace:
$scope.dynMarkers.push new (google.maps.Marker)(position: latLng)
marker.addListener 'click', ->
infoWindow.open map, marker
with
markerObject = new (google.maps.Marker)(position: latLng) #<-Marker object
$scope.dynMarkers.push markerObject
markerObject.addListener 'click', ->
infoWindow.open map, markerObject
Example
angular.module('mapApp', ['ngMap'])
.controller('mapController', function ($scope, NgMap) {
NgMap.getMap().then(function (map) {
$scope.map = map;
$scope.dynMarkers = [];
$scope.markers.forEach(function (marker) {
var latLng = new google.maps.LatLng(marker.latitude, marker.longitude);
var contentString = 'is an example string'
var infoWindow = new (google.maps.InfoWindow)({ content: contentString });
var dynMarker = new google.maps.Marker({ position: latLng });
$scope.dynMarkers.push(dynMarker);
google.maps.event.addListener(dynMarker, 'click', function () {
infoWindow.open(map,dynMarker);
});
});
var mcOptions = { imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' };
$scope.markerClusterer = new MarkerClusterer(map, $scope.dynMarkers, mcOptions)
});
$scope.markers = [
{ id: 1, name: 'Oslo', latitude: 59.923043, longitude: 10.752839 },
{ id: 2, name: 'Stockholm', latitude: 59.339025, longitude: 18.065818 },
{ id: 3, name: 'Copenhagen', latitude: 55.675507, longitude: 12.574227 },
{ id: 4, name: 'Berlin', latitude: 52.521248, longitude: 13.399038 },
{ id: 5, name: 'Paris', latitude: 48.856127, longitude: 2.346525 }
];
});
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
<div ng-app="mapApp" ng-controller="mapController">
<ng-map default-style="true" zoom="3" center="59.339025, 18.065818">
</ng-map>
</div>

create a line between markers using ngmap

I am using ngmap and angular js to show a set of markers in a map without problem. I need paint a line that join these markers.
My code:
In view:
<map center="{{markers[0].lat}},{{markers[0].lng}}" zoom="12">
<marker ng-repeat="pos in markers" position="{{pos.lat}}, {{pos.lng}}"></marker>
</map>
in my controller:
var app = angular.module('Items', ['ngMap'])
app.controller('CICtrl', function($scope){
$scope.markers = [{id:1, lat:37.772323, lng: -122.214897}, {id:2, lat:21.291982, lng: -157.821856}, {id:3, lat:-27.46758, lng: 153.027892}];
});
For that purpose you could utilize shape directive, for example:
<shape name="polyline" path="{{path}}" geodesic="true" stroke-color="#FF0000" stroke-opacity="1.0" stroke-weight="2"></shape>
where path property is initialized from markers like this:
$scope.path = $scope.markers.map(function(marker){
return [marker.lat,marker.lng];
});
Working example
var app = angular.module('appMaps', ['ngMap']);
app.controller('mainCtrl', function ($scope) {
$scope.markers = [{ id: 1, lat: 37.772323, lng: -122.214897 }, { id: 2, lat: 21.291982, lng: -157.821856 }, { id: 3, lat: -27.46758, lng: 153.027892 }];
$scope.path = $scope.markers.map(function(marker){
return [marker.lat,marker.lng];
});
});
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=weather,visualization,panoramio"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div id="map_canvas" ng-app="appMaps" ng-controller="mainCtrl" >
<map center="{{markers[0].lat}},{{markers[0].lng}}" zoom="5">
<marker ng-repeat="pos in markers" position="{{pos.lat}}, {{pos.lng}}"></marker>
<shape name="polyline" path="{{path}}" geodesic="true" stroke-color="#FF0000" stroke-opacity="1.0" stroke-weight="2">
</shape>
</map>
</div>
Plunker
For those who are looking to show driving directions between markers and customize the appearance of the line between each marker:
Working Example:
In your controller:
$scope.directions = [
{
origin:"Salt Lake City, Utah",
destination:"West Valley City, Utah",
panelName:"p1",
renderingOptions: {
polylineOptions: {
strokeColor: 'red'
}
},
wayPoints: [
{
location: {lat:40.6812675, lng: -111.9622787},
stopover: true
},
{
location: {lat:40.6812675, lng: -110.9622787},
stopover: true
},
]
},
{
origin:"West Valley City, Utah",
destination:"West Jordan, Utah",
panelName:"p1",
renderingOptions: {
polylineOptions: {
strokeColor: 'blue'
}
},
wayPoints: [
{
location: {lat:40.6812675, lng: -111.9622787},
stopover: true
},
{
location: {lat:40.6812675, lng: -109.9622787},
stopover: true
},
]
},
{
origin:"West Jordan, Utah",
destination:"Salt Lake City, Utah",
panelName:"p2",
renderingOptions: {
polylineOptions: {
strokeColor: 'green'
}
},
wayPoints: [
{
location: {lat:40.6812675, lng: -111.9622787},
stopover: true
},
{
location: {lat:40.6812675, lng: -108.9622787},
stopover: true
},
]
}
];
HTML:
Pass an object of the form:
renderingOptions: {polylineOptions: {strokeColor: 'red'}}
into the options attribute of the <directions> element
<div style="width: 100%; float:left; height:70%" >
<ng-map zoom="3" center="current-location" default-style="false" style="height: 450px; display:block; ">
<directions ng-repeat="dir in directions"
draggable="true"
options="{{dir.renderingOptions}}"
travel-mode="DRIVING"
waypoints="{{dir.wayPoints}}"
panel="{{dir.panelName}}"
origin="{{dir.origin}}"
destination="{{dir.destination}}">
</directions>
</ng-map>
</div>

Categories