Solved

how to remove markers in google maps v3

Posted on 2011-03-03
6
1,388 Views
Last Modified: 2012-05-11
I have spend quite some time searching for the answer to this and it seems to be a depreciated functionality for V3 and I can't find a clear exact way to deal with this so I though i  ought to run it past the experts!

Basically I have a map rebuild routine that runs when a route part is removed from a structure of route parts so I simply need to remove the corresponding marker from the map.

any help appreciated.
0
Comment
Question by:Lmillard
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 19

Expert Comment

by:Albert Van Halen
ID: 35025065
Use this
// method to clear all markers
// usage : clearMarkers(map);
// arguments : map - instance of the map

function clearMarkers(map) {
   var markCount = map.markers.length;
   for(var i = 0; i < markCount; i++)
      map.markers[i].setMap(null); 
}

Open in new window

0
 

Author Comment

by:Lmillard
ID: 35025232
Looks like it should do what I want but for some reason it wont run in my rebuild routine.
I am initializing the initial map using the following code so not sure if I am creating a named instance.
Also this removes all markers, is there a way to remove just one?



var geocoder;
	var map;
	var bounds = new google.maps.LatLngBounds();
	var totalMarkers = 0;
// START THE WHOLE MAP BUSINESS GOING
	function initialize() {
		geocoder = new google.maps.Geocoder();
		var latlng = new google.maps.LatLng(51.397, -1.0);
		var myOptions = {
		  zoom: 8,
		  center: latlng,
		  mapTypeId: google.maps.MapTypeId.ROADMAP
		}
		map = new google.maps.Map(document.getElementById("gMapScreen"), myOptions);
	  }

Open in new window

0
 
LVL 19

Expert Comment

by:Albert Van Halen
ID: 35025460
You have your map variable defined globally so that's good.
Can you show your rebuild routine or provide a link to your site ?

The method indeed remove all markers by iterating through the markers array of the map.
If you know specific properties of a marker that needs to be deleted you can rewrite the routine by iterating through the markers and delete the ones that meet the criteria.
0
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 

Author Comment

by:Lmillard
ID: 35025573
My site is on my localhost dev server at the moment so not possible to show that directly but here is a copy of my rebuild code.
At the moment I am running the initialize() function at the top to destroy the existing map and recreate from scratch but this is a bit heavy handed.
Could advise on how to add a unique id to a marker to allow for single deletion?
Sorry for the daft questions but I am very new to google maps.

showGmap is just a script that slides down the map screen so no real effect on the whole thing.
the ajax post returns a json array of route lat/lng from session vars in the form or GeoArray
// REBUILD THE MAP - CAN BE FIRED FROM ANY ACTION SUCH AS ADD ROUTE, DELETE ROUTE, LOADING PAGE
function rebuildMapCFC(basketId,defaultLatLng) {
	initialize();
	showGmap();
	var mydata = {data:[basketId]};
	$.post(httpPath+"assets/publicComps/basket.cfc", 
		   {method:"getBasketRoute",argumentCollection:$.toJSON(mydata), returnFormat:"json"}, function(geoArray) {

	var geoArray = $.evalJSON(geoArray);
	if(geoArray.length) {
	for (var i=0; i < geoArray.length; i++){
			varLoc = geoArray[i].split(',');
			myLat = varLoc[0]; myLng = varLoc[1];
			var latlng = new google.maps.LatLng(myLat,myLng)
	        map.setCenter(latlng);
			totalMarkers = totalMarkers +1;
			thisPos = latlng;
	        map.setCenter(latlng);
			marker = new google.maps.Marker({map: map, position: latlng});
			bounds.extend(latlng);
		}
		if(totalMarkers > 1) {
			map.fitBounds(bounds);
		}
		   } else {
			varLoc = defaultLatLng.split(',');
			myLat = varLoc[0]; myLng = varLoc[1];
			var latlng = new google.maps.LatLng(myLat,myLng)
	        map.setCenter(latlng);
		   }
		});
	}

Open in new window

0
 
LVL 19

Accepted Solution

by:
Albert Van Halen earned 500 total points
ID: 35034242
I'm not quite sure if you can specify an alternative property in the marker object; I wouldn't do it -> tampering with 3rd party objects...
You could store each marker into an array of custom objects having an id and the marker.

Te delete a specific marker, loop through your array, find the specific id and delete the marker.
var markers = []; // create the array
for(var x = 0; x < 10; x++) {
   var marker = new google.maps.Marker({map: map, position: latlng}); // create a new marker
   markers.push({ "id": x, "marker": marker }); // store object (id, marker) in the array
}

// if you want to delete a specific marker, do it like this

// usage : deleteMarker(3)
// arguments : id - the id of the marker to delete
function deleteMarker(id) {
   var markCount = markers.length;
   for(var x = 0; x < markCount; x++) {
      if(markers[x].id == id) {
         var markerToDelete = markers.splice(x,1)[0].marker;
         markerToDelete.setMap(null);
         break;
      }
   }
}

Open in new window

0
 

Author Closing Comment

by:Lmillard
ID: 35098191
Perfect result thank, sorry for the delay in response but I was sidelined for a few days.
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
This article discusses how to implement server side field validation and display customized error messages to the client.
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question