I am trying to hide a selected category of google map markers when an external javascript function hidetype() is called. To no avail.
I took the general concept from: http://www.geocodezip.com/v3_MW_example_categories.html
Below is the code that extracts my marker info from mysql derived XML. I have the markers grouped by type.
downloadUrl("phpsqlajax_genxml2_snow.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "Some infoBubble HTML";
var Gtip = "<b>" + name + "</b>";
var icon = customIcons[type] || {};
var hover = icon.hover;
var hoverout = icon.icon;
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow,
});
marker.mytype = type;
bindInfoWindow(marker, map, infoWindow, html, Gtip, hover, hoverout);
}
});
}
function hidetype(category) {
alert(category);
for (var i=0; i<markers.length; i++) {
if (markers[i].mytype == category) {
markers[i].setVisible(false);
}
}
}
An example of how I'd externally try to remove markers is:
<img onclick="hidetype('1')" src=...>
This currently spits out an alert with the passed type variable but doesn't remove the markers. Thanks in advance!
Related
This is a part of my code to display markers in map :
function refreshMap() {
if (markerClusterer) {
markerClusterer.clearMarkers();
}
var markers = [];
var markerImage = new google.maps.MarkerImage(imageUrl,
new google.maps.Size(24, 32));
for (var i = 0; i < 1000; ++i) {
var latLng = new google.maps.LatLng(data.photos[i].latitude,
data.photos[i].longitude)
var marker = new google.maps.Marker({
position: latLng,
draggable: true,
icon: markerImage
});
markers.push(marker);
}
Markers are displayed from a table data.json
all it's working
Now In the properties of markers there is a index containing a number, and I just want display markers containing number 2 or 3 or 5, but not all markers.
It is possible ?
Thank you for your help
After a few time of work I have found the solution :
function refreshMap() {
if (markerClusterer) {
markerClusterer.clearMarkers();
}
var markers = [];
var markerImage = new google.maps.MarkerImage(imageUrl,
new google.maps.Size(24, 32));
for (var i = 0; i < 11; ++i) {
var Indice = data.photos[i].owner_id
if (Indice == 109117) {
var latLng = new google.maps.LatLng(data.photos[i].latitude,
data.photos[i].longitude)
I have a function that loads my map to keep my map static.
<script>
var delArray = new Array();
var gm;
var map;
var iw;
var oms;
window.onload = function(){
gm = google.maps;
map = new gm.Map(document.getElementById('map_canvas'), {
mapTypeId: gm.MapTypeId.TERRAIN,
center: new gm.LatLng(-29.335205, 24.793563),
scrollwheel: false,
zoom: 6
});
iw = new gm.InfoWindow();
oms = new OverlappingMarkerSpiderfier(map,
{markersWontMove: true, markersWontHide: true});
}
</script>
I then use another function to construct my spiderfier data.
<script>
function spider(mapData){
var usualColor = 'eebb22';
var spiderfiedColor = 'ffee22';
var iconWithColor = function(color) {
return 'http://chart.googleapis.com/chart?chst=d_map_xpin_letter&chld=pin|+|' +
color + '|000000|ffff00';
}
var shadow = new gm.MarkerImage(
'https://www.google.com/intl/en_ALL/mapfiles/shadow50.png',
new gm.Size(37, 34), // size - for sprite clipping
new gm.Point(0, 0), // origin - ditto
new gm.Point(10, 34) // anchor - where to meet map location
);
oms.addListener('click', function(marker) {
iw.setContent(marker.desc);
iw.open(map, marker);
});
oms.addListener('spiderfy', function(markers) {
for(var i = 0; i < markers.length; i ++) {
markers[i].setIcon(iconWithColor(spiderfiedColor));
markers[i].setShadow(null);
}
iw.close();
});
oms.addListener('unspiderfy', function(markers) {
for(var i = 0; i < markers.length; i ++) {
markers[i].setIcon(iconWithColor(usualColor));
markers[i].setShadow(shadow);
}
});
var bounds = new gm.LatLngBounds();
for (var i = 0; i < mapData.length; i ++) {
var datum = mapData[i];
var loc = new gm.LatLng(datum[0], datum[1]);
bounds.extend(loc);
var marker = new gm.Marker({
position: loc,
title: datum[2],
animation: google.maps.Animation.DROP,
map: map,
icon: iconWithColor(usualColor),
shadow: shadow
});
marker.desc = datum[3];
oms.addMarker(marker);
delArray.push(marker);
}
map.fitBounds(bounds);
// for debugging/exploratory use in console
window.map = map;
window.oms = oms;
}
</script>
And Another to remove markers from the map:
<script>
function delMe(){
if(delArray){
for(i =0; i <= delArray.length; i++){
delArray[i].setMap(null);
}
this.delArray = new Array();
}
}
</script>
My map data (mapData) comes from a php script and passed on via Jason. And that's also where I call my delete function right before I call my spider (map) function. This I do to clear the map before I pass the new data.
$( document ).ready(function() {
delMe();
var pdata = $js_array;
spider(pdata);
});
Now, my problem is that all data is displaying perfectly but after calling the delMe() function it clears the markers 100% but then my map become unresponsive it's not loading new data when calling the spider() function with new data.
I can overcome this problem by reloading/creating the map again, but I want to avoid that and only use a static map. And if I don't delete markers it just fill the map with 100's of markers mixing the old and new.
I am a bit of a noob when it comes to javascript/jquery, any help will be much appreciated!.
It looks like you're missing an OMS removeMarker call in your delMe function, which should go something like this:
function delMe(){
if (delArray){
for (i =0; i <= delArray.length; i++){
oms.removeMarker(delArray[i]);
delArray[i].setMap(null);
}
this.delArray = [];
}
}
(It's possible you have other problems too, but here's a start).
It's not clear from what you write, but are you using the JS developer console? Google '[your browser] developer console' for more info — it lets you see if errors are causing your map to become unresponsive.
I really searched everywhere but I can't find my mistake in my code. I have information that is dynamical loaded into a checkbox (I only have one checkbox on my html) because I do not know at advanced how many checkboxes I will need...
This is my code to check if my checkbox is checked, and what is in it. The value is lat,lng and title
$(".chkbx").on("change", function() {
var selected = new Array();
//marker.setVisible(false);
//map.removeOverlay(marker);
//marker.setMap(null);
$("input:checkbox[name=checkbox]:checked").each(function() {
selected.push($(this).val());
});
console.log(selected);
for(var i=0; i< selected.length ;i++)
{
var current = selected[i].split(';');
var blueIcon = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' + 'chco=FFFFFF,008CFF,000000&ext=.png';
var siteLatLng = new google.maps.LatLng(current[0], current[1]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
icon: blueIcon,
animation: google.maps.Animation.DROP,
title: current[2],
//zIndex: sites[3],
html: current[2]
});
marker.setMap(map);
}
}
});
My markers show on my google map but it is impossible to remove them ... can someone please help me or suggest something?
So for each selected checkbox you create a marker. What you need to do is add those markers into an array that you can then reference later.
// global variable
var markers = [];
$(".chkbx").on("change", function() {
var selected = [];
// loop through all the markers, removing them from the map:
for (var marker in markers) {
marker.setMap(null);
}
// then you probably want to clear out the array, so you can then re-insert markers to it
markers = [];
$("input:checkbox[name=checkbox]:checked").each(function() {
selected.push($(this).val());
});
for(var i=0; i< selected.length ;i++)
{
var current = selected[i].split(';');
var blueIcon = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' + 'chco=FFFFFF,008CFF,000000&ext=.png';
var siteLatLng = new google.maps.LatLng(current[0], current[1]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
icon: blueIcon,
animation: google.maps.Animation.DROP,
title: current[2],
html: current[2]
});
// you don't need this setMap here, you already specified map in your mapOptions:
// marker.setMap(map);
markers.push(marker);
}
});
var lats = ["56.1581702","56.1580875","56.1588094","56.1510389","56.15943499999999","56.1576479"];
var lons = ["13.767593300000044","13.752623399999948","13.764544","13.768728699999997","13.768018600000005","13.76731380000001"];
var i = 0;
var image = '/bilder/location.png';
for(lats.length > i) {
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(lats[i], lons[i]),
icon: image
});
var i++;
}
Cant get this code to work, only a blank map is displayed.
Your for loop expression is invalid. Try this :
var lats = ["56.1581702","56.1580875","56.1588094","56.1510389","56.15943499999999","56.1576479"];
var lons = ["13.767593300000044","13.752623399999948","13.764544","13.768728699999997","13.768018600000005","13.76731380000001"];
var image = '/bilder/location.png';
for(var i = 0; i < lats.length; ++i) {
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(lats[i], lons[i]),
icon: image
});
}
The developer tools available in modern browsers will help you to debug syntax errors in your code.
How can we openInfoWindowHtml on google map while mouse over on PHP MySQL result as follows,
http://www.yelp.com/c/denver/health
This sites shows Information window on google map while mouse over on result title
Tried as following,
//<![CDATA[
var map;
var geocoder;
var markerArray = [];
function loadMap(params) {
if (GBrowserIsCompatible()) {
geocoder = new GClientGeocoder();
map = new GMap2(document.getElementById('map'));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(40, -100), 4);
map.setZoom(8);
searchLocationsNear(params)
}
}
function searchLocationsNear(params) {
var data = JSON.parse(params);
var lenght = data.length;
var bounds = new GLatLngBounds();
for ( var i = 0; i < lenght; i++) {
// check lat and long available with data
if (data[i].enough_for_map) {
var name = data[i].name;
var address = data[i].address;
if (data[i].description)
var description = data[i].description;
var point = new GLatLng(data[i].latitude, data[i].longitude);
var marker = createMarker(point, name, address, description);
map.addOverlay(marker);
markerArray[i + 1] = marker;
var el_index = $('service_name_' + i);
if (el_index) {
el_index.addEvent('mouseover', marker);
// GEvent.addDomListener(el_index, 'mouseover', function() {
// GEvent.trigger(markerArray[i], 'click');
// });
}
bounds.extend(point);
}
}
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
}
function createMarker(point, name, address, description) {
var marker = new GMarker(point);
var html = '<b>' + name + '</b> <br/><p>' + description + '</p>' + address;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
above map locations pointed from mysql result set.
<h2>
<a id="service_name_1" href="/example/details/bookkeeper/191">Photographer</a>
</h2>
<h2>
<a id="service_name_2" href="/example/details/bookkeeper/192">Teacher</a>
</h2>
<h2>
<a id="service_name_3" href="/example/details/bookkeeper/193">Accountant</a>
</h2>
Excepted result:
While mouseover on each h2 should show corresponding location info on map.
Any suggestion will greatly appreciated
Thanks
How far have you gotten?
In principle you could,
Put a standard 'click'-event listeners on the markers you've placed on the map which displays the custom infoWindow (a few different approaches/examples here: http://code.google.com/intl/sv-SE/apis/maps/documentation/javascript/demogallery.html).
Have another listener for 'mouseover' on the li elements of the sidebar-list, which in turns triggers the click-event. (Here's how to trigger google map events: http://code.google.com/intl/sv-SE/apis/maps/documentation/javascript/reference.html#event)