What am I doing wrong with Google Map Markers?

[Dan Cuddeford]

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.

[Yurii Orishchuk]

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.

[Dan Cuddeford]

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

[Yurii Orishchuk]

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.

[Dan Cuddeford]

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?

[Dan Cuddeford]

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

[Kateryna Grynko]

Hi Dan,

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

[Dan Cuddeford]

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);

[Kateryna Grynko]

Hi Dan,

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

[Dan Cuddeford]

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.