0

mi questions is, how to configure the buttons so that when I touch on one of them I will be directed and center the map to billing address and another to shipping address. It seems a bit easy, but I can not configure the button to focus me on the map to that address. if you could give me a solution? Thank you!

https://imgur.com/a/8jSPNj8

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

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.