Removing Google Map Markers - google-maps

I have an html checkbox that runs an if else javascript function depending on whether it is check or unchecked. When the checkbox is checked it loads the markers called "Fishmark" from the DB. This works fine.
What I need help with is getting the markers to remove when the box is unchecked. I know the if, else statement is correct so it has be with the actual Google API code. I successfully used the setMap(null) on another part of my site so I'm kinda lost as to why its not taking all of the Fishmark markers off the map.
var checkbox = document.getElementById("chbx");
function addRemoveFishing(){
if(checkbox.checked==true){
fishingUrl("XML_Fishing.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var title = markers[i].getAttribute("title");
var water_type = markers[i].getAttribute("water_type");
var water_depth = markers[i].getAttribute("water_depth");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var bait = markers[i].getAttribute("bait");
var fish = markers[i].getAttribute("fish");
var notes = markers[i].getAttribute("notes");
var Fishhtml = "<b>" + title + "</b> <br/>" + water_type + "</b> <br/>" + water_depth + "</b> <br/>" + bait
+ "</b> <br/>" + fish + "</b> <br/>" + notes;
var icon = FishingIcon;
var Fishmark = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow4(Fishmark, map, Fishinfo, Fishhtml);
}
});
}
else {
Fishmark.setMap(null);
}
};

You are creating several markers in a for loop. In your else statement you are only removing one (1) marker from the map.
Store the markers in an array for instance and in your else statement make a for loop that calls setMap(null) for each marker.

Related

Google Maps API V3: Create Marker HTML based on search if/else

I have a "store locator" setup here:
http://www.brynei.com/fertdealer_map_bry.htm
lat, lng, name, address, csz, and phone information is stored in a mySQL database. If you input zip code 13165, the locator works as it should. However, I need to limit a range of zip codes to show one marker, and display the marker html for a range of zip codes (66000 to 69999). This part is actually working to center the map using the function searchLocations() section, but I need some help in the function createMarker(latlng, name, address, csz, phone) and function createOption(name, distance, num) section.
Currently if you use zip code 67501, the map will center but no marker is displayed. I need it to place a marker in a specific location, and Company Name Inc, 123 Main St, Anywhere KS 67501, 555-555-1234 as the marker HTML. That marker would be static if a zip is used in the 66000 to 69999 range.
I can do something on the database side also if that is an easier solution.
Any help is appreciated.
These are the 3 sections (functions) I am having an issue with:
function searchLocations() {
var address = document.getElementById("addressInput").value;
var mylatlng = new google.maps.LatLng(37.928552, -97.898658);
var geocoder = new google.maps.Geocoder();
if (address >= 66000 && address <= 69999) {
map.setCenter(mylatlng);
map.setZoom(10); }
else {
geocoder.geocode({address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
searchLocationsNear(results[0].geometry.location); }
else {
alert(address + ' not found');
}
});
}}
function createMarker(latlng, name, address, csz, phone) {
var html = "<font face = 'arial'>" + "<b>" + name + "</b> <br/>" + address + "<br/>" + csz + "<br/>" + phone + "</font>";
var marker = new google.maps.Marker({
map: map,
position: latlng
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markers.push(marker);
}
function createOption(name, distance, num) {
var option = document.createElement("option");
option.value = num;
option.innerHTML = name + "(" + distance.toFixed(1) + ")";
locationSelect.appendChild(option);
}

Google API and map.panTo: not panning

I'm trying to improve my sound project site, but I'm stuck in... panning.
I have a Google map populated by markers, associated to a text and a recorded sound. It works. I'm trying to allow user to navigate map through panning, by I can't get my map panning.
I'm not an expert in php or Google API and this is my first post here, hope it's well formatted.
The web address of the project is soundplaces.net
I've created a function map_panning(), and then tried to call this function with
please PAN
in content div.
The map just reloads... even if I tried to place a "return false" in the function.
I also tried to make the map pan when a marker is clicked
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html); map.panTo(marker.getPoint());
});
But still, does not work.
Can anybody help me?
This a greater part of the code I have in my default.ctp (the site is made with CAKE), hope it helps.
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(<?php echo $CenterMap; ?>), 13);
map.setMapType(G_SATELLITE_MAP);
GDownloadUrl("http://www.soundplaces.net/xml.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var description = markers[i].getAttribute("description");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var file_name = markers[i].getAttribute("file_name");
var marker = createMarker(point, name, description, address, type, file_name);
map.addOverlay(marker);
}
});
}
}
function createMarker(point, name, description, address, type, file_name) {
//var marker = new GMarker(point, customIcons[type]);
markerOptions = { icon:soundIcon };
var marker = new GMarker(point, markerOptions);
var html = "<b>" + name + "</b> <br/>" + address + "<br />" + description + "<br />" + "<object type='application/x-shockwave-flash' data='/media/dewplayer.swf?mp3=/media/audio/"+file_name+"' width='200' height='20'><param name='movie' value='dewplayer.swf?mp3=media/audio/"+file_name+"' /></object>";
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html); map.panTo(marker.getPoint());
});
return marker;
}
function map_panning() {
map.panTo(new google.maps.LatLng(44.433373,10.712251));
return false; //cancel navigation
}
Then in body
<body onload="load()" onunload="GUnload()">
<div id="content">
Please PAN
<?php echo $this->Session->flash(); ?>
<?php echo $content_for_layout; ?>
</div>
<?php echo $this->element('sql_dump'); ?>
</body>
You're mixing up a combination of Google Maps API 2 and API 3 code. The two don't work together, you have to use one or the other. API 2 is deprecated, so you should preferably use API 3.
e.g. new google.maps.LatLng(44.433373,10.712251) is API 3 but new GMarker(point, markerOptions) is API 2.
And if you did want to keep it all with API 2, you should probably amend your map_panning function to be something like:
map.panTo(new GLatLng(44.433373,10.712251));

