Change marker text with button on Leaflet map - javascript

I have a map with markers, generated by a json file, that contain a text with numeric value. For markers generation I use the Beaufify Markers Plugin.
This is a part of code that I'm using
var map = L.map('mapid').setView([43.08, 12.34], 9);
for ( var i=0; i < markers.length; ++i ) {
options = {
isAlphaNumericIcon: true,
text: markers[i].temperatura,
iconSize: [28, 28],
borderColor: markers[i].color,
backgroundColor: markers[i].color,
innerIconAnchor: [0, 4],
textColor: '#000;'
};
var popup = L.popup({
pane: 'fixed',
className: 'popup-fixed',
autoPan: false,
}).setContent('my html code');
L.marker( [markers[i].lat, markers[i].lng], {
icon: L.BeautifyIcon.icon(options),
virtual: true
})
.bindPopup(popup)
.addTo( map );
}
I would like the best and cleanest way, to change the variable text on options ('markers[i].temperatura'), with an onclick action on a button.

To update marker icon text:
1) save the list of markers into global variable, for example:
var markerObjects = [];
for (var i=0; i < markers.length; ++i ) {
//...
var markerObject = L.marker( [markers[i].lat, markers[i].lng], {
icon: L.BeautifyIcon.icon(options),
virtual: true
})
.bindPopup(popup)
.addTo( map );
markerObjects.push(markerObject);
}
2) once the button is clicked, update marker icon via Marker.setIcon method:
btn.onclick = () => {
const selectedIndex = ...; //get the selected index of marker
const selectedMarker = markerObjects[selectedIndex];
let iconOptions = selectedMarker.options.icon.options; //get existing icon properties
iconOptions.text = txtName.value; //update icon property
selectedMarker.setIcon(L.BeautifyIcon.icon(iconOptions)); //update marker icon
};
Demo
const map = L.map("map").setView([53.339025, 18.065818], 4);
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
attribution:
'© OpenStreetMap contributors'
}).addTo(map);
const locations = [
{
name: "Oslo",
lat: 59.923043,
lng: 10.752839
},
{
name: "Stockholm",
lat: 59.339025,
lng: 18.065818
},
{
name: "Copenhagen",
lat: 55.675507,
lng: 12.574227
},
{
name: "Berlin",
lat: 52.521248,
lng: 13.399038
},
{
name: "Paris",
lat: 48.856127,
lng: 2.346525
}
];
const markers = locations.map(location => {
let options = {
isAlphaNumericIcon: true,
text: location.name,
iconSize: [98, 28],
textColor: "#000;"
};
let popup = L.popup({
className: "popup-fixed",
autoPan: false
}).setContent(location.name);
return L.marker([location.lat, location.lng], {
icon: L.BeautifyIcon.icon(options),
virtual: true
})
.bindPopup(popup)
.addTo(map);
});
initControl();
function initControl() {
let selectLocations = document.getElementById("selectLocations");
let idx = 0;
for (const marker of markers) {
const option = document.createElement("option");
option.value = idx;
option.text = marker.options.icon.options.text;
selectLocations.appendChild(option);
idx++;
}
let txtName = document.getElementById("txtName");
txtName.value = locations[selectLocations.selectedIndex].name;
selectLocations.onchange = e => {
txtName.value = markers[e.target.value].options.icon.options.text;
};
let btnUpdate = document.getElementById("btnUpdate");
btnUpdate.onclick = () => {
const selectedIndex = selectLocations.selectedIndex;
const selectedMarker = markers[selectedIndex];
let iconOptions = selectedMarker.options.icon.options; //get existing icon properties
iconOptions.text = txtName.value; //update text property
selectedMarker.setIcon(L.BeautifyIcon.icon(iconOptions)); //set icon
};
}
<link
rel="stylesheet"
href="https://unpkg.com/leaflet#1.3.4/dist/leaflet.css"
/>
<link rel="stylesheet" href="style.css" />
<script src="https://unpkg.com/leaflet#1.3.4/dist/leaflet.js"></script>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"
/>
<link
rel="stylesheet"
href="https://marslan390.github.io/BeautifyMarker/leaflet-beautify-marker-icon.css"
/>
<script src="https://marslan390.github.io/BeautifyMarker/leaflet-beautify-marker-icon.js"></script>
<select id="selectLocations">
</select>
<input id="txtName" type="text"/>
<button id="btnUpdate">Update</button>
<div id="map" style="height:410px; width:570px;"></div>

Related

Is there a way to open a popup input text after a polygon is created in leaflet?

