How do I toggle the visibility of a subset of markers in Google Maps API?
I have two sets of marker location data. Want to add a button to toggle visibility of each set independently.
Full code below for convenience. I have a button code in the header.
<button onclick="toggleMELocations()">Toggle ME Locations</button>`
The button is showing up, but clicking does not yield the expected result (ME locations disappearing).
The relevant function is "toggleMELocations." I am trying to say that if ME locations are currently visible, make them invisible. And vice versa.
Any help is much appreciated.
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {
lat: 40,
lng: -95
},
styles: [{
stylers: [{
saturation: -100
}]
}]
});
setMarkers(map);
}
function toggleMELocations() {
if (MEs) {
for (i in MEs) {
var visibility = (MEs[i].getVisible() == true) ? false : true;
MEs[i].setVisible(visibility);
}
}
}
// MEC locations
var MEs = [
['aaa', 36.07, -75.79],
['bbb', 40.07, -83.79]
];
// CC locations
var Concentras = [
['xxx', 38.01, -75.55],
['yyy', 30.10, -90.3]
];
function setMarkers(map) {
// Adds markers to the map.
for (var i = 0; i < MEs.length; i++) {
var ME = MEs[i];
var marker = new google.maps.Marker({
position: {
lat: ME[1],
lng: ME[2]
},
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
map: map,
title: ME[0]
});
}
for (var i = 0; i < Concentras.length; i++) {
var Concentra = Concentras[i];
var marker = new google.maps.Marker({
position: {
lat: Concentra[1],
lng: Concentra[2]
},
icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
map: map,
title: Concentra[0]
});
}
}
Firstly getVisible() is not a valid function.
You need to add a global variable defined: var addedMEs = [];
This acts as an array of markers that have been added to the map in the setMarkers method. We change the setMarkers method to include a line which will add a marker object to the array defined above:
for (var i = 0; i < MEs.length; i++) {
var ME = MEs[i];
var marker = new google.maps.Marker({
position: {
lat: ME[1],
lng: ME[2]
},
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
map: map,
title: ME[0]
});
addedMEs.push(marker);
}
Then we need to remove the getVisible() method as it is invalid. we change this line to:
var bounds = map.getBounds();
var visibility = (bounds.contains(addedMEs[i].position) == true) ? false : true;
addedMEs[i].setVisible(visibility);
And it works. :]
Here is the JSFiddle to try: https://jsfiddle.net/cmjcs5eL/13/
Related
I have a google map with 1 destination and 2 origins (the green marker is the origin and the red is the destination). there is a button that when I click, the markers should be not in the google maps anymore, but when I click the button, the destination and 1 origin are removed, but they're still 1 origin marker even if the original array is already null.
I followed the documentation, but the origin marker is still not removing.
here is an example of array of latlong:
address_latlong: Array(3)[
0: {lat: " 51.43037899999999", lon: "6.7507253"}
1: {lat: " 52.4870183", lon: "13.4249841"}
2: {lat: " 48.1877566", lon: "11.5949554"}]
since the destination and 2 origins are in one array, i used this for getting the last value for destination and the first 2 for the origins. this is inside a function with the codes for code 1 and code 2:
var originArray = [], destinationValues = {}, originValues = {};
var lastLength = origDest.address_latlong.length;
destinationValues = {
destLat: origDest.address_latlong[lastLength-1].lat,
destLon: origDest.address_latlong[lastLength-1].lon,
};
for(var i = lastLength - 2; i >= 0; i--){
originValues = {
orgLat: origDest.address_latlong[i].lat,
orgLon: origDest.address_latlong[i].lon,
};
originArray.push(originValues);
}
[code 1] here is the code for adding the marker for single destination:
if(!findMapNo(1).destination){
var dest = {
lat: parseFloat(destinationValues.destLat),
lng: parseFloat(destinationValues.destLon)
};
//for displaying directions
route_Search.destination = dest;
route_Search.destinationName = destinationValues.destName;
if (findMapNo(1).destination != null) {
console.log("insert here!!!");
//findMapNo(1).destination.setMap(null);
findMapNo(1).destination = [];
if (findMapNo(1).destination.dragend) {
google.maps.event.removeListener(findMapNo(1).destination.dragend, 'dragend');
}
findMapNo(1).destination = false;
}
var icon = {
url: "http://maps.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png",
size: new google.maps.Size(50, 50),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 54),
scaledSize: new google.maps.Size(50, 50)
};
// Create a marker for each place.
findMapNo(1).destination = new google.maps.Marker({
map: findMapNo(1).map,
icon: icon,
position: dest,
draggable: false
});
findMapNo(1).destination.latLng = dest;
}
[code 2] here is the code for multiple origins:
for (var i = 0; i < originArray.length; i++) {
if(!findMapNo(1).origin[i]){
var length = originArray.length;
console.log("length: ", length);
var org = {
lat: parseFloat(originArray[i].orgLat),
lng: parseFloat(originArray[i].orgLon)
};
route_Search.origin[i] = org;
if(findMapNo(1).origin[i] != null) {
console.log("insert");
console.log(findMapNo(1).origin[i]);
findMapNo(1).origin[i].setMap(null);
if (findMapNo(1).origin[i].dragend) {
google.maps.event.removeListener(findMapNo(1).origin[i].dragend, 'dragend');
}
findMapNo(1).origin[i] = false;
}
// Create a marker for each place.
findMapNo(1).origin[i] = new google.maps.Marker({
map: findMapNo(1).map,
icon: "http://maps.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png",
position: org,
draggable: false
});
findMapNo(1).origin[i].latLng = org;
here is the code of my button for removing markers:
$("#portletHead").on("click", ".backCollectionOrigin", function() {
if (findMapNo(1).destination) {
//i used 1 here because the the first data is always empty
for(var i = 1; i < findMapNo(1).origin.length; i++){
findMapNo(1).origin[i].setMap(null);
}
findMapNo(1).origin = [];
findMapNo(1).destination.setMap(null);
directionsDisplay.setMap(null);
}
}
}
function for findMapNo where arrayMAp = []:
function findMapNo(no) {
for (i = 0; i < arrayMAp.length; i++) {
if (arrayMAp[i].mapNo == no) {
return arrayMAp[i];
}
}
}
You should put your created map markers in an array like this:
var markers[];
function addMarkers(){
var marker = new google.maps.Marker({
position: location,
map: map
});
markers.push(marker);
}
Then, inside the function that removes the marker, you can clear the markers[] array and clear your map with markers by doing something like this:
function deleteMarkers(){
for(i=0; i<markers.length;i++){
markers[i].setMap(null);
}
markers = [];
}
Here's a sample implementation that shows how to add and delete markers from map: https://jsbin.com/fuxupecepi/edit?html,output
Note: Please add your own API key on the given sample implementation.
I display multiple markers on a map. The list of locations is built with PHP:
$myData .= '["'.$Name.'", '.$lat.', '.$blon.'],';
Then I use JS to plot markers on the map.
function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: {lat: 32.99999999, lng: -95.2222328}
});
setMarkers(map);
}
var stores = ['.$myData.'];
function setMarkers(map) {
for (var i = 0; i < stores.length; i++) {
var store = stores[i];
var marker = new google.maps.Marker({
position: {lat: store[1], lng: store[2]},
map: map,
title: restaurant[0]
});
}
}
I need to re-center the map on map load. Should I try to average lat/lon coords from $myData array and replace center coords in initMap or is there a better way?
In this story: It's better to get average lat/long coordinates from the back-end (or calculate it on a front-end, but before you initialize a GoogleMap), so your map will be loaded in the right place and will not "tremble".
But you still may have a problem with zooming, and there are a few solutions. Most difficult is calculate again, but maybe you can try something of it (and it may make an interesting effect on page loading):
A. Zoom in from the space. Set smallest zoom and after google.API calculates bounding box — zoom in!
B. Show preloader screen over the map. In this case, you can calculate average lat/long using google.API too. It's the easiest way, but not so smooth and cool.
create an empty bounds object (a google.maps.LatLngBounds)
add all your markers to it
use it to center and zoom your map
function setMarkers(map) {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < stores.length; i++) {
var store = stores[i];
var marker = new google.maps.Marker({
position: {lat: store[1], lng: store[2]},
map: map,
title: restaurant[0]
});
bounds.extend(marker.getPosition());
}
map.fitBounds(bounds);
}
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: {
lat: 32.99999999,
lng: -95.2222328
}
});
setMarkers(map);
}
var stores = [
["store 1", 42, -72],
["store 2", 41, -74]
];
function setMarkers(map) {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < stores.length; i++) {
var store = stores[i];
var marker = new google.maps.Marker({
position: {
lat: store[1],
lng: store[2]
},
map: map,
title: store[0]
});
bounds.extend(marker.getPosition());
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
Here is how I do it (a small snippet of my code) in jQuery, just pass your map into the function:
function (mapInfo) {
var noMarkers = false;
if (!mapInfo.markers || mapInfo.markers.length === 0) {
noMarkers = true;
var marker = new google.maps.Marker({
position: { lat: YOUR_DESIRED_HOME_POINT, lng: YOUR_DESIRED_HOME_POINT },
optimized: false
});
mapInfo.markers.push(marker);
}
var bounds = new google.maps.LatLngBounds();
// Create bounds from markers
$.each(mapInfo.markers, function (index, item) {
var latlng = mapInfo.markers[index].getPosition();
bounds.extend(latlng);
});
// Google wants to zoom ALL the way in for only one marker, so if there is only one, we'll back it out a bit
if (bounds.getNorthEast().equals(bounds.getSouthWest())) {
var adjustBy = noMarkers ? 20.5 : 0.005;
var extendNortheast = new google.maps.LatLng(bounds.getNorthEast().lat() + adjustBy, bounds.getNorthEast().lng() + adjustBy);
var extendSouthwest = new google.maps.LatLng(bounds.getNorthEast().lat() - adjustBy, bounds.getNorthEast().lng() - adjustBy);
bounds.extend(extendNortheast);
bounds.extend(extendSouthwest);
}
google.maps.event.addListenerOnce(mapInfo.map, 'bounds_changed', function () {
var zoom = mapInfo.map.getZoom();
if (zoom > 18) {
mapInfo.map.setZoom(16);
}
});
mapInfo.map.fitBounds(bounds);
}
I have a map that I have been trying to figure out adding infoWindow's to markers that live in an array and I am stuck.. With a single map and a single marker I can add an info window no problem. But for the life of me I CAN NOT get the infowindows to work within my array. If anyone could possibly help me get this to work I would be forever greatful. My intentions is to be able to pull html within the infowindows. Here is a fiddle with where I am at so far.
var map;
var markers = [];
function initMap() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 14,
center: new google.maps.LatLng(-33.91721, 151.22630),
mapTypeId: 'roadmap',
disableDefaultUI: true
});
// var iconBase = <?php echo "'/images/markers/'"; ?>;
var icons = {
typea: {
icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
},
typeb: {
icon: "http://maps.google.com/mapfiles/ms/micons/green.png"
},
typec: {
icon: "http://maps.google.com/mapfiles/ms/micons/orange.png"
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map,
type: feature.type
});
marker.addListener('click', function() {
//set zoom level
map.setZoom(20);
//center map
map.setCenter(marker.getPosition());
alert("Testing");
});
markers.push(marker);
}
filterMarkers = function(getType) {
console.log(getType);
for (var i = 0; i < markers.length; i++) {
if (markers[i].type == getType || getType == "") {
markers[i].setVisible(true);
} else {
markers[i].setVisible(false);
}
}
}
var features = [{
position: new google.maps.LatLng(-33.91721, 151.22630),
type: 'typea'
}, {
position: new google.maps.LatLng(-33.91539, 151.22820),
type: 'typeb'
}, {
position: new google.maps.LatLng(-33.91747, 151.22912),
type: 'typec'
}];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
}
google.maps.event.addDomListener(window, "load", initMap);
Complete working fiddle: http://jsfiddle.net/h80vtmye/
GoogleMap not allow to use infowindow like that. Create a single copy of the infowindow instead of maintaining an array and set contents with infowindow.setContent() during the mouseover event of marker.
I have markers that are stored in an object array and I cannot figure out how to delete them.
// Initialize Object Array
var Calls = [{
lat: 42,
lng: -72
}, {
lat: 40.7127837,
lng: -74.0059413
}, {
lat: 40.735657,
lng: -74.1723667
}];
// Initialize Map
function initMap()
{
map = new google.maps.Map(document.getElementById('map'),
{
center: Calls[0],
zoom: 14,
scaleControl: true
})
}
// Add Markers
function initMarkers()
{
for (var i = 0; i < Calls.length; i++)
{
var marker = new google.maps.Marker({
position: Calls[i],
map: map
});
}
}
// Start on Load
window.onload = function()
{
initMap();
initMarkers();
}
//Clear Markers
function clearOverlays()
{
initMarkers(null);
}
// Run Clear Markers Function every 3 seconds
setInterval(function()
{
clearOverlays();
Calls = [];
}, 3000)
Working fiddle.
You have to store markers in other array like :
var markers = [];
for (var i = 0; i < Calls.length; i++)
{
var marker = new google.maps.Marker({
position: Calls[i],
map: map
});
markers.push(marker);
}
After that add function that clear map from all markers :
function clearMap() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
}
Hope this helps.
The map comes up and the point appears. I have the title appearing as well. But as soon as I click on the marker to get info, nothing appears. Firebug info is below.
The information is being brought in via a database and there are multiple items; multiple markers are shown on the map as they should.
Any help would be apprecaited. Thanks..
Firebug Point Info:
MarkLat[i] = xx.xxxxxxxxxxxxxx;
MarkLong[i] = -xx.xxxxxxxxxxxxxx;
MarkerTitle[i] = 'Title 1';
Display[i] = '<table><tr><td>Title 1</td></tr><tr><td>Title 1 Address<br />Title 1 City, State Zip</td></tr><tr><td>Title 1 Phone</td></tr><tr><td>Title 1 Email</td></tr><tr><td>Title 1 URL</td></tr></table>';
Firebug Error:
infowindow is not defined
infowindow.open(map,marker);
Code:
<script type="text/javascript">
var i = -1;
var MarkLat=new Array();
var MarkLong=new Array();
var MarkerTitle=new Array();
var Display=new Array();
var MapCenter = new google.maps.LatLng(xx.xxxxxxxxxxxxxx,-xx.xxxxxxxxxxxxxx)
</script>
<script type="text/javascript">
var i = i + 1;
MarkLat[i] = [[Lat]];
MarkLong[i] = [[Long]];
MarkerTitle[i] = '[[Title]]';
Display[i] = '<table><tr><td>[[Title]]</td></tr><tr><td>[[Address]]<br />[[City]], [[State]] [[Zip]]</td></tr><tr><td>[[Phone]]</td></tr><tr><td>[[Email]]</td></tr><tr><td>[[WebURL]]</td></tr></table>';
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 12,
center: MapCenter,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT,
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);
for (var i = 0, length = 50; i < length; i++) {
var latLng = new google.maps.LatLng(MarkLat[i],MarkLong[i]);
var infoWindow = new google.maps.InfoWindow(Display[i]);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: MarkerTitle[i]
});
google.maps.event.addDomListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Changing to a capital W was not enough for me. Only one location was being opened. I tested your code with two points:
MarkLat = [];
MarkLong = [];
Display = [];
MarkerTitle= [];
MarkLat[0] = 0;
MarkLong[0] = 0;
Display[0] = { content: "hi" };
MarkerTitle[0] = "hello";
MarkLat[1] = 10;
MarkLong[1] = 10;
Display[1] = { content: "hi 2" };
MarkerTitle[1] = "hello 2";
I'm guessing you only want one InfoWindow on the screen at any given time. Then, a single InfoWindow should be declared, with the contents kept inside the marker, and have the contents change as the marker is clicked.
var infoWindow = new google.maps.InfoWindow();
for (var i = 0, length = Display.length; i < length; i++) {
var latLng = new google.maps.LatLng(MarkLat[i],MarkLong[i]);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: MarkerTitle[i],
infoWindowContent: Display[i]
});
// Notice I used the 'this' keyword inside the listener
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(this.infoWindowContent.content);
infoWindow.open(map,this);
});
}
The alternative, having many InfoWindows pop up, needs a change to click listener, so that a reference to each individual InfoWindow is preserved. This effect is accomplished with an anonymous function wrapped around the infoWindow.open function (a new function scope is created).
for (var i = 0, length = Display.length; i < length; i++) {
var latLng = new google.maps.LatLng(MarkLat[i],MarkLong[i]);
var infoWindow = new google.maps.InfoWindow(Display[i]);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: MarkerTitle[i]
});
google.maps.event.addListener(marker, 'click', (function(infoWindow) {
return function() {
infoWindow.open(map,this);
}
})(infoWindow));
}
infowindow != infoWindow
You just have declared it with a capital, trying to use it without