What am I doing wrong with Google Map Markers?

[Yurii Orishchuk]

Hi Dan,

Sorry but i must to ask again:

Did you place given(and following) code in your event without any modifications(except of map component name):

pre

//Note: you need replace "map" with your google map component name.
var map = Appery("map").options.mapElement.gmap('get', 'map');
var markerLatLng = new google.maps.LatLng(37.80483, - 122.4085648);
var marker = new google.maps.Marker({
position: markerLatLng,
map: map,
animation: google.maps.Animation.DROP,
title: "SF"
});

/pre

I've tried it and it works fine for me.

Please don't add any else code to it.. It's very important to get this code work. If you add anything else this code could be wrong.

If after you use this code you still have this problem. Please give us your app public link and describe steps how we can reproduce this problem.. We need to see it.

Thanks and regards.

[Dan Cuddeford]

I apologize for not giving you a clear answer earlier.
Yes - you code does work and I can place markers all over the place.
The same is true is I initialize the map variable as
var map = Appery('map');

I cannot however use any map options. Whenever I try to set any map options, I can no longer place markers. e.g.
var map = new google.maps.Map(Appery("map").get(0), mapOptions);

I really need to render the map with options to remove street view, set min/max zoom etc etc. Surely someone before me has rendered a map in appery without the default options?

[Dan Cuddeford]

Would you like me to provide a public link still? Shall I enable the code that renders with custom options?

[Yurii Orishchuk]

Hi Dan,

Ok, now it's clear,

So for your goals code should be:

pre

//Note: you need replace "map" with your google map component name.
var map = Appery("map").options.mapElement.gmap('get', 'map');

map.setOptions({
//Use here center coords you need
center: new google.maps.LatLng(37.80483, - 122.4085648),
zoom: 16,
streetViewControl: false,
panControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
})

var markerLatLng = new google.maps.LatLng(37.80483, - 122.4085648);
var marker = new google.maps.Marker({
position: markerLatLng,
map: map,
animation: google.maps.Animation.DROP,
title: "SF"
});

/pre

Note: you need to change "center" coordinates in accordance with your needs.

Regards.

[Vinny B]

Yurii of course your code works perfect,

I have three buttons on my page. Each button shows a different marker.
I want a fourth button that will remove all the markers. Is it possible?

How do I remove all the markers.

I tried to use full screen refresh but the markers are still there. I exit the page and when i navigate to the map page all the markers are still visible.

Thank You
Vinny

[Alena Prykhodko]

Hello,

Please read Remove Marker section https://developers.google.com/maps/do...

[Blair Cox]

Okay, how can I take that code - which works - and run it to add pins for all entries in my local storage array?

[Vinny B]

I use this code to get the locations from local storage array on button click. And that part works fine the problem I'm having is the marker title won't show on the device. But the code will get the lat and lon from local storage and place all the pins on the map.

https://c.getsatisfaction.com/apperyi...

[Blair Cox]

Okay, I can get that to work simply by mapping to map marker - pins show up. But it also doesn't populate the marker information. It works ONLY if there is one. Someone else mentioned it will show only on the last marker.

Does anyone get this to work??? Seriously huge problem for us!!

[Vinny B]

Don't map it to map marker. Map it to local storage. I map all the data from the database to local when the app loads then on another page I have the Google map. The user clicks a button and all the markers show. Except the titles don't work. I did find that I had to use the test app button instead of the refresh button in order for the code to make changes .