I'm trying to make a web app that uses leaflet to display a map, users should be able to draw and edit polygons over the map and they should have the ability to name each polygon they create.
I want to open a popup when a polygon is created that asks for a name and then set it to a property in a geojson feature.
I tried to follow this example Leaflet popup form but I couldn't get it to work with the leaflet draw created event.
Here's what I got.
// Map center
var center = [-32.692825, -62.104689];
// Map creation
var map = L.map('map').setView(center, 14);
// Map tile layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Initialise the FeatureGroup to store editable layers
var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);
// Draw plugin options
var drawPluginOptions = {
position: 'topleft',
draw: {
polygon: {
allowIntersection: false, // Restricts shapes to simple polygons
drawError: {
color: '#e1e100', // Color the shape will turn when intersects
message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
},
shapeOptions: {
color: '#97009c'
}
},
// disable toolbar item by setting it to false
polyline: false,
circle: false, // Turns off this drawing tool
rectangle: false,
marker: false,
},
edit: {
featureGroup: editableLayers,
polygon: {
allowIntersection: false
} //REQUIRED!!
}
};
// Initialise the draw control and pass it the FeatureGroup of editable layers
var drawControl = new L.Control.Draw(drawPluginOptions);
map.addControl(drawControl);
var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);
// draw created event handler
function polygonCreateHandler(e) {
var type = e.layerType;
var layer = e.layer;
if (type != 'polygon') {
alert("ESTO NO ES UN POLIGONO");
return;
}
editableLayers.addLayer(layer);
}
// draw created event
map.on('draw:created', function(e) {
polygonCreateHandler(e);
});
//Ignore this
/*jshint multistr: true */
var template = '<form id="popup-form">\
<label for="input-speed">New speed:</label>\
<input id="input-speed" class="popup-input" type="number" />\
<button id="button-submit" type="button">Save Changes</button>\
</form>';
/*
** fetch geojson example
let geojson_url = "https://raw.githubusercontent.com/delineas/leaflet-flyto-webpack-bulma/master/src/data/arboles_singulares_en_espacios_naturales.geojson"
fetch(
geojson_url
).then(
res => res.json()
).then(
data => {
let geojsonlayer = L.geoJson(data, {
onEachFeature: function(feature, layer) {
layer.bindPopup(feature.properties['arbol_nombre'])
layer.setIcon(treeMarker)
}
}).addTo(map)
map.fitBounds(geojsonlayer.getBounds())
}
)
** layer polygon example
var geojson_msjz_polygon = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": { "name": "Test Distrito electoral"},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-62.103266716003425,
-32.687209099455636
],
[
-62.13047504425048,
-32.68211618935444
],
[
-62.133564949035645,
-32.693746380985395
],
[
-62.106142044067376,
-32.698838627713116
],
[
-62.103266716003425,
-32.687209099455636
]
]
]
}
}
]
};
let geojsonlayer = L.geoJson(geojson_msjz_polygon, {
onEachFeature: function(feature, layer) {
let text = L.tooltip({
permanent: true,
direction: 'center',
className: 'text'
})
.setContent(feature.properties.name)
.setLatLng(layer.getBounds().getCenter());
text.addTo(map);
}
}).addTo(map);
map.fitBounds(geojsonlayer.getBounds())
*/
#map {
height: 98vh;
width: 100hw;
}
body {
margin: 0;
}
html,
body,
#leaflet {
height: 100%;
}
.popup-table {
width: 100%;
}
.popup-table-row {
background-color: grey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.css" rel="stylesheet" />
<div id="map"></div>
Just bind a popup on the created layer and open it once it is created
function polygonCreateHandler(e) {
var type = e.layerType;
var layer = e.layer;
if (type != 'polygon') {
alert("ESTO NO ES UN POLIGONO");
return;
}
editableLayers.addLayer(layer);
layer.bindPopup(template).openPopup(); // here create and open the popup with your form
}
// Map center
var center = [-32.692825, -62.104689];
// Map creation
var map = L.map('map').setView(center, 14);
// Map tile layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Initialise the FeatureGroup to store editable layers
var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);
// Draw plugin options
var drawPluginOptions = {
position: 'topleft',
draw: {
polygon: {
allowIntersection: false, // Restricts shapes to simple polygons
drawError: {
color: '#e1e100', // Color the shape will turn when intersects
message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
},
shapeOptions: {
color: '#97009c'
}
},
// disable toolbar item by setting it to false
polyline: false,
circle: false, // Turns off this drawing tool
rectangle: false,
marker: false,
},
edit: {
featureGroup: editableLayers,
polygon: {
allowIntersection: false
} //REQUIRED!!
}
};
// Initialise the draw control and pass it the FeatureGroup of editable layers
var drawControl = new L.Control.Draw(drawPluginOptions);
map.addControl(drawControl);
var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);
var template = '<form id="popup-form">\
<label for="input-speed">New speed:</label>\
<input id="input-speed" class="popup-input" type="number" />\
<button id="button-submit" type="button">Save Changes</button>\
</form>';
var createdPolygonTemplate = '<form id="popup-form">\
<label for="input-speed">Name:</label>\
<input id="name" type="text" />\
</form>';
// draw created event handler
function polygonCreateHandler(e) {
var type = e.layerType;
var layer = e.layer;
if (type != 'polygon') {
alert("ESTO NO ES UN POLIGONO");
return;
}
editableLayers.addLayer(layer);
layer.bindPopup(createdPolygonTemplate).openPopup()
}
// draw created event
map.on('draw:created', function(e) {
polygonCreateHandler(e);
});
//Ignore this
/*jshint multistr: true */
/*
** fetch geojson example
let geojson_url = "https://raw.githubusercontent.com/delineas/leaflet-flyto-webpack-bulma/master/src/data/arboles_singulares_en_espacios_naturales.geojson"
fetch(
geojson_url
).then(
res => res.json()
).then(
data => {
let geojsonlayer = L.geoJson(data, {
onEachFeature: function(feature, layer) {
layer.bindPopup(feature.properties['arbol_nombre'])
layer.setIcon(treeMarker)
}
}).addTo(map)
map.fitBounds(geojsonlayer.getBounds())
}
)
** layer polygon example
var geojson_msjz_polygon = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": { "name": "Test Distrito electoral"},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-62.103266716003425,
-32.687209099455636
],
[
-62.13047504425048,
-32.68211618935444
],
[
-62.133564949035645,
-32.693746380985395
],
[
-62.106142044067376,
-32.698838627713116
],
[
-62.103266716003425,
-32.687209099455636
]
]
]
}
}
]
};
let geojsonlayer = L.geoJson(geojson_msjz_polygon, {
onEachFeature: function(feature, layer) {
let text = L.tooltip({
permanent: true,
direction: 'center',
className: 'text'
})
.setContent(feature.properties.name)
.setLatLng(layer.getBounds().getCenter());
text.addTo(map);
}
}).addTo(map);
map.fitBounds(geojsonlayer.getBounds())
*/
#map {
height: 98vh;
width: 100hw;
}
body {
margin: 0;
}
html,
body,
#leaflet {
height: 100%;
}
.popup-table {
width: 100%;
}
.popup-table-row {
background-color: grey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.css" rel="stylesheet" />
<div id="map"></div>
Yes, the next is a code example:
<div id="map" style="width: 100%; height: 500px;"></div>
<script>
var map = L.map('map', {
center: [18.9, -71.2],
zoom: 8,
});
const tileURL = 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png'
L.tileLayer(tileURL).addTo(map);
drawnItems = L.featureGroup().addTo(map);
var drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems,
},
});
var getName = function(layer) {
var name = prompt('please, enter the geometry name', 'geometry name');
return name;
};
map.addControl(drawControl);
map.on(L.Draw.Event.CREATED, function(e) {
var layer = e.layer;
var name = getName(layer);
if (name == 'geometry name') {
layer.bindPopup('-- no name provided --');
} else if (name == '') {
layer.bindPopup('-- no name provided --');
} else {
layer.bindTooltip(name, {permanent:true, direction:'top'})
};
drawnItems.addLayer(layer);
});
</script>
And this is the result:
enter image description here
Do not forget the cdn's:
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw-src.css" integrity="sha512-vJfMKRRm4c4UupyPwGUZI8U651mSzbmmPgR3sdE3LcwBPsdGeARvUM5EcSTg34DK8YIRiIo+oJwNfZPMKEQyug==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js" integrity="sha512-ozq8xQKq6urvuU6jNgkfqAmT7jKN2XumbrX1JiB3TnF7tI48DPI4Gy1GXKD/V3EExgAs1V+pRO7vwtS1LHg0Gw==" crossorigin="anonymous"></script>

