1

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?

<apex:page showHeader="false"  standardStylesheets="false" cache="false" doctype="html-5.0" controller="NearbyAccountsController">
<html>

<head>
    <title>Nearby Accounts</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/> 

    <!-- jQuery + jQuery Mobile files -->
    <apex:includeScript value="{!URLFOR($Resource.jquery, 'jquery-1.9.1.min.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jquery, 'jquery.mobile-1.4.0.min.js')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.jquery, 'jquery.mobile-1.4.0.min.css')}" />

 <!-- Google Maps -->
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>

    <style>
        body, html {
            height: 100%;   
            width: 100%;
        }
        #nearbyAccountsPage, .ui-content, #map_canvas { 
            width: 100%; 
            height: 100%; 
            padding: 0; 
        }
    </style>

    <script>
        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}";

        $(document).on('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: '<b>' + accountName + '<b>'                       
                });

            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.length; i++) {
                        var acctName = result[i].Name;
                        var acctBillingStreet = result[i].BillingStreet;
                        var acctBillingCity = result[i].BillingCity;
                        var acctBillingState = result[i].BillingState;
                        var acctBillingPostalCode = result[i].BillingPostalCode;
                        var acctLatlng = new google.maps.LatLng(result[i].Geolocation__Latitude__s, result[i].Geolocation__Longitude__s);

                        createMarkerAndInfoWindow(acctName + '<br>' + acctBillingStreet + '<br>' + acctBillingCity + ', ' + acctBillingState + ' ' + acctBillingPostalCode, acctLatlng);
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div data-role="page" id="nearbyAccountsPage">
        <div data-role="header" data-position="fixed">
            <h1>{!account.name}</h1>
            <a href="#" data-role="button" class="ui-btn-right" onclick="getNearbyAccounts();">Show Nearby</a>
        </div>
        <div data-role="content">
            <div id="map_canvas"></div> 
        </div>
    </div>
</body>
</html>
</apex:page>

Here is what it looks like now when you click on "Show Accounts." The red dot with the balloon that says United Hospital I want to be red, but all of the accounts surrounding it I want to be a different color. enter image description here

Improve this question

1 Answer 1

Reset to default
1

Check the answers to similar question on StackOverflow: https://stackoverflow.com/questions/2472957/how-can-i-change-the-color-of-a-google-maps-marker

(you're using v3 of the Google Maps API)

Direct link to documentation: https://developers.google.com/maps/documentation/javascript/markers#simple_icons)

You can either use 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)

The 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 static resource and store it within SF.

Edit to answer the comment

<grumpy rant>

I thought the hints are pretty clear but apparently it's a "pls send teh codez" question... In future please show in the question what you've already tried to solve it / how you tried to apply the answers posted? The sidebar links at https://salesforce.stackexchange.com/questions/how-to-ask are bit aggressive but worth at least skimming through them...

</grumpy rant>

Modify that function so it looks similar to this:

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: '<b>' + accountName + '<b>'
        });

    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 initGmap:

map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
createMarkerAndInfoWindow(accountName, latlng, true);

2nd time is in the loop within getNearbyAccounts():

createMarkerAndInfoWindow(acctName + '<br>' + acctBillingStreet + '<br>' + acctBillingCity + ', ' + acctBillingState + ' ' + acctBillingPostalCode, 
acctLatlng,
false);
Improve this answer
1
  • i know how to change the icons, but when I change them, it changes it for all of them. What I want to see is that the account page they are when they click the "Show Nearby Accounts" I want that account marker to be in red and then when you click on the "Show Nearby" in the pop up window and the other accounts nearby pop up, I want those accounts to be in a different marker color.
    – NewbieDeveloper27
    Commented Jan 22, 2014 at 15:20

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .