Can I change the Google Map Marker Color in the Apex Code?
I want to be able to change the "Nearby Accounts" that will pop up when you click on the button "Show Nearby Accounts" to be a different color than the account that you are originally looking at. Is this possible?
[removed][removed] <style> body, html { height: 100%; width: 100%; } #nearbyAccountsPage, .ui-content, #map_canvas { width: 100%; height: 100%; padding: 0; } </style> [removed] var map; var lat = {!account.Geolocation__Latitude__s}; var lng = {!account.Geolocation__Longitude__s}; var accountName = "{!account.Name}"; var accountbillingstreet = "{!account.billingstreet}"; var accountbillingcity = "{!account.billingcity}"; var accountbillingstate = "{!account.billingstate}"; var accountbillingpostalcode = "{!account.billingpostalcode}"; $[removed]('pageshow', '#nearbyAccountsPage', function() { initGmap(); }); function initGmap() { var latlng = new google.maps.LatLng(lat, lng); var mapOptions = { center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, zoom: 13, // The following options are added to optimize for mobile screens. mapTypeControl: false, streetViewControl: false, scaleControl: false, rotateControl: false, panControl: false, zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL, position: google.maps.ControlPosition.LEFT_TOP } }; map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); createMarkerAndInfoWindow(accountName, latlng); } function createMarkerAndInfoWindow(accountName, latlng) { var marker = new google.maps.Marker({ position: latlng, title: accountName, map: map, }); var infoWindow = new google.maps.InfoWindow({ content: '' + accountName + '' }); google.maps.event.addListener(marker, 'click', function() { infoWindow.open(map, marker); }); } function getNearbyAccounts() { NearbyAccountsController.getNearbyAccounts(lat, lng, function (result, event) { if (event.status) { for (i = 0; i < result xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed>' + acctBillingStreet + '
' + acctBillingCity + ', ' + acctBillingState + ' ' + acctBillingPostalCode, acctLatlng); } } }); } [removed]' + acctBillingCity + ', ' + acctBillingState + ' ' + acctBillingPostalCode, acctLatlng); } } }); } [removed]
To solve google maps marker color you can either use a different icon or really really draw a polygon, fill it with colors... In your case I'd add some parameter to the function, maybe createMarkerAndInfoWindow(accountName, latlng, isPrimary). Or just pass the selected icon URL as 3rd param? createMarkerAndInfoWindow(accountName, latlng, iconUri) Modify that function so it looks similar to this:he standard google marker icon will be somewhere here (warning, the page is LONG): https://sites.google.com/site/gmapsdevelopment/ and http://kml4earth.appspot.com/icons.html for example. It will probably be best to download the markers you want to a static resource and store it within SF
function createMarkerAndInfoWindow(accountName, latlng, isPrimary) { // here var marker = new google.maps.Marker({ position: latlng, title: accountName, map: map, // and here icon: isPrimary ? 'https://www.google.com/mapfiles/arrow.png' : 'https://maps.google.com/mapfiles/kml/paddle/ylw-blank.png' }); var infoWindow = new google.maps.InfoWindow({ content: '' + accountName + '' }); google.maps.event.addListener(marker, 'click', function() { infoWindow.open(map, marker); }); }Then look for instances where this function is called and add the parameter to the call. 1st time is inside initmap:
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); createMarkerAndInfoWindow(accountName, latlng, true);
2nd time is in the loop within getNearbyAccounts():
createMarkerAndInfoWindow(acctName + '' + acctBillingStreet + '' + acctBillingCity + ', ' + acctBillingState + ' ' + acctBillingPostalCode, acctLatlng, false);