hiding or removing markers from Google Cordova maps - google-maps

Can't seem to remove or hide the markers from the map.
This is the current way im trying to hide the markers
Works fine when i try and remove a single marker without it being in the loop.
markereventfising.on(plugin.google.maps.event.MARKER_CLICK, function(marker, fl) {
markereventfising.setVisible(false);
});
This is how i retrieve the markers.
var fishingloc = [
<?php if($fishing->num_rows > 0){
while($row = $fishing->fetch_assoc()){
echo '["'.$row['title'].'", '.$row['lat'].', '.$row['lng'].', "'.$row['icon'].'", "'.$row['pic'].'", "'.$row['link'].'", "'.$row['description'].'"],';
}
}
?>
];
This is the loop I'm using
for( fl = 0; fl < fishingloc.length; fl++ ) {
var positioneventfishing = new plugin.google.maps.LatLng(fishingloc[fl][1], fishingloc[fl][2]);
var titleheadfish = fishingloc[fl][0];
var imgevent = fishingloc[fl][6];
var getitfish = fishingloc[fl][4];
var getmyloc = location.latLng;
var getdistfish = plugin.google.maps.geometry.spherical.computeDistanceBetween(positioneventfishing, getmyloc) / 1000.0;
var latfish = fishingloc[fl][1];
var longfish = fishingloc[fl][2];
var today = new Date(fishingloc[fl][4]);
$('#info-map-box').append("<div class='event-map-holder fish-holder-div'><div id='img-holder-small'><img src='"+getitfish+"'/></div><h2>"+titleheadfish+"</h2><h3>"+getdistfish.toFixed(3)+" km</h3><div class='close-markers-box' id='location-marker'><img src='img/markergps.png'/><br><div id='find-loc-btn' class='find-icon'>"+latfish+','+longfish+"</div></div></div>");
$('.find-icon').click(function() {
$('#info-map-box').fadeOut();
$('#icon-map-holder').fadeOut();
$('div#openmarker-opt').fadeIn();
var getcoordsicon = $(this).text();
var arr = getcoordsicon.split(',');
var latlon = new plugin.google.maps.LatLng(parseFloat(arr[0]),parseFloat(arr[1]));
map.animateCamera({
target: latlon,
zoom: 15,
duration: 2000
}, function() {
});
});
var markereventfising = map.addMarker({
position: positioneventfishing,
map: map,
icon: 'img/fish-marker.png',
title: fishingloc[fl][0],
snippet: getdistfish.toFixed(2)
});
markereventfising.on(plugin.google.maps.event.MARKER_CLICK, function(marker, fl) {
markereventfising.setVisible(false);
});
}
(marker, fl));
}

Related

The marker disappears depending on the scale and type of the marker

I want to make the markers of a certain type disappear depending on the scale
I achieved that all markers would be switched off at a scale of <= 14
Tell me how to correctly write a condition for disabling markers with the type "ps1" for a scale <= 14
<script>
var markerType = {
"ps1": [], "tp1": [], "rtp0": []
};
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(47.82034163, 31.19833049),
zoom: 14,
});
var image = {
rtp0: {
url: './image/rtp0.png',scaledSize: new google.maps.Size(28, 40)},
ps1: {
url: './image/ps1.png',scaledSize: new google.maps.Size(28, 40)},
tp1: {
url: './image/tp1.png',scaledSize: new google.maps.Size(28, 40)},
};
downloadUrl('phpsqlinfo.php', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var type = markerElem.getAttribute('type');
var icon = image[type] || {};
var marker = new google.maps.Marker({
icon: icon,
map: map,
position: point,
});
markerType[type].push(marker);
google.maps.event.addListener(map, 'zoom_changed', function() {
zoomLevel = map.getZoom();
for (var i = 0; i < markerType[type].length; i++) {
var markers = markerType[type][i];
if (zoomLevel <= 14) {
(!markers.getVisible())
markers.setVisible(false);
}
else {
markers.setVisible(true);
}
}
});
});
});
}
</script>
You need to set the markers' method to setMap(null) and setMap(map) when the zoom_changed event fires.
Store the markers you want to filter e.g ps1 in a variable:
var markersToShowHide = markerType.ps1;
Then add two functions, one to show the markers and the other to hide them:
function showMarkers() {
for (var i = 0; i < markersToShowHide.length; i++) {
markersToShowHide[i].setMap(map);
}
}
function hideMarkers() {
for (var i = 0; i < markersToShowHide.length; i++) {
markersToShowHide[i].setMap(null);
}
}
Full code:
var markerType = {
"ps1": [],
"tp1": [],
"rtp0": []
};
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(47.82034163, 31.19833049),
zoom: 14,
});
var image = {
rtp0: {
url: './image/rtp0.png',
scaledSize: new google.maps.Size(28, 40)
},
ps1: {
url: './image/ps1.png',
scaledSize: new google.maps.Size(28, 40)
},
tp1: {
url: './image/tp1.png',
scaledSize: new google.maps.Size(28, 40)
},
};
var markersToShowHide = markerType.ps1;
function showMarkers() {
for (var i = 0; i < markersToShowHide.length; i++) {
markersToShowHide[i].setMap(map);
}
}
function hideMarkers() {
for (var i = 0; i < markersToShowHide.length; i++) {
markersToShowHide[i].setMap(null);
}
}
downloadUrl('phpsqlinfo.php', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var type = markerElem.getAttribute('type');
var icon = image[type] || {};
var marker = new google.maps.Marker({
icon: icon,
map: map,
position: point
});
markerType[type].push(marker);
google.maps.event.addListener(map, 'zoom_changed', function() {
if (map.getZoom() <= 14) {
hideMarkers();
} else {
showMarkers();
}
});
});
});
}

