Salesforceで地図を表示しよう！（GoogleMapsAPI編）

<apex:page controller="GoogleMapExampleController" lightningStylesheets="true">
    <script type="text/javascript" async="true" src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"></script>
    <script>
    var currentInfoWindow = null;
    
    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 3,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: true
        });
        var accounts =  JSON.parse('{!JSENCODE(jsonAccounts)}');
        for(var i in accounts){
            createMarker(map, accounts[i]);
        }
    }
    
    function createMarker(map, acc){
            var latlng = new google.maps.LatLng(acc.BillingLatitude, acc.BillingLongitude);

            map.setCenter(latlng);

            var marker = new google.maps.Marker({
                position: latlng, 
                map: map, 
                icon: 'http://maps.google.com/mapfiles/ms/micons/red-pushpin.png',
                title: acc.Name
            });
            
            var infowindow = new google.maps.InfoWindow({
                content: acc.Name,
                size: new google.maps.Size(200,30)
            });
            
            google.maps.event.addListener(marker, 'click', function() {
                if (currentInfoWindow) {
                    currentInfoWindow.close();
                }           
                infowindow.open(map, marker);
                currentInfoWindow = infowindow;
                map.panTo(latlng);
                selectMarker(acc.Id);
            });
    }
    </script> 
    <h1>Select Account</h1>
        <apex:form >
        <apex:actionFunction name="selectMarker" action="{!selectMarker}" rerender="accountName">
            <apex:param name="id" value="" assignTo="{!selectedAccoutId}"/>
        </apex:actionFunction>
            
        <apex:outputField id="accountName" label="取引先：" value="{!selectedAccout.name}"/>
        <div id="map" style="height:500px;" />
    </apex:form>
</apex:page>

public class GoogleMapExampleController {
    private Map<Id, Account> accounts {get;set;}
    
    public Id selectedAccoutId {get;set;}
    
    public Account selectedAccout {get;set;}

    public GoogleMapExampleController() {
        this.accounts = new Map<Id, Account>([SELECT Id, Name, BillingLatitude, BillingLongitude FROM Account]);
    }
    
    public String getJsonAccounts(){
        return JSON.serialize(this.accounts.values());
    }
    
    public void selectMarker(){
        if(this.accounts.containsKey(this.selectedAccoutId)){
            this.selectedAccout = this.accounts.get(this.selectedAccoutId);
        }
    }
}