html CRM 2016 #G​​oogle #Geolocation #Webresource＃CRM2016 #MoussaElAnnan

Posted 2021-05-11

<!--Usage: ParseAddress(address);-->
<div id="geolocation" style="width: 800px; height: 500px;">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<script>
//&amp; = &
//In this example I am using HTTP.
//In your HTML web resource, first function you want to call on page load is a function that takes the value of the address fields, and concatenates it all into a string. 
//It will be along the lines of:

var _address = street + city + province + country + postalCode;

//check and use only the fields where you have a value populated.
//Once you have this address as a string, pass it to the first function that converts the address into latitude and longitude. This will look as follows:
ParseAddress: function(address) { 
    var url = "http://maps.googleapis.com/maps/api/geocode/json?" + 
    "address=" + address + 
    "&sensor=false"
    var xhr = base.createCORSRequest(‘GET’, url); 
    if (!xhr) { 
        alert(‘CORS not supported’); 
        return; 
    }
    // Response handlers. 
    xhr.onload = function () { 
        var text = xhr.responseText; 
        var _start = text.indexOf("\"location\" :") + 12; 
        var _location = text.substring(_start, text.indexOf("}", _start) + 1);

        geoCode.Initialize(_location); 
    };
    xhr.onerror = function () { 
        $("#message-area").append("Woops, there was an error retrieving server data."); 
    };

    xhr.send(); 
},

//This example is using CORS. CORS stands for “Cross-Origin Resource Sharing”, and for more details on CORS see the W3C documentation HERE.
//This function makes a call to the Google API and on successful retrieval of data, calls another function called Initialize, 
//passing the trimmed returned string that includes the location lat and lng.
//The Initialize function takes this location, builds the map representation, sets the zoom on it, and drops a pin at the location provided by the coordinates:
Initialize: function (_location) {

    var jsonData = $.parseJSON(_location); 
    var _bGeoLocation = new Array(); 
    _bGeoLocation = jsonData;  

    var myOptions = { 
        zoom: 16, 
        center: new google.maps.LatLng(_bGeoLocation .lat, _bGeoLocation .lng), 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    // Draw the map 
    var mapObject = new google.maps.Map(document.getElementById("geolocation"), myOptions); 
    // Place the marker 
    new google.maps.Marker({ map: mapObject, position: userLatLng }); 
};
</script>
</div>