Related
I have a JSON file:
[
{
"id": 1,
"city": "Milan",
"availability": true,
"lat": 45.4655,
"long": 9.1865,
"marker": "example.png"
},
{
"id": 2,
"city": "Berlin",
"availability": true,
"lat": 52.520008,
"long": 13.404954,
"marker": "example.png"
},
{
"id": 3,
"city": "Paris",
"availability": false,
"lat": 48.864716,
"long": 2.349014
}
]
What happens so far is if a city has "availability": true then the "marker" within the JSON file appears on my map. However the other city's that have "availability": false are showing the Google Maps red marker on my map when I don't want any marker to show if the "availability": false.
This is my code so far:
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(52.520008, 13.404954),
disableDefaultUI: true,
zoom: 2
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
$.getJSON('example.com', function(data) {
$.each(data, function(i, value) {
var myLatlng = new google.maps.LatLng(value.lat, value.long);
var marker = new google.maps.Marker({
position: myLatlng,
icon: value.marker,
map: map
});
});
});
}
Any help on how to remove these Google Maps Red Markers on a city with "availability": false would be great. Thanks in advance.
Check for the value in the loop, also you don't need a variable assigned the marker, it get's lost in the loop anyways.
$.getJSON('example.com', function (data) {
$.each(data, function (i, value) {
// Don't create a marker if field is false
if (value.availability === false) {
return;
}
// No variables used
new google.maps.Marker({
position: new google.maps.LatLng(value.lat, value.long),
icon: value.marker,
map: map
});
});
});
const filtered = data.filter(item => item.availability);
$.each(filtered, function(i, value) {
var myLatlng = new google.maps.LatLng(value.lat, value.long);
var marker = new google.maps.Marker({
position: myLatlng,
icon: value.marker,
map: map
});
});
I have this code in javascript and html, everything works perfectly but i tried many way to remove markers in google maps. Help me, thank you !
<script type="text/javascript">
function initialize() {
var markers = [
{
"title": 'ABC',
"lat": '19.1759668',
"lng": '72.79504659999998',
"description": 'ZXVZXV'
},
{
"title": 'ASDASD',
"lat": '19.0883595',
"lng": '72.82652380000002',
"description": 'ZXVZXA.'
},
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 25,
center: new google.maps.LatLng(19.1759668, 72.79504659999998),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true,
mapTypeId: 'satellite'
});
for (var i = 0; i < markers.length; i++) {
var data = markers[i];
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
You could use top window array of markersObject eg markersObj store the markers object inside and then looping for set null or set map
<script type="text/javascript">
var markersObj = [];
var map;
function initialize() {
var markers = [
{
"title": 'ABC',
"lat": '19.1759668',
"lng": '72.79504659999998',
"description": 'ZXVZXV'
},
{
"title": 'ASDASD',
"lat": '19.0883595',
"lng": '72.82652380000002',
"description": 'ZXVZXA.'
},
];
map = new google.maps.Map(document.getElementById('map'), {
zoom: 25,
center: new google.maps.LatLng(19.1759668, 72.79504659999998),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true,
mapTypeId: 'satellite'
});
for (var i = 0; i < markers.length; i++) {
var data = markers[i];
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
});
markersObj.push(marker);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
function hideMarkers() {
nElem = markersObj.length
for (i=0; i< nElem; i++){
markersObj[i].setMap(null);
}
}
function showMarkers() {
nElem = markersObj.length
for (i=0; i< nElem; i++){
markersObj[i].setMap(map);
}
}
....
You need two buttons that call hideMarkers or showMarkers respectively
<!doctype html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="style.css">
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<style>
html, body height: 100%;}
body {font-family: "Helvetica Neue", Helvetica, Arial, Sans-Serif; font-size: 16px; margin: 0; padding: 0;}
img { vertical-align: text-bottom; }
#map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
<code> remove to run
var json = [
{
"title": "Aamodt's Apple Farm",
"lat": 45.0421379,
"lng": -92.8657445,
"color": "red",
"description": "6428 Manning Ave N<br />Stillwater, MN<br />651-439-3127"
},
{
"title": "American Legion Post 643",
"lat": 44.7776140,
"lng": -93.3410110,
"color": "green",
"description": "12375 Princeton Ave.<br />Savage, MN<br />612-270-3519"
},
{
"title": "Wilderness Bar & Grill, Elysian",
"lat": 44.197934,
"lng": -93.681275,
"color": "green",
"description": "505 W Highway 60<br />Elysian, MN<br />507-267-4455"
},
{
"title": "Winjum`s Shady Acres Restaurant & Resort",
"lat": 44.3301350,
"lng": -93.3608110,
"color": "green",
"description": "17759 177th St W<br />Faribault, MN<br />507-334-6661"
}]
</code> remove to run
var map;
var color;
var markers = [];
// create map
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(44.7776140, -93.3410110),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// create infoWindow
var infoWindow = new google.maps.InfoWindow();
for (var i = 0; i < json.length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
if (data.color == "green") {
color = "#015982";
}
if (data.color == "red") {
color = "#FF0000";
}
title = data.title;
description = data.description;
addMarkerWithTimeout(latLng, i * 200, color, title, description);
}
// add marker with delay
function addMarkerWithTimeout(position, timeout, color, title, description) {
window.setTimeout(function() {
marker=markers.push(new google.maps.Marker({
position: position,
map: map,
title: title,
info: description,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 7.5,
fillColor: color,
fillOpacity: 0.8,
strokeWeight: 0.4
},
animation: google.maps.Animation.DROP
}));
attachContent(marker, data);
}, timeout);
}
// open infor window on click
function attachContent(marker, data) {
marker.addListener('click', function() {
var content = data.title + "<br />" + data.description;
infoWindow.setContent(content);
infoWindow.open(map, marker);
})(marker, data);
}
</script>
</body>
</html>
I can make this drop markers with a working rollover that displays the title, but with the drop in animation I can not get the 'click' listener for the infoWindow to work. I really need another set of eye on this one. The only examples I can find either show drop animation, or the infoWindow working but not both at the same time.
Your code mistakes at here.
// add marker with delay
function addMarkerWithTimeout(position, timeout, color, title, description) {
window.setTimeout(function() {
var marker = new google.maps.Marker({
position: position,
map: map,
title: title,
info: description,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 7.5,
fillColor: color,
fillOpacity: 0.8,
strokeWeight: 0.4
},
animation: google.maps.Animation.DROP
});
markers.push(marker);
attachContent(marker, data);
}, timeout);
}
I get a javascript error with your code Uncaught TypeError: marker.addListener is not a function on this line (inside the attachContent function):
marker.addListener('click', function() {
The marker you are passing in to that function, is not a google.maps.Marker object, it is the return value of Array.push (the length of the array). Change addMarkerWithTimeout from:
// add marker with delay
function addMarkerWithTimeout(position, timeout, color, title, description) {
window.setTimeout(function() {
marker=markers.push(new google.maps.Marker({
position: position,
map: map,
title: title,
info: description,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 7.5,
fillColor: color,
fillOpacity: 0.8,
strokeWeight: 0.4
},
animation: google.maps.Animation.DROP
}));
attachContent(marker, data);
}, timeout);
}
To:
// add marker with delay
function addMarkerWithTimeout(position, timeout, color, title, description) {
window.setTimeout(function() {
var marker = new google.maps.Marker({
position: position,
map: map,
title: title,
info: description,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 7.5,
fillColor: color,
fillOpacity: 0.8,
strokeWeight: 0.4
},
animation: google.maps.Animation.DROP
});
markers.push(marker);
attachContent(marker, data);
}, timeout);
}
proof of concept fiddle
code snippet:
var color;
var markers = [];
function initialize() {
// create map
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(44.7776140, -93.3410110),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// create infoWindow
var infoWindow = new google.maps.InfoWindow();
for (var i = 0; i < json.length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
if (data.color == "green") {
color = "#015982";
}
if (data.color == "red") {
color = "#FF0000";
}
title = data.title;
description = data.description;
addMarkerWithTimeout(latLng, i * 200, color, title, description, data);
}
// add marker with delay
function addMarkerWithTimeout(position, timeout, color, title, description, data) {
window.setTimeout(function() {
var marker = new google.maps.Marker({
position: position,
map: map,
title: title,
info: description,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 7.5,
fillColor: color,
fillOpacity: 0.8,
strokeWeight: 0.4
},
animation: google.maps.Animation.DROP
});
markers.push(marker);
attachContent(marker, data);
}, timeout);
}
// open infor window on click
function attachContent(marker, data) {
marker.addListener('click', function(evt) {
var content = data.title + "<br />" + data.description;
infoWindow.setContent(content);
infoWindow.open(map, marker);
});
}
}
google.maps.event.addDomListener(window, "load", initialize);
var json = [{
"title": "Aamodt's Apple Farm",
"lat": 45.0421379,
"lng": -92.8657445,
"color": "red",
"description": "6428 Manning Ave N<br />Stillwater, MN<br />651-439-3127"
}, {
"title": "American Legion Post 643",
"lat": 44.7776140,
"lng": -93.3410110,
"color": "green",
"description": "12375 Princeton Ave.<br />Savage, MN<br />612-270-3519"
}, {
"title": "Wilderness Bar & Grill, Elysian",
"lat": 44.197934,
"lng": -93.681275,
"color": "green",
"description": "505 W Highway 60<br />Elysian, MN<br />507-267-4455"
}, {
"title": "Winjum`s Shady Acres Restaurant & Resort",
"lat": 44.3301350,
"lng": -93.3608110,
"color": "green",
"description": "17759 177th St W<br />Faribault, MN<br />507-334-6661"
}];
html,
body {
height: 100%;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, Sans-Serif;
font-size: 16px;
margin: 0;
padding: 0;
}
img {
vertical-align: text-bottom;
}
#map {
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
I'm trying to learn myself some more advanced code writing. And this week I'm learning about google maps and how to customize it.
I think I'm doing fine, but I have a problem with making an icon marker show on the actual website.
The program I use to make the website is dreamweaver and in the live view option the customized map and icon are both showing correctly. However, when I go to the actual website, the icon is missing. There is no marker at all on the google map. I could really use some help with this one.
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var styles = [
{
stylers: [
{ hue: "#0D6C91" },
{ saturation: 0 }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
}
];
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(51.834250, 4.309755),
disableDefaultUI: true,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
var map = new google.maps.Map(document.getElementById('column_links'),
mapOptions);
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
var image = '3. afbeeldingen/RLogo.png';
var myLatlng = new google.maps.LatLng(51.834250, 4.309755);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: image,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I'm trying to put multiple markers on Google Maps but making them each refers to an URL. I put all the markers in a loop but only the last one is executed. I want all of them to work.
Here is my code:
<script type="text/javascript">
function initialize() {
var json = [
{
"title": "title1",
"lat": 46.077428,
"lng": 18.229837
},
{
"title": "title2",
"lat": 46.042229,
"lng": 18.227134
},
{
"title": "title3",
"lat": 46.082831,
"lng": 18.225911
},
{
"title": "title4",
"lat": 46.092058,
"lng": 18.185645
},
{
"title": "title5",
"lat": 46.075493,
"lng": 18.22885,
"description": "some description to the 5th element",
"url": "http://www.pannon-home.hu/"
},
{
"title": "title6",
"lat": 46.075344,
"lng": 18.227713,
"description": "some description to the 6th element",
"url": "http://www.pannon-home.hu/"
}
]
var latlng = new google.maps.LatLng(46.071325, 18.233185);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var firstmap = new google.maps.Map(document.getElementById("allmap"),myOptions);
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: firstmap,
title: data.title,
url: data.url,
icon: 'home.png'
});
}
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, "mouseover", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(firstmap, marker);
});
google.maps.event.addListener(marker, "mouseout", function() {
infoWindow.setContent("");
infoWindow.close();
});
google.maps.event.addListener(marker, "click", function() {
location.assign(marker.url);
});
}
</script>
create a new marker object
and marker.setMap(map);
Too much of your logic lies outside of your for loop, causing much of your logic to only be applied to the last marker. Try this adjustment:
<script type="text/javascript">
function initialize() {
var json = [
{
"title":"title1",
"lat":46.077428,
"lng":18.229837
},
{
"title":"title2",
"lat":46.042229,
"lng":18.227134
},
{
"title":"title3",
"lat":46.082831,
"lng":18.225911
},
{
"title":"title4",
"lat":46.092058,
"lng":18.185645
},
{
"title":"title5",
"lat":46.075493,
"lng":18.22885,
"description":"some description to the 5th element",
"url":"http://www.pannon-home.hu/"
},
{
"title":"title6",
"lat":46.075344,
"lng":18.227713,
"description":"some description to the 6th element",
"url":"http://www.pannon-home.hu/"
}
]
var latlng = new google.maps.LatLng(46.071325, 18.233185);
var myOptions = {
zoom:12,
center:latlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var firstmap = new google.maps.Map(document.getElementById("allmap"), myOptions);
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position:latLng,
map:firstmap,
title:data.title,
url:data.url,
icon:'home.png'
});
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, "mouseover", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(firstmap, marker);
});
google.maps.event.addListener(marker, "mouseout", function () {
infoWindow.setContent("");
infoWindow.close();
});
google.maps.event.addListener(marker, "click", function () {
location.assign(marker.url);
});
}
}
</script>