Recently, I developed a program that involves passing data to an iframe through a URL. However, due to the limitation of Internet Explorer supporting only 2083 characters in a URL, I decided to use the Google URL Shorten API to shorten the URL before sending it as an argument. The plan was to later retrieve the long URL using the shortened URL and extract the necessary data.
The challenge I encountered was calling two APIs within the same program.
Below is a snippet of the code where I fetch the long URL from Google and then initialize the map. According to my logic, we need to first extract the data from the long URL before we can pinpoint the markers on the map. Therefore, initializing the map before calling the Google shorten URL API is not feasible.
Check out the code below -
<html>
<head>
</head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function makeURLShortenApiCall(){
var shortUrl="";
gapi.client.setApiKey('AIzaSyDQo3yvYTgw7pdfGTRz6zanq41rhymA-N8');
gapi.client.load('urlshortener', 'v1',function(){
var shortUrl="http://goo.gl/AWGcY4";
var request = gapi.client.urlshortener.url.get({
'shortUrl': shortUrl,
'projection':'FULL'
});
request.execute(function(response)
{
if(response.longUrl!= null)
{
console.log(response.longUrl);
initialize();
}
else
{
alert("error: "+response.error);
}
});
});
}
</script>
<script src="https://apis.google.com/js/client.js?onload=makeURLShortenApiCall"></script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("Map"),mapProp);
}
</script>
<body>
<div id="googleMap" style="width:500px;height:380px;" class="absolute"></div>
</body>
</html>
Upon running the program, an error message popped up saying -
Uncaught TypeError: Cannot read property 'offsetWidth' of null
I'm currently stuck with this issue. Any suggestions on how to troubleshoot and solve this problem?