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

How do I remove map markers?

I tried your code on page load:

pre
Appery("googlemap_57").options.mapElement.bind('init',function(evt, map) {
var map = Appery("googlemap_57");
map.options.latitude = 48.8534100;
map.options.longitude = 2.3488000;
map.options.address = '';
map.options.mapElement.gmap(
{ 'center': new google.maps.LatLng(48.015883, 37.80285), 'zoom': 5}
);
map.refresh();
});
/pre

I received the error:
Uncaught TypeError: Cannot read property 'getBounds' of null

The only component on the page is the map.
the only event is this page load event.

Image

Image

I've also tried it with no Latitude or Longitude values in the Properties panel.
I got the error again.

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

How do I remove map markers?

Any idea what is causing this?

Alena Prykhodko
Posts: 0
Joined: Tue Apr 09, 2013 7:36 am

How do I remove map markers?

Hello Joe,

Sorry for delay here. We'll reply as soon as possible.
This will take time.

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

How do I remove map markers?

Thank you

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

How do I remove map markers?

Hi Joe,

So this code works correctly?

Your map navigates to "Paris" as you want?

The problem you have is "Error in console"?

If so please show us how you set map component and marker component. (screen shout of properties for these components).

Thanks.

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

How do I remove map markers?

yes everything works fine now, setting the map marker, setting directions from current location and clearing markers.
But i still receive the error.

on page show I have a read database service (Info_Rest) that populates components on the page (such as labels). also the Address is mapped to local storage.
Image

on service success a 'convertAddress' is invoked.

Image

Image

Image

On success JS is run:
codeinitializeN();/code

JS file:
pre

var mapN;
var boundsN = new google.maps.LatLngBounds();
var mapN = Appery("googlemapNight").gmap;
var directionsServiceN = new google.maps.DirectionsService();
var boundsN;
var directionsDisplayN = new google.maps.DirectionsRenderer();

function displayDirectionsN(sourceAddress, destinationAddress, mapN) {
var request = {
origin: sourceAddress,
destination: destinationAddress,
travelMode: google.maps.DirectionsTravelMode.DRIVING,

Code: Select all

 }; 
 directionsServiceN.route(request, function(response, status) { 

directionsDisplayN.setMap(mapN);
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplayN.setDirections(response);
} else {
alert("Directions query unsuccessful. Response status: " + status);
}
});

}

var mlatN = localStorage.getItem('markerLatN');
var mlngN = localStorage.getItem('markerLngN');

function initializeN() {
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(mlatN, mlngN)
};
mapN = new google.maps.Map(document.getElementById('NightInfo_googlemapNight'),
mapOptions);

var markerLatLng = new google.maps.LatLng(localStorage.getItem('markerLatN'), localStorage.getItem('markerLngN'));

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

mapN.setCenter(markerLatLng);
mapN.setZoom(14);

/pre

I also have another button 'getDirections' on the page that uses a geolocation service and displays directions.

Image

on success JS:
pre
var mapN = new google.maps.Map(document.getElementById('NightInfo_googlemapNight'));

var directionsServiceN = new google.maps.DirectionsService();
var boundsN;
var directionsDisplayN = new google.maps.DirectionsRenderer();

var GeoLatN = localStorage.getItem('GeoLat');
var GeoLngN = localStorage.getItem('GeoLng');

var GeoLatLngN = GeoLatN + ", " + GeoLngN;
var DestinationLatLngN = new google.maps.LatLng(localStorage.getItem('markerLatN'), localStorage.getItem('markerLngN'));

var sourceAddress = GeoLatLngN;
var destinationAddress = DestinationLatLngN;
displayDirectionsN(sourceAddress, destinationAddress, mapN);
/pre

I also have a 'clearDirections' button to clear the directions:
pre

directionsDisplayN.setMap(null);
initializeN();
/pre

When the page shows I receive the error:
Image

If I click the getDirections button i don't receive the error again.
If I click the clearDirections I don't receive the error again.
I added a 2 test buttons. one to invoke the 'Info_Rest' service and one to invoke the 'convertAddress' service.

If i click the convertAddress button I don't receive the error again.
If I click the Info_Rest button I DO receive the error.

Info_Rest service in detail:
before:
Image

on success:
Image

Image

Night description JS:
pre
if(!value) {
return ("");
}
/pre

All the GRID_X elements have very similar JS:
for example
GRID_DAY js:
pre
console.log("Day = " + value.Day);
if(value.Day){
Apperyio("GRID_Day").show();
}

else{
Apperyio("GRID_Day").hide();
}
/pre

GRID_Genre js:
pre
console.log("Genre = " + value.GenreInfoPage);
if(value.GenreInfoPage){
Apperyio("GRID_Genre").show();
}

else{
Apperyio("GRID_Genre").hide();
}

/pre
basically hiding the grid component if the value doesnt exist. and showing if the value does exist.

Image

mobilelabel_106 / ClubDescription_Label / GRID_VenueTel js:
pre
if (!value){
return false;
}
else {
return true;
}/pre

ClubWebsite_Label js:
pre
if (!value){
return "";
}

if (value){
return "Website";
}
/pre

Image

that is all the mapping to the page.
i also map 1 local storage variable as mentioned already

Image

I also 2 other services on the page ('rating' and 'CheckFavs4Night'). usually I have them invoked on 'Info_Rest' success. but in order to isolate what's causing the error I have these services run on click of test buttons on the page.

'rating' service doesnt cause the error to be seen.
but 'CheckFavs4Night' does cause the error to show.

CheckFavs4Night:

Image

LS session token is mapped to the session token header.
Js on where:
pre
return '{"$and": [{"Source_id":"' + value + '"},{"Nightlife_Type":"Night"}]}';/pre

Response:

Image

JS on notFaveGrid:
pre
if (!value) {
return true;
}

else return false;/pre

js on FavedGrid:
pre
if (!value) {
return false;
}

else return true;
/pre

so it appears that when 'Info_Rest' and 'CheckFavs4Night' are invoked the error is seen.
but neither of these are related to the map, also neither of these affect the map when they are invoked, so the end result for the user is the same. the services work fine and the map works fine.
My main concern is whether apple will reject the app because it continually receives this error when the page is shown.

Thanks for all of your efforts and time towards this problem. I hope my detailed response will help identify the cause.

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

How do I remove map markers?

We are sorry for delay.

You shoud init map variable before it's using. E.g.: http://stackoverflow.com/questions/28...

Return to “Issues”