First of all, thanks for putting up the simple and to the point video. i am currently learning how to use APIs and this is a great start. SO Thank you for your excellent work.
Issue: There a a few errors (may be few changes that i need to make) in the geogram.php file
The AJAX calls fails and the library its looking for does not exist
The OAuthentication error keeps popping up from the instagram website. NOTE: I did registered on the developer site of instagram and generated a clientID. still does not work
When i run the GeoGram.php program it gives few trailing characters on the web page which are basically from the program i.e. It gives a text box, submit button then after that there is trailing "'"}}. ---> dont understand why this is happening
Please note: (Using MAC OSx El Capitan)
a) I have installed the recent stable version of TomCat 8.0.36 (I know 8.5 is also available)
b) I have installed php 7.0 version on my mac
c) I have ran other php programs on the localhost and they work fine
I am posting the code here, please take a look and advice. It will be a great help
GeoGram.php
<!DOCTYPE html>
<?php
if (!empty($_GET['location'])) {
/**
Here we build the url we'll be using to access the google maps api
*/
$maps_url = 'https://' .
'maps.googleapis.com/' .
'maps/api/geocode/json' .
'?address=' . urlencode($_GET['location']);
$maps_json = file_get_contents($maps_url);
$maps_array = json_decode($maps_json, true);
$lat = $maps_array['results'][0]['geometry']['location']['lat'];
$lng = $maps_array['results'][0]['geometry']['location']['lng'];
/**
Time to make our Instagram api request. We'll build the url using the
coordinate values returned by the google maps api
*/
$url = 'https://' .
'api.instagram.com/v1/media/search' .
'?lat=' . $lat .
'&lng=' . $lng .
'&client_id=f5c4ba9d62854713b45d39994282ba3c'; //replace "CLIENT-ID"
$json = file_get_contents($url);
$instagram_array = json_decode($json, true);
}?>
Here we build the url we'll be using to access the google maps api
*/
$maps_url = 'https://' .
'maps.googleapis.com/' .
'maps/api/geocode/json' .
'?address=' . urlencode($_GET['location']);
$maps_json = file_get_contents($maps_url);
$maps_array = json_decode($maps_json, true);
$lat = $maps_array['results'][0]['geometry']['location']['lat'];
$lng = $maps_array['results'][0]['geometry']['location']['lng'];
/**
Time to make our Instagram api request. We'll build the url using the
coordinate values returned by the google maps api
*/
$url = 'https://' .
'api.instagram.com/v1/media/search' .
'?lat=' . $lat .
'&lng=' . $lng .
'&client_id=f5c4ba9d62854713b45d39994282ba3c'; //replace "CLIENT-ID"
$json = file_get_contents($url);
$instagram_array = json_decode($json, true);
}?>
Hello Ben -
First of all, thanks for putting up the simple and to the point video. i am currently learning how to use APIs and this is a great start. SO Thank you for your excellent work.
Issue: There a a few errors (may be few changes that i need to make) in the geogram.php file
The AJAX calls fails and the library its looking for does not exist
The OAuthentication error keeps popping up from the instagram website. NOTE: I did registered on the developer site of instagram and generated a clientID. still does not work
When i run the GeoGram.php program it gives few trailing characters on the web page which are basically from the program i.e. It gives a text box, submit button then after that there is trailing "'"}}. ---> dont understand why this is happening
Please note: (Using MAC OSx El Capitan) a) I have installed the recent stable version of TomCat 8.0.36 (I know 8.5 is also available) b) I have installed php 7.0 version on my mac c) I have ran other php programs on the localhost and they work fine
I am posting the code here, please take a look and advice. It will be a great help
GeoGram.php
<!DOCTYPE html>
<?php if (!empty($_GET['location'])) { /**
'; } } ?>
Script Program $(document).ready(function () { setInterval(function () { itsAjaxTime(); }, 5000); itsAjaxTime(); });
function itsAjaxTime() { var url = $('#results').data('url'); $.getJSON(url + '&callback=?', function (data) { addNewImages(data); }); }
function addNewImages(data) { $.each(data.data, function (index, image) { if ($('#' + image.id).length == 0) { var img = $('<img ' + 'id="' + image.id + '" src="' + image.images.low_resolution.url + '" alt=""/>
'); img.hide().prependTo('#results').fadeIn(2000); } }); }