Show multiple location marker on Google map

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)

Display multiple markers on google map by providing address

I have the following script to use the google maps API, I have to create a map that has more than one Marker (the balloon shaped icon pointing to something) and i need each of those markers to point on a different area of the map (i.e. different coordinates), how can i do it?
NOTE: I do not have latitude and longitude for the area on which marker has to be placed instead I have the address of the area on which marker has to be placed.
The code to display multiple markers on Google map is given below but it does not work as expected!
var map = null;
var geocoder = null;
function initializeNew() {
var allAddress = document.getElementById("HiddenField1").value;
var testary = new Array();
testary = allAddress.split("|");
if (GBrowserIsCompatible()) {
//calls map to appear inside <div> with id, "map_canvas"
map = new GMap2(document.getElementById("map_canvas"));
//adds zoom and arrow controls to map
//map.addControl(new GSmallMapControl());
var marker = null;
var i = 0;
for (i = 0; i < testary.length; i++) {
address = testary[i];
geocoder = new GClientGeocoder();
//converts a street address into geocode for the api
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
marker = new GMarker(point);
map.addOverlay(marker);
map.setMapType(G_HYBRID_MAP);
//adds your own marker title and description in html
marker.openInfoWindowHtml("<p class='para1bold' style=\"font-weight: bold;\">Address</p><p class='para1'>" + address + "</p>");
//Add click event on push pin to open info window on click of the icon
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<p class='para1bold' style=\"font-weight: bold;\">Address</p><p class='para1'>" + address + "</p>");
});
//Provides map,satellite,hybrid and terrain views in the map along with zoom control
map.setUIToDefault();
}
}
)
}
}
}
I have stored address of group of items in an array and looped to display markers in the map. This displays only one marker for the last address present in the array. Please correct this code or provide new code to display multiple markers in Google map by providing address.
I ran into this exact same problem and fixed it. Look at the code that I have used. The specific bits are that marker needs to be an array and when you open the infowindow the content needs to be stored in the marker array. I would also suggest that you use something JSON instead which is easier to parse instead of separating with '|'.
try this: put var in front of marker
else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
map.setMapType(G_HYBRID_MAP);
//adds your own marker title and description in html
marker.openInfoWindowHtml("<p class='para1bold' style=\"font-weight: bold;\">Address</p><p class='para1'>" + address + "</p>");
//Add click event on push pin to open info window on click of the icon
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<p class='para1bold' style=\"font-weight: bold;\">Address</p><p class='para1'>" + address + "</p>");
});
UPDATE
var geocoder = new GClientGeocoder();
var addresses = ["new york","chicago"];
var curIndex = 0;
function showAddress() {
var _cur = addresses[curIndex];
geocoder.getLatLng(
_cur,
function(point) {
if (!point) {
alert(_cur + " not found");
} else {
console.log(_cur+":"+point);
}
//do next after done
curIndex++;
if(curIndex<addresses.length)
showAddress();
}
);
}
showAddress();
</script>

get a link from the database into the google maps info window

i've started very enthousiastic with google maps and managed to get the info from my mysql dbase to the map on my site. The problem i'm facing now is that i want to be able to click through from the info window to a page on my site (the link also comes out of the dbase).
Here is the standard google api code I'm using now ('mijnlink' is the link), i've tried a lot of different things but so far no solution, hope you can help me to find the answer:
GDownloadUrl("../phpsqlajax_genxml.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var mijnlink = markers[i].getAttribute("mijnlink");
var naam = markers[i].getAttribute("naam");
var address = markers[i].getAttribute("address");
var hotelcampingbungalow = markers[i].getAttribute("hotelcampingbungalow");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, mijnlink, naam, address, hotelcampingbungalow);
map.addOverlay(marker);
}
});
function createMarker(point, mijnlink, naam, address, hotelcampingbungalow) {
var marker = new GMarker(point, customIcons[hotelcampingbungalow]);
var html = "<b>" + mijnlink + hotelcampingbungalow + " " + naam + "</b> <br/>" + address;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
Got some other help, the var html in the Createmarker function must be like this:
var html = "<b><a href='" + mijnlink + "'>klik hier</a>" + hotelcampingbungalow + " " + naam + "</b> <br/>" + address;