How To Fixed Google Map Marker Icon With Text

Hi i'm using google map marker icon with text using google chart API https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=bbT|27.b|f4b605|0f3276
in my maps the icon is not fixed if text is too long how to fixed it
this is my js code :
<script type="text/javascript">
/* <![CDATA[ */
var CITY_MAP_CENTER_LAT = -6.3757701;
var CITY_MAP_CENTER_LNG = 105.7814325;
var CITY_MAP_ZOOMING_FACT = 9;
var infowindow;
/**
* Data for the markers consisting of a name, a LatLng and a pin image, message box content for
* the order in which these markers should display on top of each
* other.
*/
var markers = {
'jalanluarkota':[
{
'name':'KOLELET - RANGKASBITUNG',
'location': [-6.338283,106.257433],
'message':'<a href="http://localhost:7777/simonitoring/laporan/laporanruasjalandetail/1" class=ptitle>KOLELET - RANGKASBITUNG</a><br/><span class=ptiming>Status: Jalan Luar Kota</span></br><span class=ptiming>Panjang Ruas (Km): 5.30</span></br><span class=ptiming>Paket Pekerjaan: 1</span>',
'icons':'https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=bbT|1|f4b605|0f3276'
},
]};
var map = null;
var mgr = null;
var mc = null;
var markerClusterer = null;
var showMarketManager = false;
if(CITY_MAP_CENTER_LAT=='')
{
var CITY_MAP_CENTER_LAT = 34;
}
if(CITY_MAP_CENTER_LNG=='')
{
var CITY_MAP_CENTER_LNG = 0;
}
if(CITY_MAP_CENTER_LAT!='' && CITY_MAP_CENTER_LNG!='' && CITY_MAP_ZOOMING_FACT =='')
{
var CITY_MAP_ZOOMING_FACT = 9;
}
else if(CITY_MAP_ZOOMING_FACT == '')
{
var CITY_MAP_ZOOMING_FACT = 3;
}
var PIN_POINT_ICON_HEIGHT = 37;
var PIN_POINT_ICON_WIDTH = 32;
if(MAP_DISABLE_SCROLL_WHEEL_FLAG)
{
var MAP_DISABLE_SCROLL_WHEEL_FLAG = 'No';
}
function setCategoryVisiblity( category, visible ) {
var i;
if ( mgr && category in markers ) {
for( i = 0; i < markers[category].length; i += 1 ) {
if ( visible ) {
mgr.addMarker( markers[category][i], 0 );
} else {
mgr.removeMarker( markers[category][i], 0 );
}
}
mgr.refresh();
}
}
function initialize() {
var myOptions = {
zoom: CITY_MAP_ZOOMING_FACT,
center: new google.maps.LatLng(CITY_MAP_CENTER_LAT, CITY_MAP_CENTER_LNG),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_luarkota"),myOptions);
mgr = new MarkerManager( map );
google.maps.event.addListener(mgr, 'loaded', function() {
if (markers) {
var k = 0;
for (var level in markers) {
google.maps.event.addDomListener( document.getElementById( level ), 'click', function() {
setCategoryVisiblity( this.id, this.checked );
});
for (var i = 0; i < markers[level].length; i++) {
var details = markers[level][i];
var image = new google.maps.MarkerImage(details.icons,new google.maps.Size(PIN_POINT_ICON_WIDTH, PIN_POINT_ICON_HEIGHT));
var myLatLng = new google.maps.LatLng(details.location[0], details.location[1]);
markers[level][i] = new google.maps.Marker({
title: details.name,
position: myLatLng,
icon: image,
clickable: true,
draggable: false,
flat: true
});
attachMessage(markers[level][i], details.message);
}
mgr.addMarkers( markers[level], 0 );
}
mgr.refresh();
}
});
// but that message is not within the marker's instance data
function attachMessage(marker, msg) {
var myEventListener = google.maps.event.addListener(marker, 'click', function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({
content: String(msg)
});
infowindow.open(map,marker);
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
/* ]]> */
</script>
how to fixed that thanks...

Google Map : InvalidValueError: setLabel: not a string; and no text property

I am trying to create a google map with directions and for the purpose using Polyline. But I am getting the above console errors and I just can't get what is the problem here.
Code :
<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
var marker;
var infowindow;
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var labelIndex = 0;
var markers = {};
var currentId = 0;
var uniqueId = function() {
return ++currentId;
}
var edit = 0;
var direction = '';
var linecordinates = [];
var map;
var sortorder = 0;
var latest_marker;
var latest_latlng;
var lineSymbol;
var flightPath;
var line = [];
var saved_locations = $("#hidden_lat_long").val();
// saved_locations = [{"label":1,"lat":"27.7233","long":"85.2783"},{"label":2,"lat":"27.7625","long":"85.3411"},{"label":3,"lat":"27.7056","long":"85.4166"},{"label":4,"lat":"27.6704","long":"85.3209"}]
function initialize() {
lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
/* edit portion */
if(saved_locations != '') {
edit = 1;
saved_locations = JSON.parse(saved_locations);
currentId = labelIndex = sortorder = saved_locations.length;
}
/* edit portion */
var latlng = new google.maps.LatLng(27.7238,85.3214);
var options = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"), options);
/* edit portion */
if(edit) {
for( i = 0; i < saved_locations.length; i++ ) {
var position = new google.maps.LatLng(saved_locations[i].lat, saved_locations[i].long);
var id = saved_locations[i].label;
var saved_label = saved_locations[i].label;
marker = new google.maps.Marker({
id: id,
position: position,
map: map,
label: saved_label,
});
console.log(marker);
markers[id] = marker;
linecordinates.push({
id: id,
lat: parseFloat(saved_locations[i].lat),
lng: parseFloat(saved_locations[i].long)
});
}
flightPath = new google.maps.Polyline({
path: linecordinates,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
icons: [{
icon: lineSymbol,
offset: '100%'
}],
});
addline();
}
/* edit portion */
}
google.maps.event.addDomListener(window, 'load', initialize);
function addline() {
line.push(flightPath);
flightPath.setMap(map);
}
<div id="map-canvas"></div>
Any help/suggestions are welcome.
The error-message is self-explaining.
The label-properties in saved_locations are not of type String, they are Numbers.
You must enclose the values in double-quotes:
[{"label":"1","lat":"27.7233","long":"85.2783"},{"label":"2","lat":"27.7625","long":"85.3411"},{"label":"3","lat":"27.7056","long":"85.4166"},{"label":"4","lat":"27.6704","long":"85.3209"}]
...or convert them:
var saved_label = String(saved_locations[i].label);

Can someone tell me why I can see an InfoWindow when I click on an map marker?

Here is my code that will pull data from mysql and display the markers on the map. But I cant get the info windows to show when I click on a marker. Thank for any help.
The reference to the infowindows is at the very bottom on the page close to the end of the code after the ajax reference.
Thanks
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
function LoadMarkers(encodedString)
{
var bounds = new google.maps.LatLngBounds();
var stringArray = [];
stringArray = encodedString.split("****");
var x;
for (x = 0; x < stringArray.length; x = x + 1)
{
var addressDetails = [];
var marker;
addressDetails = stringArray[x].split("&&&");
var lat = new google.maps.LatLng(addressDetails[1], addressDetails[2]);
var image = new google.maps.MarkerImage(addressDetails[3]);
var marker = new google.maps.Marker({
map: map,
icon: image,
position: lat,
content: addressDetails[0]
});
markersArray.push(marker);
google.maps.event.addListener( marker, 'click', function () {
closeInfos();
var info = new google.maps.InfoWindow({content: this.content});
info.open(map,this);
infos[0]=info;
});
bounds.extend(lat);
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(map);
}
}
}
map.fitBounds(bounds);
}
var geocoder;
var map;
var markersArray = [];
var infos = [];
geocoder = new google.maps.Geocoder();
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = null;//new google.maps.Map(document.getElementById("map_canvas"), myOptions);
jQuery(document).ready( function($){
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
LoadMarkers(document.getElementById("encodedString").value);
setInterval(function () {
jQuery.ajax({
url:'ajaxload.php',
type: "POST",
data: {'refreshed':true},
success: function(data)
{
LoadMarkers(data);
}
});
}, 10000);
//Manages the info windows
function closeInfos(){
if(infos.length > 0){
infos[0].set("marker",null);
infos[0].close();
infos.length = 0;
}
}
});
The function LoadMarkers is defined in global scope, but the function closeInfos is defined locally inside the $.ready-callback.
Because of that the call of closeInfos() inside the click-handler of the marker fails and stops the further execution of the click-handler.
You must make closeInfos global accessible:
window.closeInfos=function(){
if(infos.length > 0){
infos[0].set("marker",null);
infos[0].close();
infos.length = 0;
}
}

trouble with fusion table map, custom marker and infowindow

I have been working on a fusion table map. I am trying to add custom markers and infowindows but I am having issues getting it to show my markers and infowindows. I think I have something out of order or maybe a few syntax errors I am unable to find. I have sort of confused myself up a bit on the process. I would appreciate any help.
var tableId ="1zFwXiOkWbKCY9xRGvXBdHjUkTsirnwbr77WjTds"; // original table
google.load('visualization', '1');
var map;
var markers = [];
var infoWindow = new google.maps.InfoWindow();
function initialize() {
var ak = new google.maps.LatLng(64.958056,-147.618333);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: ak,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var queryStr = "SELECT name, lat, lng, description FROM "+tableId+" ORDER BY name";
document.getElementById('info').innerHTML += queryStr +"<br>";
var queryText = encodeURIComponent(queryStr);
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
query.send(getData);
}
function getData(response) {
if (!response) {
alert('no response');
return;
}
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var dt = response.getDataTable();
document.getElementById('info').innerHTML += "rows="+dt.getNumberOfRows()+"<br>";
for (var i = 0; i < dt.getNumberOfRows(); i++) {
var lat = dt.getValue(i,1);
var lng = dt.getValue(i,2);
var name = dt.getValue(i,0);
var description = dt.getValue(i,3);
}
var pt = new google.maps.LatLng(lat, lng);
var html = "<span style='font-size:13px;font-weight:bold;color:#236192;'>" + name + "</span><p style='font-size:12px;'>" + description + "</p>";
var info = html;
}
function createMarker(pt,info) {
var iconURL = 'uaf-icon.png';
var iconSize = new google.maps.Size(29,60);
var iconOrigin = new google.maps.Point(0,0);
var iconAnchor = new google.maps.Point(15,60);
var myIcon = new google.maps.MarkerImage(iconURL, iconSize, iconOrigin, iconAnchor);
var shadowURL = 'uaf-shadow.png';
var shadowSize = new google.maps.Size(63, 60);
var shadowOrigin = new google.maps.Point(0, 0);
var shadowAnchor = new google.maps.Point(15, 60);
var myShadow = new google.maps.MarkerImage(shadowURL, shadowSize, shadowOrigin, shadowAnchor);
var iconShape = [18,0,20,1,22,2,23,3,24,4,25,5,26,6,27,7,27,8,28,9,28,10,28,11,28,12,28,13,28,14,28,15,28,16,28,17,28,18,28,19,27,20,27,21,26,22,26,23,25,24,24,25,23,26,21,27,20,28,16,29,21,31,21,32,21,33,21,34,21,35,20,36,20,37,20,38,19,39,19,40,19,41,18,42,18,43,18,44,18,45,17,46,17,47,17,48,17,49,16,50,16,51,16,52,15,53,15,54,15,55,14,56,14,57,14,58,14,59,13,59,13,58,13,57,13,56,12,55,12,54,12,53,12,52,11,51,11,50,11,49,11,48,11,47,10,46,10,45,10,44,10,43,9,42,9,41,9,40,9,39,9,38,8,37,8,36,8,35,8,34,8,33,7,32,7,31,12,29,9,28,7,27,6,26,4,25,3,24,3,23,2,22,1,21,1,20,0,19,0,18,0,17,0,16,0,15,0,14,0,13,0,12,0,11,0,10,1,9,1,8,2,7,2,6,3,5,4,4,5,3,6,2,8,1,10,0,18,0];
var myMarkerShape = {
coord: iconShape,
type: 'poly'
};
var myMarkerOpts = {
position: point,
map: map,
icon: myIcon,
shadow: myShadow,
shape: myMarkerShape
};
var marker = new google.maps.Marker(myMarkerOpts);
markers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infoWindow.close();
infoWindow.setContent(info);
infoWindow.open(map,marker);
});
}
function myclick(num) {
google.maps.event.trigger(markers[num], "click");
}
first get the map displaying with default markers. You aren't calling the createMarker function (or creating any markers):
for (var i = 0; i < dt.getNumberOfRows(); i++) {
var lat = dt.getValue(i,1);
var lng = dt.getValue(i,2);
var name = dt.getValue(i,0);
var description = dt.getValue(i,3);
var pt = new google.maps.LatLng(lat, lng);
createMarker(pt,"<b>"+name+"</b><br>"+description);
}
there is a typo in createMarker (there is no "point" variable in the scope of the function, it should be "pt"), look for and address any errors in the javascript console.
function createMarker(pt,info) {
var iconURL = 'uaf-icon.png';
var iconSize = new google.maps.Size(29,60);
var iconOrigin = new google.maps.Point(0,0);
var iconAnchor = new google.maps.Point(15,60);
var myIcon = new google.maps.MarkerImage(iconURL, iconSize, iconOrigin, iconAnchor);
var shadowURL = 'uaf-shadow.png';
var shadowSize = new google.maps.Size(63, 60);
var shadowOrigin = new google.maps.Point(0, 0);
var shadowAnchor = new google.maps.Point(15, 60);
var myShadow = new google.maps.MarkerImage(shadowURL, shadowSize, shadowOrigin, shadowAnchor);
var iconShape = [18,0,20,1,22,2,23,3,24,4,25,5,26,6,27,7,27,8,28,9,28,10,28,11,28,12,28,13,28,14,28,15,28,16,28,17,28,18,28,19,27,20,27,21,26,22,26,23,25,24,24,25,23,26,21,27,20,28,16,29,21,31,21,32,21,33,21,34,21,35,20,36,20,37,20,38,19,39,19,40,19,41,18,42,18,43,18,44,18,45,17,46,17,47,17,48,17,49,16,50,16,51,16,52,15,53,15,54,15,55,14,56,14,57,14,58,14,59,13,59,13,58,13,57,13,56,12,55,12,54,12,53,12,52,11,51,11,50,11,49,11,48,11,47,10,46,10,45,10,44,10,43,9,42,9,41,9,40,9,39,9,38,8,37,8,36,8,35,8,34,8,33,7,32,7,31,12,29,9,28,7,27,6,26,4,25,3,24,3,23,2,22,1,21,1,20,0,19,0,18,0,17,0,16,0,15,0,14,0,13,0,12,0,11,0,10,1,9,1,8,2,7,2,6,3,5,4,4,5,3,6,2,8,1,10,0,18,0];
var myMarkerShape = {
coord: iconShape,
type: 'poly'
};
var myMarkerOpts = {
position: pt,
map: map,
icon: myIcon,
shadow: myShadow,
shape: myMarkerShape */
};
var marker = new google.maps.Marker(myMarkerOpts);
markers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infoWindow.close();
infoWindow.setContent(info);
infoWindow.open(map,marker);
});
}
working example (with default icons)