Page 1 of 1

Map marker - custom icon

Posted: Wed Jun 03, 2015 3:41 pm
by Alberto da Silva

I have a page that has a Google Map component with latitude and longitude (location and marker) mapped to local storage variables coming from Parse.

This is working fine, but I would like the marker to display a custom image that I have uploaded to Media Manager. Can someone please tell me how to do this? Also, how do I reference an image uploaded to Media Manager?

Sincerely,

Alberto da Silva


Map marker - custom icon

Posted: Wed Jun 03, 2015 3:53 pm
by Joe7349603

Alberto,

I am no expert in this but I was recently playing around and saw this code from Google which you can try: In my case I am placing the markers dynamically through code.

code
var image = 'images/beachflag.png';
// in your case reference the image in media manager
icon: image
/code

Again, I have not implemented this myself I am using default code but I have this same exact commented code in my App and plan to implement it. I am sure it should work.

The other consideration is whether you are placing the marker dynamically or not because I think this will only work if you are placing them dynamically.

Check this link may be helpful: https://developers.google.com/maps/do...


Map marker - custom icon

Posted: Wed Jun 03, 2015 5:50 pm
by Serhii Kulibaba

Hello Alberto,

Please follow this topic:
https://getsatisfaction.com/apperyio/...


Map marker - custom icon

Posted: Wed Jun 03, 2015 10:10 pm
by Alberto da Silva

Hi Sergiy,

I added the code above to a JavaScript that is called by a button on the Display page, but when I press it nothing happens.

Could you please let me know what I'm doing wrong.

Sincerely,

Alberto da Silva

Image

Image


Map marker - custom icon

Posted: Wed Jun 03, 2015 10:14 pm
by Alberto da Silva

I have hardcoded latitude and longitude and it is still not working. Please assist.

Image


Map marker - custom icon

Posted: Wed Jun 03, 2015 10:30 pm
by Alberto da Silva

Hello,

I was able to add a custom marker with the code below. I think I can modify it to get what I want now. Thanks.

var location = new google.maps.LatLng(-25.363882,131.044922);
var image = 'http://appery.io/app/rest/html5/ide/s...';

var myOptions = {
zoom: 4,
center: location,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map($('div[dsid="googleMap"]').get(0), myOptions);

var marker = new google.maps.Marker({
position: location,
map: map,
title:"Hello World!",
icon: image
});