Change Google Map marker color with external jQuery -
i'm using function draw marker:
function pinsymbol(color) { return { path: 'm31.5,0c14.1,0,0,14,0,31.2c0,53.1,31.5,80,31.5,80s63,52.3,63,31.2c63,14,48.9,0,31.5,0z m31.5,52.3 c-11.8,0-21.4-9.5-21.4-21.2c0-11.7,9.6-21.2,21.4-21.2s21.4,9.5,21.4,21.2c52.9,42.8,43.3,52.3,31.5,52.3z', fillcolor: color, fillopacity: 1, strokecolor: '#000', strokeweight: 0, scale: 1, }; }
and marker:
var marker = new google.maps.marker({ position: map.getcenter(), icon: pinsymbol("#fff"), //defined marker color labeltext: 'here are', labelvisible: true, labelclass: "label", labelzindex: 99, draggable: false, map: map });
i have color pallete in other file jquery script changes lot of colors on page when user choose color, don't know how change color of marker also.
can somehow change color of marker externaly, in other file?
when create variable using var keyword in javascript local variable. if want reach variable javascript file, need pass reference around or use global variable. global variable approach, easiest understand in long run hardest maintain, may following:
createmap.js
<script type="text/javascript"> function pinsymbol(color) { return { path: 'm31.5,0c14.1,0,0,14,0,31.2c0,53.1,31.5,80,31.5,80s63,52.3,63,31.2c63,14,48.9,0,31.5,0z m31.5,52.3 c-11.8,0-21.4-9.5-21.4-21.2c0-11.7,9.6-21.2,21.4-21.2s21.4,9.5,21.4,21.2c52.9,42.8,43.3,52.3,31.5,52.3z', fillcolor: color, fillopacity: 1, strokecolor: '#000', strokeweight: 0, scale: 1, }; } function initialize() { var mapoptions = { center: { lat: -34.397, lng: 150.644}, zoom: 8 }; var map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); var marker = new google.maps.marker({ position: map.getcenter(), icon: pinsymbol("#fff"), //defined marker color labeltext: 'here are', labelvisible: true, labelclass: "label", labelzindex: 99, draggable: false, map: map }); // global variables set window.currentmap = map; window.mainmarker = marker; } google.maps.event.adddomlistener(window, 'load', initialize); </script>
anothermapscript.js
<script type="text/javascript"> var marker = window.mainmarker; marker.seticon(pinsymbol('#f20')); </script>
Comments
Post a Comment