Как изменить Google Map Center, нажав кнопку в нескольких направлениях на карте Visualforce Salesforce - PullRequest
0 голосов
/ 07 января 2019

Мой вопрос заключается в том, как настроить кнопки таким образом, чтобы при касании одной из них меня перенаправляли и центрировали карту по адресу выставления счета, а другую - по адресу доставки.

Это кажется немного легким, но я не могу настроить кнопку, чтобы сфокусировать меня на карте по этому адресу.

<apex:page standardController="Account">
    <apex:form >
        <apex:pageBlock title="Redireccionar a la Direccion seleccionada" mode="edit">
            <apex:commandButton value="Billing Address" onClick=";"/>
        </apex:pageBlock>
    </apex:form>

    <div id="map"></div>
    <script type="text/javascript" src="scripts/index.js"></script>
    <script async='async'
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCxcLhv-Ih2eBWuEWN0o0sEES9LToCpzz0&callback=geocodeAddress">
        </script>
    <script>

    var locations = [
        ["{!Account.BillingStreet}","{!Account.BillingCity}", "{!Account.BillingState}","{!Account.BillingCountry}"],
        ["{!Account.ShippingStreet}","{!Account.ShippingCity}","{!Account.ShippingState}","{!Account.ShippingCountry}"]
    ];

    function geocodeAddress() {
        var center = {lat: -34.397,
                      lng: 150.644};
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: center
        });
        ;

        let geocoder = new google.maps.Geocoder();

        for(let i = 0; i < locations.length; i++){
            geocoder.geocode({
                'address': locations[i].join()
            }, function(results, status) {
                if (status === 'OK') { 
                    let marker = new google.maps.Marker({
                        position: results[0].geometry.location,
                        map: map,
                        title: "una dir "+i
                    }); 
                    let infowindow =  new google.maps.InfoWindow({
                        content: locations[i].join()
                    })
                    infowindow.setContent(locations[i]);
                    infowindow.open(map, marker)
                } else {
                    console.log('Geocode was not successful for the following reason: ' + status);
                }
            });
        } 
    }
    </script>
    <style>
        #map {font-family: Arial;
        font-size:12px;
        line-height:normal !important;
        height:300px;
        background:transparent;}
    </style>

</apex:page>
...