Forum | Appery.io

Hey all,

I cannot get my map to display a marker if I have set map options

var mapOptions = {
center: new google.maps.LatLng(localStorage.getItem("lat"), localStorage.getItem("lng")),
zoom: 16,
streetViewControl: false,
panControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(Appery("map").get(0), mapOptions);

//var map = Appery('map');
map.options['address']='';

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"
});
map.refresh();

What am I doing wrong? The marker never shows.

Hi Dan,

Please use following code instead of yours to add marker to the google map component:

pre

//Note: you need replace "googlemap_1" with your google map component name.
var map = Appery("googlemap_1").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

Regards.

Sure thing thanks. My map is called 'map' so I added this to my geolocation service success code
var mapOptions = {
center: new google.maps.LatLng(localStorage.getItem("lat"), localStorage.getItem("lng")),
zoom: 16,
streetViewControl: false,
panControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(Appery("map").get(0), mapOptions);

var map2 = Appery("map").options.mapElement.gmap('get', 'map');

//var map = Appery('map');
map.options['address']='';

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

And it didn't work.

I placed the code on a button and that didn't work either

Nope Dan,

Only given code should be placed in event editor.

Don't add anything else.

When you will get it work with given code you can improve you code step by step with testing it on each step.

Regards.

I placed in a single event and it still did not work. It is only when I remove the map options of
var mapOptions = {
center: new google.maps.LatLng(localStorage.getItem("lat"), localStorage.getItem("lng")),
zoom: 16,
streetViewControl: false,
panControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(Appery("map").get(0), mapOptions);

in the geolocation success and replace with just

var map = Appery('map');

That I can get this to work. How can I get marker drops working when using custom mapOptions?

I've been playing around with this but I still cannot make any marker drop work when I setup a map with options

Hi Dan,

Please set a map component Map equal to a newly created map:preAppery("map").gmap = map;/pre

Hi Katya, where shall I add this

var mapOptions = {
center: new google.maps.LatLng(localStorage.getItem("lat"), localStorage.getItem("lng")),
zoom: 16,
streetViewControl: false,
panControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(Appery("map").get(0), mapOptions);

Hi Dan,

After:prevar map = new google.maps.Map(Appery("map").get(o), mapOptions);/pre

I placed it here but still markers do not come up
var mapOptions = {
center: new google.maps.LatLng(localStorage.getItem("lat"), localStorage.getItem("lng")),
zoom: 16,
streetViewControl: false,
panControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(Appery("map").get(0), mapOptions);
Appery("map").gmap = map;

If I initialize the map without the options

var map = Appery('map');

Then everything works fine.

I just want to have my Map display without the controls etc.