Add Markers from Object Array

Pardon me if this question is silly. I've got an array in an object that I need to add to a map. I know it needs a for loop (likely in the object) to access the additional properties in the array. Only the last indexed value is shown on the map when I execute the code. Thanks in advance for your help.
var map = L.map('map', {
center: [29.940125, -90.08346],
zoom: 13
});
// Get basemap URL from Leaflet Providers
var basemap_url = 'http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png'
// Get basemap attributes from Leaflet Providers
var basemap_attributes = {
maxZoom: 18,
attribution: '© OpenStreetMap'
};
// requests some map tiles
var tiles = L.tileLayer(basemap_url, basemap_attributes);
map.addLayer(tiles);
var i = 0
// declare hotspots object
var hotspots = [{
name: "Mariza",
properties: {
description: "Italian-inspired fare dished out in an airy loft building with an industrial-chic vibe.",
coordinates: [29.9629337, -90.0501008],
url: 'http://marizaneworleans.com/',
phone: '(504) 598-5700',
icon: 'svgs/restaurant-15.svg'
},
name: "Tipitina's",
properties: {
description: "Founded as a clubhouse for Professor Longhair, Tip's has played host to NOLA music legends since opening its doors in 1977.",
coordinates: [29.917284, -90.042986],
url: 'https://www.tipitinas.com//',
phone: '(504) 895-8477',
icon: 'svgs/music-15.svg'
},
name: "Euclid Records New Orleans",
properties: {
description: "We’re 4000 square feet of boss vinyl both new and used.",
coordinates: [29.962066, -90.042970],
url: 'https://euclidnola.com/',
phone: '(504) 947-4348',
icon: 'svgs/music-11.svg'
}
}];
// declare variable for accessing object properties
var props = hotspots[i].properties;
var icon = L.icon({
iconUrl: props.icon,
iconSize: [40, 40],
popupAnchor: [0, -22],
className: "icon"
});
var popup = `<h3>${hotspots[i].name}</h3>
<p>${props.description}</p>
<p><b>website</b>: <a href='${props.url}'>${props.url}</a></p>
<p><b>phone</b>: ${props.phone}</p>`
var marker = L.marker(hotspots[i].properties.coordinates, {
icon: icon
})
.addTo(map)
.bindPopup(popup);
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
You need a for loop in order to iterate over all the hotspots and add them to the map:
var map = L.map('map', {
center: [29.940125, -90.08346],
zoom: 13
});
// Get basemap URL from Leaflet Providers
var basemap_url = 'http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png'
// Get basemap attributes from Leaflet Providers
var basemap_attributes = {
maxZoom: 18,
attribution: '© OpenStreetMap'
};
// requests some map tiles
var tiles = L.tileLayer(basemap_url, basemap_attributes);
map.addLayer(tiles);
// declare hotspots object
var hotspots = [{
name: "Mariza",
properties: {
description: "Italian-inspired fare dished out in an airy loft building with an industrial-chic vibe.",
coordinates: [29.9629337, -90.0501008],
url: 'http://marizaneworleans.com/',
phone: '(504) 598-5700',
icon: 'svgs/restaurant-15.svg'
},
name: "Tipitina's",
properties: {
description: "Founded as a clubhouse for Professor Longhair, Tip's has played host to NOLA music legends since opening its doors in 1977.",
coordinates: [29.917284, -90.042986],
url: 'https://www.tipitinas.com//',
phone: '(504) 895-8477',
icon: 'svgs/music-15.svg'
},
name: "Euclid Records New Orleans",
properties: {
description: "We’re 4000 square feet of boss vinyl both new and used.",
coordinates: [29.962066, -90.042970],
url: 'https://euclidnola.com/',
phone: '(504) 947-4348',
icon: 'svgs/music-11.svg'
}
}];
//// LOOP GOES HERE: ////
for ( let i = 0; i < hotspots.length; i++ ){
// declare variable for accessing object properties
let props = hotspots[i].properties;
let icon = L.icon({
iconUrl: props.icon,
iconSize: [40, 40],
popupAnchor: [0, -22],
className: "icon"
});
let popup = `<h3>${hotspots[i].name}</h3>
<p>${props.description}</p>
<p><b>website</b>: <a href='${props.url}'>${props.url}</a></p>
<p><b>phone</b>: ${props.phone}</p>`
let marker = L.marker(hotspots[i].properties.coordinates, {
icon: icon
})
.addTo(map)
.bindPopup(popup);
marker.on("mouseover", function() {
this.openPopup();
});
marker.on("mouseout", function() {
this.closePopup();
});
}
There isn't a loop anywhere, so i is always going to be 0
Put it in a for-loop?
for(var i = 0; i < hotspots.length; i++) {
var props = hotspots[i].properties;
var icon = L.icon({
iconUrl: props.icon,
iconSize: [40, 40],
popupAnchor: [0, -22],
className: "icon"
});
var popup = `<h3>${hotspots[i].name}</h3>
<p>${props.description}</p>
<p><b>website</b>: <a href='${props.url}'>${props.url}</a></p>
<p><b>phone</b>: ${props.phone}</p>`
var marker = L.marker(hotspots[i].properties.coordinates, {
icon: icon
})
.addTo(map)
.bindPopup(popup);
}

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>

