Changing Google Map Icon Color

[Fitz]

Hello,

I have implemented google maps within my app. However i cannot work out how to allow the user to dynamically change the Map Icon Color.

Here is the code i am using:

put the uGoogleMap of this stack into lamorce
put empty into lesData1
put empty into lesData2
set itemdelimiter to tab
repeat with i = 1 to the number of lines of aTraiter

put item 1 of line i of atraiter into leNom
put item 2 of line i of atraiter into lesCoordonnees

put "var latlngPos"&i&" = new google.maps.LatLng("&lesCoordonnees&");"&cr after lesData1

put "var marker = new google.maps.Marker({"&cr after lesData2
put "position: latlngPos"&i&","&cr after lesData2
put " map: map,"&cr after lesData2
put "title: "&quote&leNom&quote&"});"&cr after lesData2

end repeat

if the number of lines of aTraiter > 5 then
replace "[DATAZOOM]" with "zoom: 6," in lamorce
else
replace "[DATAZOOM]" with "zoom: 10," in lamorce
end if
replace "[DATA1]" with lesData1 in lamorce
replace "[DATA2]" with lesData2 in lamorce

put the effective filename of this stack into tPath
set the itemDelimiter to slash
delete last item of tPath
put "file:"&tPath&"/googlemap.html" into abc
put lamorce into url abc
launch url "file:"&tPath&"/googlemap.html"

any help would be greatly appreciated.

[richmond62]

It would help matters a lot if:

1. You could post the Google Icon here.

2. Explain under what circumstances you want it to change colour.

[Dixie]

Hi..

There is a good explanation here of how to use different coloured markers on a google map...
http://stackoverflow.com/questions/7095 ... 1#18623391

[Bellballer1]

Hello!
This thread has been very helpful in showing me how to finally use lettered or numbers markers instead of the default marker in the google maps API. I can get the default marker to show up on my map, but I am having trouble getting the numbered marker to appear. When I use the "icon:" part of the code, my map does not appear at all.
Here is the code I am using (which is pretty much the code taken from the "googleMapAPI in Day 2 of the "Map" app in the"Create it with LIveCode Materials").

put "var pinImage = new google.maps.MarkerImage('https://chart.googleapis.com/chart?chst ... 256|000000';" & return after tMarkerCode
put "var " & pName & " = new google.maps.Marker({" & return into tMarkerCode
put "position: new google.maps.LatLng(" & sMarkers[pName]["pos"] & ")," & return after tMarkerCode
put "map: map," & return after tMarkerCode
put "icon: pinImage," & return after tMarkerCode // this is the line that causes my map to not appear at all when I use it
put "title:'" & sMarkers[pName]["title"] & "'" & return after tMarkerCode
put "});"& return after tMarkerCode

Although I think I am close to getting the number/letter marker to appear, I could also be totally off. Any help would be greatly appreciated. Thanks!

[SparkOut]

The second line puts code INTO tMarkerCode and so overwrites the pinImage line so if you use the pinImage variable later it will not be defined.
There may be some other code problems - it looks like closing brackets might be missing here or there but can't check from here on this phone. It might just work with the into/after business changed. If not, answer tMarkerCode and see what it looks like.

[Bellballer1]

Hi Sparkout,

Thanks for the reply (there were electrical issues in my area yesterday so I could not use my computer). I have tried the corrections you recommended, but nothing has worked thus far. I will continue to give it a try.

[Bellballer1]

Btw, I got it working. This is the code below

local tMarkerCode, tPlaceJson, tPlaceArray
put "var " & pName & " = new google.maps.Marker({" & return into tMarkerCode
put "icon: 'https://chart.googleapis.com/chart?chst ... 256|000000|'," & return after tMarkerCode
put "position: new google.maps.LatLng(" & sMarkers[pName]["pos"] & ")," & return after tMarkerCode
put "map: map," & return after tMarkerCode
put "title:'" & sMarkers[pName]["title"] & "'" & return after tMarkerCode
put "});"& return after tMarkerCode


Thanks for the pointers!

[okk]

Hi,
I am addressing the OP here. In the code that was posted the crucial info that creates the actual html page "googlemap.html" is in the custom property "uGoogleMap" It contains a HTMl/Javascript template. If you need to create a custom marker icon or do any other sort of overlay you must change the content of that custom property. The original sample stack with this code was posted by Bangkok at http://forums.livecode.com/viewtopic.php?f=7&t=13547

I found this website useful in understanding the javascript required to apply different overlays to google maps:
http://www.w3schools.com/googleapi/goog ... erlays.asp

Best
Oliver