I have a couple (or allot) markers in my Maps API. All these markers belong to a certain group, like 'home'. And some of them are visible and some are not. I wanna change the visible true/false of a whole group of markers at once using a DOM event. An ONCLICK button event that calls a JS to be specific.
So far, I've unable to find or come up with any way of solving my problem. I hope anyone can help me out.
<div id="map" class="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: 52.0000, lng: 5.0000},
mapTypeId: 'terrain'
});
var marker14 = new google.maps.Marker({
position: {lat: 51.9135, lng: 4.4212},
map: map,
title: '2017-02-02 13:27:30',
group: 'home',
visible: true
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key={API-KEY}&callback=initMap"></script>
In reply to #MrUpsidown
Where is your "onclick" button?
What function does it trigger?
Clicking in this link changes the menu on my page, and where {!!!something-here!!} is I think should be a script that changes the visibility of a certain group.
How do you add your "many" markers to the map?
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: 52.0000, lng: 5.0000},
mapTypeId: 'terrain'
});
var marker14 = new google.maps.Marker({
position: {lat: 51.9135, lng: 4.4212},
map: map,
title: '2017-02-02 13:27:30',
group: 'home',
visible: true
});
var marker16 = new google.maps.Marker({
position: {lat: 51.9135, lng: 4.4212},
map: map,
title: '2017-02-02 13:27:30',
group: 'home',
visible: false
});
var marker4 = new google.maps.Marker({
position: {lat: 51.9135, lng: 4.4212},
map: map,
title: '2017-02-02 13:27:30',
group: 'home',
visible: true
});
var marker20 = new google.maps.Marker({
position: {lat: 51.9135, lng: 4.4212},
map: map,
title: '2017-02-02 13:27:30',
group: 'work',
visible: true
});
var marker8 = new google.maps.Marker({
position: {lat: 51.9135, lng: 4.4212},
map: map,
title: '2017-02-02 13:27:30',
group: 'work',
visible: false
});
}
</script>
What have you tried?
"I've unable to find or come up with any way of solving my problem."
Add every marker to an array. In the function triggered by the button click, loop through your markers array. For each marker, check if it belongs to the group you are interested in and if yes, call setVisible(true).
var markers = [];
function initMap() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 5,
center: {
lat: 53,
lng: 4.5
}
});
var marker1 = new google.maps.Marker({
position: {
lat: 51.9335,
lng: 4.2212
},
map: map,
title: '2017-02-02 13:27:30',
group: 'home',
visible: false
});
var marker2 = new google.maps.Marker({
position: {
lat: 52.9135,
lng: 4.1212
},
map: map,
title: '2017-02-02 13:27:30',
group: 'home',
visible: false
});
var marker3 = new google.maps.Marker({
position: {
lat: 53.9135,
lng: 4.5212
},
map: map,
title: '2017-02-02 13:27:30',
group: 'home',
visible: true
});
var marker4 = new google.maps.Marker({
position: {
lat: 51.8835,
lng: 4.9912
},
map: map,
title: '2017-02-02 13:27:30',
group: 'work',
visible: true
});
var marker5 = new google.maps.Marker({
position: {
lat: 53.9135,
lng: 5.4212
},
map: map,
title: '2017-02-02 13:27:30',
group: 'work',
visible: false
});
markers.push(marker1);
markers.push(marker2);
markers.push(marker3);
markers.push(marker4);
markers.push(marker5);
}
function setHomeGroupVisible() {
for (var i = 0; i < markers.length; i++) {
if (markers[i].group === 'home') {
markers[i].setVisible(true);
}
}
}
initMap();
#map-canvas {
height: 150px;
}
button {
margin-top: 15px;
background: yellow;
}
<div id="map-canvas"></div>
<button onclick="setHomeGroupVisible()">
Set Home Group Visible
</button>
<script src="//maps.googleapis.com/maps/api/js"></script>
Related
I have customized Google Map with Custom Markers. I need to integrate Info Windows to each marker.
Custom Marker code from: https://developers.google.com/maps/documentation/javascript/custom-markers
Tried to integrate Info windows from: https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
Here is a related question i found (but it is not exactly what i want): https://stackoverflow.com/a/3059129/6191987
My code below:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: new google.maps.LatLng(40.712696, -74.005019),
mapTypeId: 'roadmap'
});
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
var features = [{
position: new google.maps.LatLng(40.712696, -74.005019),
type: 'parking'
}, {
position: new google.maps.LatLng(40.712753, -74.006081),
type: 'parking'
}, {
position: new google.maps.LatLng(40.713664, -74.007819),
type: 'library'
}];
// Create markers.
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvkk7wNQcIYXZ7S8XNG8cG-elq0QE2v3k&callback=initMap">
</script>
Also added JSFiddle: https://jsfiddle.net/vishnuprasadps/7g33j2kz/
What do you want to put as content of your infoWindow ?
But this seems to do the trick :
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: new google.maps.LatLng(40.712696, -74.005019),
mapTypeId: 'roadmap'
});
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
var features = [{
position: new google.maps.LatLng(40.712696, -74.005019),
type: 'parking'
}, {
position: new google.maps.LatLng(40.712753, -74.006081),
type: 'parking'
}, {
position: new google.maps.LatLng(40.713664, -74.007819),
type: 'library'
}];
var infowindow = new google.maps.InfoWindow({
content: "test"
});
// Create markers.
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvkk7wNQcIYXZ7S8XNG8cG-elq0QE2v3k&callback=initMap">
</script>
https://jsfiddle.net/uqLxnyca/
Have a good day.
I want to display two map ion same page. The problem is "map-canvas" is displaying properly but map-canvas-2 is not displaying at all. What should I do now Please Help...
Here is my HTML code...
<div class="google-map wow fadeInDown col-sm-6" data-wow-duration="500ms">
<div id="map-canvas"></div>
</div>
<div class="google-map wow fadeInDown col-sm-6" data-wow-duration="500ms">
<div id="map-canvas-2"></div>
</div>
Here is my JAVASCRIPT code
function initialize() {
var myLatLng = new google.maps.LatLng(19.0285, 73.0586);
var myLatLng2 = new google.maps.LatLng(23.344101, 85.309563);
var mapOptions = {
zoom: 14,
center: myLatLng,
disableDefaultUI: true,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeControlOptions: {
mapTypeIds: google.maps.MapTypeId.ROADMAP
}
};
var mapOptions2 = {
zoom: 14,
center: myLatLng2,
disableDefaultUI: true,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeControlOptions: {
mapTypeIds: google.maps.MapTypeId.ROADMAP
}
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var map2 = new google.maps.Map(document.getElementById('map-canvas-2'), mapOptions2);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: 'img/location-icon.png',
title: 'Kharghar',
});
var marker2 = new google.maps.Marker({
position: myLatLng2,
map: map2,
icon: 'img/location-icon.png',
title: 'Ranchi',
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var map2 = new google.maps.Map(document.getElementById('map-canvas-2'), mapOptions2);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: 'img/location-icon.png',
title: 'Kharghar',
});
var marker2 = new google.maps.Marker({
position: myLatLng2,
map: map2,
icon: 'img/location-icon.png',
title: 'Ranchi',
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map2, marker2);
});
var styledMapOptions = {
name: 'US Road Atlas'
};
var usRoadMapType = new google.maps.StyledMapType(
roadAtlasStyles, styledMapOptions);
map.mapTypes.set('roadatlas', usRoadMapType);
map.setMapTypeId('roadatlas');
}
google.maps.event.addDomListener(window, "load", initialize);
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map2, marker2);
});
var styledMapOptions = {
name: 'US Road Atlas'
};
var usRoadMapType = new google.maps.StyledMapType(
roadAtlasStyles, styledMapOptions);
map.mapTypes.set('roadatlas', usRoadMapType);
map.setMapTypeId('roadatlas');
}
google.maps.event.addDomListener(window, "load", initialize);
});
Thanks in advance:-)
I'm creating a map where I will be adding multiple custom markers, and I want each of them to have different infowindows.
The thing is that every marker has a different icon (those numbered dots you see in the image), and this is an example that is not explained on the GoogleMaps API code samples. I mean, they explain you how to create infowindows, but only in the case you are using the variable marker, and not for the variable icons. Therefore, I don't know where should I add the code for the infowindow. The website looks like this:
website screenshot
<script>
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
backgroundColor: '#000000',
center: new google.maps.LatLng(41.404998, 2.210517),
mapTypeId: 'roadmap',
streetViewControl: false,
});
var iconBase = 'images/numbers/';
var icons = {
001: {
icon: iconBase + '01.png'
},
002: {
icon: iconBase + '02.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
}
var features = [
{
position: new google.maps.LatLng(41.404998, 2.210517),
type: 001
//Barcelona 1
}, {
position: new google.maps.LatLng(41.404371, 2.179131),
type: 002
//Barcelona 2
}
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
};
}
</script>
try using closure this way
var features = [
{
position: new google.maps.LatLng(41.404998, 2.210517),
type: 001
//Barcelona 1
}, {
position: new google.maps.LatLng(41.404371, 2.179131),
type: 002
//Barcelona 2
}
];
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
var infowindow = new google.maps.InfoWindow()
var content = "" + feature.type
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));
}
you could change features this way
var features = [
{
position: new google.maps.LatLng(41.404998, 2.210517),
type: 001,
message: 'my firts message in info window'
//Barcelona 1
}, {
position: new google.maps.LatLng(41.404371, 2.179131),
type: 002,
message: 'my second message in info window'
//Barcelona 2
}
];
or you can add a new property
you should use
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
var infowindow = new google.maps.InfoWindow()
var content = "" + feature.message
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));
Answering Josep last question if I may (I'm new in Stack Overflow so please forgive my imprecisions), I updated the fiddle http://jsfiddle.net/t7trcpv2/1/, adding to the 'feature' object a 'title' property where you can input your own data
var map;
var infowindow;
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
backgroundColor: '#000000',
center: new google.maps.LatLng(41.404998, 2.210517),
mapTypeId: 'roadmap',
streetViewControl: false,
});
infowindow = new google.maps.InfoWindow();
var iconBase = 'images/numbers/';
var icons = {
001: {
icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
},
002: {
icon: "http://maps.google.com/mapfiles/ms/micons/green.png"
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map,
});
// must be a string (or a DOM node).
var content = "" + feature.title
google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow) {
return function(evt) {
infowindow.setContent(content);
infowindow.open(map, marker);
};
})(marker, content, infowindow));
}
var features = [{
position: new google.maps.LatLng(41.404998, 2.210517),
type: 001,
title:'title1'
//Barcelona 1
}, {
position: new google.maps.LatLng(41.404371, 2.179131),
type: 002,
title: 'title2'
//Barcelona 2
}];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
};
}
google.maps.event.addDomListener(window, "load", initialize);
I'm trying to add two markers to a map. Here's the code:
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
visible: true,
icon: 'images/pin-1.png'
});
//add the extra marker
newPos = new google.maps.LatLng(lat2, lng2)
marker = new google.maps.Marker({
position: newPos,
map: map,
visible: true,
icon: 'images/pin-2.png'
});
My question is, is it possible to make one of the markers point to the right, so it doesn't get hidden behind the first? Something like this:
Marker 1
Marker 2 ____
____ | |
| | |____|
| |> o o
|____|
Any help anyone can give is appreciated!
You can make SVG icons, and rotate them. The code below surrounds the "point" with 4 arrows each pointing at it from a cardinal direction:
var marker0 = new google.maps.Marker({
position: map.getCenter(),
icon: {
path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
scale: 5
},
draggable: true,
map: map
});
var marker1 = new google.maps.Marker({
position: map.getCenter(),
icon: {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 5,
rotation: 90,
anchor: new google.maps.Point(0, 0)
},
draggable: true,
map: map
});
var marker2 = new google.maps.Marker({
position: map.getCenter(),
icon: {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 5,
rotation: -90,
anchor: new google.maps.Point(0, 0)
},
draggable: true,
map: map
});
var marker3 = new google.maps.Marker({
position: map.getCenter(),
icon: {
path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
scale: 5,
rotation: 180,
anchor: new google.maps.Point(0, 0)
},
draggable: true,
map: map
});
Example code snippet:
function initialize() {
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(-25.363882, 131.044922)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker0 = new google.maps.Marker({
position: map.getCenter(),
icon: {
path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
scale: 5
},
draggable: true,
map: map
});
var marker1 = new google.maps.Marker({
position: map.getCenter(),
icon: {
strokeColor: 'green',
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 5,
rotation: 90,
anchor: new google.maps.Point(0, 0)
},
draggable: true,
map: map
});
var marker2 = new google.maps.Marker({
position: map.getCenter(),
icon: {
strokeColor: 'red',
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 5,
rotation: -90,
anchor: new google.maps.Point(0, 0)
},
draggable: true,
map: map
});
var marker3 = new google.maps.Marker({
position: map.getCenter(),
icon: {
strokeColor: 'blue',
path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
scale: 5,
rotation: 180,
anchor: new google.maps.Point(0, 0)
},
draggable: true,
map: map
});
/* var marker = new google.maps.Marker({
position: map.getCenter(),
map: map
}); */
}
google.maps.event.addDomListener(window, 'load', initialize);
html, body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map-canvas" style="height:100%;width:100%;"></div>
Google Map uses the longitude and latitude to position the marker. As of today, no such parameters in the Map API to align the pointer.
You can change your custom icons to align the pointers. make sure you have some transparent space on the other side, as the image placed on center.
I haven't tried to do anything like this, but I can suggest to play with origin property og Icon object https://developers.google.com/maps/documentation/javascript/reference#Icon
I'm trying to display google map with markers and circles. The map and the circle is displaying correctly but the marker are not visible on the map.
Please suggest what changes i should make in my code.
<div id="mapview" style="width: 100%; height: 700px;">
</div>
<script>
var map;
var info_window;
function initialize() {
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(51.561918, -0.31237799999996696),
mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: false
};
map = new google.maps.Map(document.getElementById('mapview'), mapOptions);
var image = '../Image/salemarker.png';
var user = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(51.561918, -0.31237799999996696),
animation: google.maps.Animation.DROP, icon: image
});
var circle = new google.maps.Circle({
map: map,
radius: 1609.344, // 10 miles in metres
strokeColor: '#08355A;',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#fffff',
fillOpacity: 0.2,
});
info_window = new google.maps.InfoWindow({
content: 'loading'
});
user.setMap(null);
function addMarkersc() {
createLocationOnMap('4 bed semi detached For sale', new google.maps.LatLng(51.5661728, 51.5661728), '<p>48, The fairway, wembley, HA..</p>');
}
addMarkersc();
circle.bindTo('center', user, 'position');
map.fitBounds(circle.getBounds());
}
google.maps.event.addDomListener(window, 'load', initialize);
var image1 = '../Image/salemarker.png';
function createLocationOnMap(titulo, posicao, conteudo) {
var m = new google.maps.Marker({
map: map,
title: titulo,
icon: image1,
position: posicao,
html: conteudo
});
google.maps.event.addListener(m, 'mouseover', function () {
info_window.setContent(this.html);
info_window.open(map, this);
});
}
</script>
Your marker is out of view. It is at 51.5661728,51.5661728:
createLocationOnMap('4 bed semi detached For sale', new google.maps.LatLng(51.5661728,51.5661728), '<p>48, The fairway, wembley, HA..</p>');}
Your map is centered at 51.561918,-0.31237799999996696
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(51.561918,-0.31237799999996696),
mapTypeId: google.maps.MapTypeId.ROADMAP,scrollwheel: false
};
working fiddle
You can try this
function InitializeMap1() {
geocoderMap = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(48.856614, 2.352222);
var myOptions =
{
zoom: 12,
minZoom: 12, // panControl: false, zoomControl: false, scaleControl: false, streetViewControl: true, //
center: latlng,
streetViewControl: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl: true
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
var arrayMain = [];
var markerLatLng = new google.maps.LatLng(48.856614, 2.352222);
var marker = new google.maps.Marker({
map: map,
position: markerLatLng,
center: markerLatLng
});
arrayMain.push(marker);
}
Try like this:
<div id="mapview" style="width: 100%; height: 700px">
<script>
var map;
var info_window;
function addMarkersc() {
var titulo = '4 bed semi detached For sale';
var posicao = new google.maps.LatLng(51.5661728,51.5661728);
var conteudo = '<p>48, The fairway, wembley, HA..</p>';
var image = '../Image/salemarker.png';
var m = new google.maps.Marker({
map: map,
title: titulo,
icon: image,
position: posicao,
html: conteudo
});
google.maps.event.addListener(m, 'mouseover', function () {
info_window.setContent(this.html);
info_window.open(map, this);
});
}
function initialize() {
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(51.561918,-0.31237799999996696),
mapTypeId: google.maps.MapTypeId.ROADMAP,scrollwheel: false
};
map = new google.maps.Map(document.getElementById('mapview'),mapOptions);
var image = '../Image/salemarker.png';
var user = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(51.561918,-0.31237799999996696),
animation: google.maps.Animation.DROP,
icon: image
});
var circle = new google.maps.Circle({
map: map,
radius: 1609.344, // 10 miles in metres
strokeColor: '#08355A;',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#fffff',
fillOpacity: 0.2,
});
info_window = new google.maps.InfoWindow({
content: 'loading'
});
user.setMap(null);
circle.bindTo('center', user, 'position');
map.fitBounds(circle.getBounds());
addMarkersc();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>