Vue google maps infowindow custom buttons not working

Hey vue-ers!
I am using vue2-google-maps with all its glories and so far I have managed a lot except for custom buttons within an info-window. So far I can click on a marker and it shows the related custom info-window with the right info. The only thing I am missing now is making those buttons work. For example the close button: I can click on it and it speaks to the component method but does not close it. The close button works the same as selecting the markers, but at the same time it's not? The values update to false, but not being updated in the maps, while I select a marker it updates like a charm. So I am quite stuck here and fairly confused, any help, ideas and tips are appreciated!
Here is my code for reference:
Template
<gmap-map
id="map"
:center="center"
:zoom=13
:options="{
disableDefaultUI: true,
zoomControl: true,
clickableIcons: true,
}">
<gmap-marker
v-for="(location, index) in locations"
:position="{lat: location.latitude, lng: location.longitude}"
:icon="location.icon"
:zone="location.zone"
:jettyNumber="location.jettyNumber"
:selected="location.selected"
:zIndex="location.zIndex"
#mouseover="mouseOverMarker(index)"
#mouseout="mouseOutMarker(index)"
#click="openInfoWindow(index)"
:label="{
text: location.jettyNumber.toString(),
color: '#fff',
fontSize: '13px',
fontFamily: 'din_round_otbold'
}">
<gmap-info-window
:opened="location.infoBoxOpen">
<div class="infoWindow" style="width: 300px;">
<div id="dock-zone" :class="getZoneClass(location.zone)">{{ getZoneClassText(location.zone) }}</div>
<h2 id="infoWindow-location">{{ location.name }}</h2>
<div id="close-btn" #click="closeInfoWindow(index)"></div>
<a class="btn btn-primary google-maps-infowindow-button">Kies als <b>{{ inputData.label }}</b></a>
<span></span>
</div>
</gmap-info-window>
</gmap-marker>
</gmap-map>
Component Script
import $ from "jquery";
export default {
data: function(){
return {
icons: {
stopInner: {
icon: process.env.VUE_APP_PUBLIC_URL + '/Assets/images/pinpoint_on_map_inner.svg'
},
stopOuter: {
icon: process.env.VUE_APP_PUBLIC_URL + '/Assets/images/pinpoint_on_map_outer.svg'
},
stopOutside: {
icon: process.env.VUE_APP_PUBLIC_URL + '/Assets/images/pinpoint_on_map_outside.svg'
},
stopSelected: {
icon: process.env.VUE_APP_PUBLIC_URL + '/Assets/images/pinpoint_on_map_active.svg'
}
},
locations: [],
center: {lat: 51.9004, lng: 4.46849},
inputData: {}
};
},
methods: {
initMap(locations, inputData) {
// Set maps specific data
for(var i = 0; i < locations.length; i++) {
locations[i].selected = false;
locations[i].infoBoxOpen = false;
locations[i].zIndex = locations[i].jettyNumber;
locations[i].icon = this.getIcon(locations[i].zone);
}
this.inputData = inputData;
this.locations = locations;
},
getIcon(zone) {
switch(zone){
case "centre":
return this.icons.stopInner.icon;
break;
case null:
return this.icons.stopOutside.icon;
break;
default:
return this.icons.stopOuter.icon;
break;
}
},
getZoneClass(zone) {
switch(zone){
case "centre":
return "centrum";
break;
case null:
return "buiten";
break;
default:
return "";
break;
}
},
getZoneClassText(zone) {
if(zone){
return zone;
}else{
return "outside";
}
},
// TODO: Not really setting the zindex, need to dig deeper
mouseOverMarker(locationIndex) {
this.locations[locationIndex].zIndex = 99998;
},
mouseOutMarker(locationIndex) {
this.locations[locationIndex].zIndex = this.locations[locationIndex].jettyNumber;
},
openInfoWindow(location){
this.center = {lat: location.latitude, lng: location.longitude};
this.setSelectedLocation(location);
},
setSelectedLocation(selectedLocationIndex){
this.unselectLocations();
// Set selected
this.locations[selectedLocationIndex].zIndex = 88888;
this.locations[selectedLocationIndex].icon = this.icons.stopSelected.icon;
this.locations[selectedLocationIndex].selected = true;
this.locations[selectedLocationIndex].infoBoxOpen = true;
this.center = {
lat: this.locations[selectedLocationIndex].latitude,
lng: this.locations[selectedLocationIndex].longitude
};
this.alterDefaultInfoWindowStyle();
},
unselectLocations() {
for(var i = 0; i < this.locations.length; i++) {
this.locations[i].icon = this.getIcon(this.locations[i].zone);
this.locations[i].zIndex = this.locations[i].jettyNumber;
this.locations[i].selected = false;
this.locations[i].infoBoxOpen = false;
}
},
alterDefaultInfoWindowStyle() {
// TODO: a very nasty fix, need a better way to handle this
setTimeout(function(){
var iwOuter = $('.gm-style-iw');
iwOuter.parent().parent().css({ top: '20px' });
iwOuter.css({ top: '0px' });
iwOuter.css({ left: '26px' });
var iwBackground = iwOuter.prev();
iwBackground.css({ 'display': 'none' });
var iwCloseBtn = iwOuter.next();
iwCloseBtn.hide();
iwOuter.children().eq(0).css({ overflow: 'visible' });
}, 10);
},
closeInfoWindow(selectedLocationIndex) {
this.unselectLocations();
},
closeMaps() {
this.$emit('close-maps')
}
}
}
Since the appearance of info window is determined by locations[index].infoBoxOpen the standard close handler (#closeclick) needs to be implemented as well, like this:
<gmap-info-window
:opened="location.infoBoxOpen"
#closeclick="location.infoBoxOpen=false">
...
</gmap-info-window>
I would also propose to modify the way how info window is created. Instead of creating info window per marker, to create only a single instance of info window. In addition to performance benefits it would make it more clear to manage info window state, for example:
<gmap-map :center="center" :zoom="zoom" ref="map">
<gmap-marker
:key="index"
v-for="(location,index) in locations"
:position="{lat: location.lat,lng:location.lng}"
:clickable="true"
#click="openInfoWindow(location)"
/>
<gmap-info-window v-if="selectedLocation !== null" :position="{lat: selectedLocation.lat,lng:selectedLocation.lng}" :opened="infoBoxOpen" #closeclick="closeInfoWindow()">
<div class="infoWindow">
<h2 id="infoWindow-location">{{ selectedLocation.name }}</h2>
<button #click="closeInfoWindow()">Close</button>
</div>
</gmap-info-window>
</gmap-map>
export default {
data: () => ({
zoom: 5,
center: { lat: 59.339025, lng: 18.065818 },
selectedLocation: null,
infoBoxOpen: false,
locations: [
{
Id: 1,
name: "Oslo",
lat: 59.923043,
lng: 10.752839
},
{
Id: 2,
name: "Stockholm",
lat: 59.339025,
lng: 18.065818
},
{
Id: 3,
name: "Copenhagen",
lat: 55.675507,
lng: 12.574227
},
{
Id: 4,
name: "Berlin",
lat: 52.521248,
lng: 13.399038
},
{
Id: 5,
name: "Paris",
lat: 48.856127,
lng: 2.346525
}
]
}),
methods: {
openInfoWindow(location) {
this.selectedLocation = location
this.infoBoxOpen = true;
},
closeInfoWindow() {
this.infoBoxOpen = false;
}
}
};
Here is a demo that demonstrates how to manage info window per multiple markers

Adding setVisible() to markers created in a map

I am creating a neighbourhood map using google maps API.I have added some locations and created markers. I want to add a search filter feature, such that the user can search those locations by their name. It should include a text input field or drop-down menu that filters the map markers and list items to locations matching the text input or selection.
The list items filtering works fine but the markers(locations) are not filtered.
So I want to ask how can I use setVisible() property to hide and display the markers in my code.
This is the filter module:
function viewModel(markers) {
var self = this;
self.filter = ko.observable(''); // this is for the search box
self.items = ko.observableArray(locations);
self.filteredItems = ko.computed(function() {
var filter = self.filter().toLowerCase();
if (!filter) {
return self.items();
} else {
return ko.utils.arrayFilter(self.items(), function(id) {
return stringStartsWith(id.title.toLowerCase(), filter);
});
}
});
This is the full code of my .js file.
var map;
var locations = [
{title: 'The Red Fort', location: {lat: 28.6562, lng: 77.2410}},
{title: 'Humayun\'s Tomb', location: {lat: 28.5933, lng: 77.2507}},
{title: 'India Gate', location: {lat: 28.6129, lng: 77.2295}},
{title: 'Lotus Temple', location: {lat: 28.5535, lng: 77.2588}},
{title: 'Akshardham Temple', location: {lat: 28.6127, lng: 77.2773}},
{title: 'Lodhi Gardens', location: {lat: 28.5931, lng: 77.2179}},
{title: 'Raj Ghat', location: {lat: 28.6406, lng: 77.2495}},
{title: 'Jama Masjid', location: {lat: 28.6507, lng: 77.2334}},
{title: 'Gurudwara Bangla Sahib', location: {lat: 28.6264, lng:
77.2091}},
{title: 'Qutub Minar', location: {lat: 28.5244, lng: 77.1855}},
];
var center =[{lat : 28.5244, lng : 77.1855}];
var markers = []; // Creating a new blank array for all the listing markers.
var styles = [
{
featureType: 'water',
stylers: [
{ color: '#19a0d8' }
]
},{
featureType: 'administrative',
elementType: 'labels.text.stroke',
stylers: [
{ color: '#ffffff' },
{ weight: 6 }
]
},{
featureType: 'administrative',
elementType: 'labels.text.fill',
stylers: [
{ color: '#e85113' }
]
},{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [
{ color: '#efe9e4' },
{ lightness: -40 }
]
},{
featureType: 'transit.station',
stylers: [
{ weight: 9 },
{ hue: '#e85113' }
]
},{
featureType: 'road.highway',
elementType: 'labels.icon',
stylers: [
{ visibility: 'off' }
]
},{
featureType: 'water',
elementType: 'labels.text.stroke',
stylers: [
{ lightness: 100 }
]
},{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [
{ lightness: -100 }
]
},{
featureType: 'poi',
elementType: 'geometry',
stylers: [
{ visibility: 'on' },
{ color: '#f0e4d3' }
]
},{
featureType: 'road.highway',
elementType: 'geometry.fill',
stylers: [
{ color: '#efe9e4' },
{ lightness: -25 }
]
}
];
function initMap() {
// Constructor creates a new map
map = new google.maps.Map(document.getElementById('map'), {
center: center[0],
zoom: 13,
styles: styles,
mapTypeControl: false
});
var largeInfowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
var defaultIcon = makeMarkerIcon('0091ff'); // this is the default marker icon.
var highlightedIcon = makeMarkerIcon('FFFF24'); // this is the state of the marker when highlighted.
var activeIcon = makeMarkerIcon('0F0');
for (var i = 0; i < locations.length; i++) {
var position = locations[i].location; // Get the position from the location array.
var title = locations[i].title;
marker(locations);
}
// Create a marker per location, and put into markers array.
function marker(locations)
{var marker = new google.maps.Marker({
map: map,
position: position,
title: title,
animation: google.maps.Animation.DROP,
id: i,
});
locations[i].marker = marker; // we made marker a property of the locations and stored info of each marker
wikiLink(locations[i]);
markers.push(marker); // Push the marker to our array of markers.
// Create an onclick event to open an infowindow at each marker.
marker.addListener('click', function() {
populateInfoWindow(this, largeInfowindow);
this.setIcon(activeIcon);
});
bounds.extend(markers[i].position);
/*
marker.addListener('mouseover', function() {
this.setIcon(highlightedIcon);
});
*/
marker.addListener('mouseout', function() {
this.setIcon(defaultIcon);
});
}
// Extend the boundaries of the map for each marker
map.fitBounds(bounds);
function wikiLink(location) {
location.url = '';
var wikiUrl = 'https://en.wikipedia.org/w/api.php?action=opensearch&search=' + title + '&format=json&callback=wikiCallback';
//If you cant get a wiki request, throw an error message.
/*
var wikiError = setTimeout(function() {
location.url = 'Unable to find the request';
}, 8000);
*/
$.ajax({
url: wikiUrl,
dataType: "jsonp",
jsonp: "callback",
success: function(response) {
console.log(response);
var url = response[3][0];
console.log(url);
location.marker.wikiurl = url;
console.log(location.url);
//clearTimeout(wikiError);
}
})
.fail(function (jqXHR, textStatus, error) {
error = 'Unable to find the request';
alert("Post error: " + error);
});
}
}
// This function populates the infowindow when the marker is clicked. We'll only allow
// one infowindow which will open at the marker that is clicked, and populate based
// on that markers position.
function populateInfoWindow(marker, infowindow) {
// Check to make sure the infowindow is not already opened on this marker.
if (infowindow.marker != marker) {
infowindow.setContent(''); // Clearing the infowindow content to give the streetview time to load.
infowindow.marker = marker;
// Making sure the marker property is cleared if the infowindow is closed.
infowindow.addListener('closeclick', function() {
infowindow.marker = null;
});
// In case the status is OK, which means the pano was found, computing the position of the streetview image, then calculate the heading, then get a
// panorama from that and set the options
var getStreetView = function(data, status) {
if (status == google.maps.StreetViewStatus.OK) {
var nearStreetViewLocation = data.location.latLng;
var heading = google.maps.geometry.spherical.computeHeading(
nearStreetViewLocation, marker.position);
infowindow.setContent('<div>' + marker.title + '</div><hr><div id="pano"></div><div><a href=' + marker.wikiurl + '> Click here for more info </a></div>');
var panoramaOptions = {
position: nearStreetViewLocation,
pov: {
heading: heading,
pitch: 30
}
};
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), panoramaOptions);
} else {
infowindow.setContent('<div>' + marker.title + '</div><hr>' + '<div>No Street View Found</div>');
}
};
var streetViewService = new google.maps.StreetViewService();
var radius = 500;
// Use streetview service to get the closest streetview image within 50 meters of the markers position
streetViewService.getPanoramaByLocation(marker.position, radius, getStreetView);
infowindow.open(map, marker); // Open the infowindow on the correct marker.
}
}
// This function takes in a COLOR, and then creates a new marker icon of that color.
// The icon will be 21 px wide by 34 high, have an origin of 0, 0 and be anchored at 10, 34).
function makeMarkerIcon(markerColor) {
var markerImage = new google.maps.MarkerImage(
'http://chart.googleapis.com/chart?chst=d_map_spin&chld=1.15|0|'+ markerColor +
'|40|_|%E2%80%A2',
new google.maps.Size(21, 34),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34),
new google.maps.Size(21,34));
return markerImage;
}
function viewModel(markers) {
var self = this;
self.filter = ko.observable(''); // this is for the search box, takes value in it and searches for it in the array
self.items = ko.observableArray(locations); // we have made the array of locations into a ko.observableArray
self.filteredItems = ko.computed(function() {
var filter = self.filter().toLowerCase();
if (!filter) {
return self.items();
} else {
return ko.utils.arrayFilter(self.items(), function(id) {
return stringStartsWith(id.title.toLowerCase(), filter);
});
}
});
var stringStartsWith = function (string, startsWith) {
string = string || "";
if (startsWith.length > string.length)
return false;
return string.substring(0, startsWith.length) === startsWith;
};
// this should show the infowindow if any place on the list is clicked
this.showInfoWindow = function(place) {
google.maps.event.trigger(place.marker, 'click');
};
}
$(function(){
ko.applyBindings(new viewModel());
});
This is .html file
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Map of my favourite city - New Delhi</title>
<link href="css/map_styles.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/knockout-3.4.1.js"></script>
</head>
<body>
<div id="mySidenav" class="sidenav">
<span class="menu-title">List of places</span>
<input type="text" data-bind="textInput: filter" placeholder="Search from the list">
<ul class="" style="list-style-type: none;" data-bind="foreach: filteredItems">
<li>
<span data-bind="text: title, click: $parent.showInfoWindow"></span>
</li>
</ul>
×
</div>
<div id="main">
<h2>Famous places in New Delhi</h2>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Click here</span>
</div>
<div id="map"></div>
<div id="map-error" class="map-error"></div>
<script src="js/newmap.js"></script>
<script src="js/maperror.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCwUdUoC9ZiRbFC3et89fPK3tXIVO8D2sI&callback=initMap"
onerror="mapError()"></script>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>
Thanks for this question :) It was an interesting exercise. I'm not sure my answer will satisfy you, because it re-initializes the map every time a filter is done. I'm not sure how to get around that, because the viewModel and the initMap method are separate. But it does what you asked for.
Modified your initMap() method to take an array parameter, holding boolean values. If the array is not defined the markers' visibility are defaulted to true
Modified the viewModel, by creating an array to hold boolean values. The array is emptied every time the viewModel is called, and the markers are spliced to hold the original values only (One of the areas I'm sure you can improve on). Inside your ko.utils.arrayFilter() method, if returned value is true, I push a true value to the array as well. At the end of the array, I call the initMap() method again, with this array as input. Now only the locations which are filtered out as true in the search will be visible on re-initializing.
While applying the bindings I provided markers variable as input to the viewModel. (I think you had already intended to do this, but forgot).
Update:
Concerning the error you're getting in the comment, it's because I replaced your lines
<script src="js/newmap.js"></script>
<script src="js/maperror.js"></script>
with an empty <script> tag and placed the entire JS code in there. To avoid confusion, I'll remove all the snippets of code I had put above and show the entire file here:
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type='text/javascript' src='knockout-3.4.2.js'></script>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div id="mySidenav" class="sidenav">
<span class="menu-title">List of places</span>
<input type="text" data-bind="textInput: filter" placeholder="Search from the list">
<ul class="" style="list-style-type: none;" data-bind="foreach: filteredItems">
<li>
<span data-bind="text: title, click: $parent.showInfoWindow"></span>
</li>
</ul>
×
</div>
<div id="main">
<h2>Famous places in New Delhi</h2>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Click here</span>
</div>
<div id="map"></div>
<div id="map-error" class="map-error"></div>
<script>
var map;
var locations = [
{title: 'The Red Fort', location: {lat: 28.6562, lng: 77.2410}},
{title: 'Humayun\'s Tomb', location: {lat: 28.5933, lng: 77.2507}},
{title: 'India Gate', location: {lat: 28.6129, lng: 77.2295}},
{title: 'Lotus Temple', location: {lat: 28.5535, lng: 77.2588}},
{title: 'Akshardham Temple', location: {lat: 28.6127, lng: 77.2773}},
{title: 'Lodhi Gardens', location: {lat: 28.5931, lng: 77.2179}},
{title: 'Raj Ghat', location: {lat: 28.6406, lng: 77.2495}},
{title: 'Jama Masjid', location: {lat: 28.6507, lng: 77.2334}},
{title: 'Gurudwara Bangla Sahib', location: {lat: 28.6264, lng:
77.2091}},
{title: 'Qutub Minar', location: {lat: 28.5244, lng: 77.1855}},
];
var center = [{lat: 28.5244, lng: 77.1855}];
var markers = []; // Creating a new blank array for all the listing markers.
var styles = [
{
featureType: 'water',
stylers: [
{color: '#19a0d8'}
]
}, {
featureType: 'administrative',
elementType: 'labels.text.stroke',
stylers: [
{color: '#ffffff'},
{weight: 6}
]
}, {
featureType: 'administrative',
elementType: 'labels.text.fill',
stylers: [
{color: '#e85113'}
]
}, {
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [
{color: '#efe9e4'},
{lightness: -40}
]
}, {
featureType: 'transit.station',
stylers: [
{weight: 9},
{hue: '#e85113'}
]
}, {
featureType: 'road.highway',
elementType: 'labels.icon',
stylers: [
{visibility: 'off'}
]
}, {
featureType: 'water',
elementType: 'labels.text.stroke',
stylers: [
{lightness: 100}
]
}, {
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [
{lightness: -100}
]
}, {
featureType: 'poi',
elementType: 'geometry',
stylers: [
{visibility: 'on'},
{color: '#f0e4d3'}
]
}, {
featureType: 'road.highway',
elementType: 'geometry.fill',
stylers: [
{color: '#efe9e4'},
{lightness: -25}
]
}
];
function initMap(array) {
// Constructor creates a new map
map = new google.maps.Map(document.getElementById('map'), {
center: center[0],
zoom: 13,
styles: styles,
mapTypeControl: false
});
var largeInfowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
var defaultIcon = makeMarkerIcon('0091ff'); // this is the default marker icon.
var highlightedIcon = makeMarkerIcon('FFFF24'); // this is the state of the marker when highlighted.
var activeIcon = makeMarkerIcon('0F0');
for (var i = 0; i < locations.length; i++) {
var position = locations[i].location; // Get the position from the location array.
var title = locations[i].title;
marker(locations);
}
// Create a marker per location, and put into markers array.
function marker(locations)
{
var marker = new google.maps.Marker({
map: map,
position: position,
title: title,
animation: google.maps.Animation.DROP,
id: i,
visible: (array ? array[i] : true)
});
locations[i].marker = marker; // we made marker a property of the locations and stored info of each marker
wikiLink(locations[i]);
markers.push(marker); // Push the marker to our array of markers.
// Create an onclick event to open an infowindow at each marker.
marker.addListener('click', function () {
populateInfoWindow(this, largeInfowindow);
this.setIcon(activeIcon);
});
bounds.extend(markers[i].position);
/*
marker.addListener('mouseover', function() {
this.setIcon(highlightedIcon);
});
*/
marker.addListener('mouseout', function () {
this.setIcon(defaultIcon);
});
}
// Extend the boundaries of the map for each marker
map.fitBounds(bounds);
function wikiLink(location) {
location.url = '';
var wikiUrl = 'https://en.wikipedia.org/w/api.php?action=opensearch&search=' + title + '&format=json&callback=wikiCallback';
//If you cant get a wiki request, throw an error message.
/*
var wikiError = setTimeout(function() {
location.url = 'Unable to find the request';
}, 8000);
*/
$.ajax({
url: wikiUrl,
dataType: "jsonp",
jsonp: "callback",
success: function (response) {
console.log(response.length);
var url = response[3][0];
//console.log(url);
location.marker.wikiurl = url;
//console.log(location);
//clearTimeout(wikiError);
}
})
.fail(function (jqXHR, textStatus, error) {
error = 'Unable to find the request';
alert("Post error: " + error);
});
}
}
// This function populates the infowindow when the marker is clicked. We'll only allow
// one infowindow which will open at the marker that is clicked, and populate based
// on that markers position.
function populateInfoWindow(marker, infowindow) {
// Check to make sure the infowindow is not already opened on this marker.
if (infowindow.marker != marker) {
infowindow.setContent(''); // Clearing the infowindow content to give the streetview time to load.
infowindow.marker = marker;
// Making sure the marker property is cleared if the infowindow is closed.
infowindow.addListener('closeclick', function () {
infowindow.marker = null;
});
// In case the status is OK, which means the pano was found, computing the position of the streetview image, then calculate the heading, then get a
// panorama from that and set the options
var getStreetView = function (data, status) {
if (status == google.maps.StreetViewStatus.OK) {
var nearStreetViewLocation = data.location.latLng;
var heading = google.maps.geometry.spherical.computeHeading(
nearStreetViewLocation, marker.position);
infowindow.setContent('<div>' + marker.title + '</div><hr><div id="pano"></div><div><a href=' + marker.wikiurl + '> Click here for more info </a></div>');
var panoramaOptions = {
position: nearStreetViewLocation,
pov: {
heading: heading,
pitch: 30
}
};
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), panoramaOptions);
} else {
infowindow.setContent('<div>' + marker.title + '</div><hr>' + '<div>No Street View Found</div>');
}
};
var streetViewService = new google.maps.StreetViewService();
var radius = 500;
// Use streetview service to get the closest streetview image within 50 meters of the markers position
streetViewService.getPanoramaByLocation(marker.position, radius, getStreetView);
infowindow.open(map, marker); // Open the infowindow on the correct marker.
}
}
// This function takes in a COLOR, and then creates a new marker icon of that color.
// The icon will be 21 px wide by 34 high, have an origin of 0, 0 and be anchored at 10, 34).
function makeMarkerIcon(markerColor) {
var markerImage = new google.maps.MarkerImage(
'http://chart.googleapis.com/chart?chst=d_map_spin&chld=1.15|0|' + markerColor +
'|40|_|%E2%80%A2',
new google.maps.Size(21, 34),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34),
new google.maps.Size(21, 34));
return markerImage;
}
function viewModel(markers) {
var self = this;
self.filter = ko.observable(''); // this is for the search box, takes value in it and searches for it in the array
self.items = ko.observableArray(locations); // we have made the array of locations into a ko.observableArray
var arrayofMarkersForVisibility = [];
self.filteredItems = ko.computed(function () {
if (markers.length>10) markers.splice(10,10);
var filter = self.filter().toLowerCase();
if (!filter || filter =="") {
arrayofMarkersForVisibility = [];
for (var i in markers){
//markers[i].setVisible(true);
arrayofMarkersForVisibility.push(true);
}
initMap(arrayofMarkersForVisibility);
return self.items();
} else {
arrayofMarkersForVisibility = [];
for (var i in markers){
arrayofMarkersForVisibility.push(false);
//markers[i].setVisible(false);
}
return ko.utils.arrayFilter(self.items(), function (id) {
var somestring = stringStartsWith(id.title.toLowerCase(), filter);
if (somestring){
arrayofMarkersForVisibility[id.marker.id]=true;
//markers[i].setVisible(true);
}
if (id.marker.id ==markers.length-1) initMap(arrayofMarkersForVisibility);
return somestring;
});
}
});
var stringStartsWith = function (string, startsWith) {
string = string || "";
if (startsWith.length > string.length)
return false;
return string.substring(0, startsWith.length) === startsWith;
};
// this should show the infowindow if any place on the list is clicked
this.showInfoWindow = function(place) {
google.maps.event.trigger(place.marker, 'click');
};
}
$(function(){
ko.applyBindings(new viewModel(markers));
});
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCwUdUoC9ZiRbFC3et89fPK3tXIVO8D2sI&callback=initMap"></script>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>

Categories