如何通过在地图Visualforce Salesforce上单击多个方向的按钮来更改Google Map Center

时间:2019-01-07 02:14:46

标签: google-maps button salesforce apex visualforce

我的问题是如何配置按钮,以便当我触摸其中一个按钮时,我将被指示并将地图集中到帐单地址,另一个在送货地址中心。

这似乎有点简单,但是我无法配置按钮以将我的注意力集中在该地址的地图上。

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

0 个答案:

没有答案