How do I remove map markers?

This forum contains topics that were moved from Get Satisfaction
Joe Sharples
Posts: 0
Joined: Mon Aug 18, 2014 1:31 pm

How do I remove map markers?

Post by Joe Sharples »

Hi Yurii.

Thanks for all your effort towards this problem.

I tried adding setting "29 Jackson's Row, Manchester M2 5WD " address for the component and marker, but this still caused the error to show.

I have changed the way the map is set up again.
I've created an additional read service (MapService) where the address is mapped to the map and marker.
I've removed all JS files relating to the map.

The map is now working without receiving the error.
I call the MapService before any other service on the page and this seems to work.

I'm still not sure what was causing the problem though.

now back to the original question.
how do i remove the map markers?

I've tried using the following function:

pre
var aofmarkers = [];

function RemoveMarkersFromMap( ) {

var i ;
for ( i = 0; i < aofmarkers&#46;length; i++) {
aofmarkers&#46;setMap (null);

Code: Select all

 } 

aofmarkers = [];
}/pre

on mapping to from address to maker in the MapService I added JS:

aofmarkers.push(maker1);
// marker1 is the marker name on component

on calling the function i received the error:
Uncaught TypeError: aofmarkers.setMap is not a function

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

How do I remove map markers?

Post by Evgene Karachevtsev »

Hello Joe,

We are sorry for delay, we are working on it and will get back to you with the update.

Joe Sharples
Posts: 0
Joined: Mon Aug 18, 2014 1:31 pm

How do I remove map markers?

Post by Joe Sharples »

thank you Evgene

Joe Sharples
Posts: 0
Joined: Mon Aug 18, 2014 1:31 pm

How do I remove map markers?

Post by Joe Sharples »

Any updates?

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

How do I remove map markers?

Post by Yurii Orishchuk »

Hi Joe,

Unfortunatly you can not remove markers from gmap component if the was added with mapping.

To remove markers you need to handle them and store somewhere(for example in Array).

Only way to do it with google map component to create markers manually with JS code. For example this:

pre

Code: Select all

 if(!self&#46;markerArrays) 
     self&#46;markerArrays = [];  

 var map = Appery("multiGoogleMap")&#46;options&#46;mapElement&#46;gmap('get', 'map'); 

 &#47;&#47;data is object {lat: 14&#46;2, long: 23, location: "some title"} 
 var CreateMarker = function(data){ 
     console&#46;log(data&#46;lat + " = " + data&#46;long); 

     var marker = new google&#46;maps&#46;Marker({ 
         position: new google&#46;maps&#46;LatLng(data&#46;lat, data&#46;long), 
         map: map, 
         title: data&#46;location 
     }); 

     self&#46;markerArrays&#46;push(marker); 
 }; 

CreateMarker({lat: 23, long: 35, location: "someTitle" }); 

/pre

After you can remove all markers added with way above with following JS code:

pre

Code: Select all

 for ( i = 0; i < self&#46;markerArrays&#46;length; i++) { 
     self&#46;markerArrays[i]&#46;setMap (null); 
 } 

/pre

Regards

Joe Sharples
Posts: 0
Joined: Mon Aug 18, 2014 1:31 pm

How do I remove map markers?

Post by Joe Sharples »

Hi Yurii,

I couldn't get it to work using your code. so I changed it to:

pre
var map;
function initializeN() {
var mapOptions = {
zoom: 16,
center: new google&#46;maps&#46;LatLng(53&#46;480557, -2&#46;242407)
};
map = new google&#46;maps&#46;Map(document&#46;getElementById('NightInfo_googlemapNight'),
mapOptions);

get_address&#46;execute();

}
/pre

get_address is a read service that saves the address in the local storage. google's convert service (https://maps.googleapis.com/maps/api/...) is then called, and the lat lng values are mapped to local storage in the response. On success the JS is run:
pre
var markerLatLng = new google&#46;maps&#46;LatLng(localStorage&#46;getItem('markerLat'), localStorage&#46;getItem('markerLng'));

var marker = new google&#46;maps&#46;Marker({
position: markerLatLng,
map: map,
animation: google&#46;maps&#46;Animation&#46;DROP
});

aofmarkers&#46;push(marker); &#47;&#47; for removing map markers

map&#46;setCenter(markerLatLng);
map&#46;setZoom(15);

/pre

This works, but then if I call a different read service and map the response to a label on the page I get the "Uncaught TypeError: Cannot read property 'getBounds' of null" error.

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

How do I remove map markers?

Post by Yurii Orishchuk »

Hi Joe,

why do you reinit map with this code?

pre

var map;
function initializeN() {
var mapOptions = {
zoom: 16,
center: new google&#46;maps&#46;LatLng(53&#46;480557, -2&#46;242407)
};
map = new google&#46;maps&#46;Map(document&#46;getElementById('NightInfo_googlemapNight'),
mapOptions);
get_address&#46;execute();
}

/pre

If you just need to set coordinates and zoom you do it with current map(without reinitialization).

Here is a code example:

pre

Appery("googlemap_57")&#46;options&#46;mapElement&#46;bind('init',function(evt, map) {

Code: Select all

var map = Appery("googlemap_57"); 
map&#46;options&#46;latitude = 48&#46;8534100; 
map&#46;options&#46;longitude = 2&#46;3488000; 
map&#46;options&#46;address = ''; 
map&#46;options&#46;mapElement&#46;gmap( 
   { 'center': new google&#46;maps&#46;LatLng(48&#46;015883, 37&#46;80285), 'zoom': 5} 
); 
map&#46;refresh(); 

});

/pre

Regards.

Joe Sharples
Posts: 0
Joined: Mon Aug 18, 2014 1:31 pm

How do I remove map markers?

Post by Joe Sharples »

Where should I use this code?
I removed all other code and put the code on a page show event.

the code worked but i still received the error:

Uncaught TypeError: Cannot read property 'getBounds' of null

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

How do I remove map markers?

Post by Yurii Orishchuk »

Hi Joe,

Please find a culprit of this error.
You can disable/comment code one by one to see what actually brings this problem.

Regards.

Joe Sharples
Posts: 0
Joined: Mon Aug 18, 2014 1:31 pm

How do I remove map markers?

Post by Joe Sharples »

I have been trying to figure out the culprit for months and I can't.

I am going to rebuild the whole page starting with the map first.
Then I will add all missing components and services one-by-one and test after each one to see if the error returns.

Can you help me build the map so it working correctly without any errors?
I think this will be the quickest way to solve this problem.

The map will have only 1 marker at at time. The marker lat and long values are stored in local storage (markerLat, markerLng).

The markerLat and markerLng values are set dynamically on the previous page. (I have a dynamic list on the previous page, when you click an item in the list the markerLat and markerLng variables are set for that item and then app navigate to the new page where the map is).

What shall i do now?

Post Reply