Вступление: я пытаюсь создать веб-приложение, используя API мест Google и API сокращения URL. Если пользователь ищет место, он извлекает идентификатор места и создает длинный URL — «http://search.google.com/local/writereview?placeid=«+ place_id», а затем используйте этот длинный URL-адрес, чтобы сократить его с помощью API Google URL сокращения, а затем заполните его в текстовом поле, чтобы пользователь мог скопировать созданный короткий URL-адрес. Я не могу понять, почему он не укорачивает URL. Обратите внимание, что у меня есть (api_key) в моем фактическом коде. ЛЮБАЯ помощь с благодарностью.
Благодарю.
Index.html code
<input id="pac-input" class="controls" type="text"placeholder="Enter a location">
<div id="map"></div>
<div id="infowindow-content">
<span id="place-name" class="title"></span><br>
Place ID <span id="place-id"></span><br>
<span id="place-address"></span>
</div>
<br>
<input id="gp_link" class="form-control" type="text" value="" placeholder="Your Google Review Link" readonly >
<br><br>
<script>
// This sample uses the Place Autocomplete widget to allow the user to search
// for and select a place. The sample then displays an info window containing
// the place ID and other information about the place that the user has
// selected.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
jQuery("#gp_link").click(function () {
jQuery(this).select();
});
function get_short_link(place_id) {
jQuery.ajax({
type: "POST",
url: "curl.php",
data: "longUrl=http://search.google.com/local/writereview?placeid=" + place_id,
complete:function(data) {
alert(data);
jQuery("#gp_link").val(data);
}
});
}
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13
});
var input = document.getElementById('pac-input');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var infowindow = new google.maps.InfoWindow();
var infowindowContent = document.getElementById('infowindow-content');
infowindow.setContent(infowindowContent);
var marker = new google.maps.Marker({
map: map
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
autocomplete.addListener('place_changed', function() {
infowindow.close();
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
// Set the position of the marker using the place ID and location.
marker.setPlace({
placeId: place.place_id,
location: place.geometry.location
});
marker.setVisible(true);
infowindowContent.children['place-name'].textContent = place.name;
infowindowContent.children['place-id'].textContent = place.place_id;
infowindowContent.children['place-address'].textContent =
place.formatted_address;
infowindow.open(map, marker);
get_short_link(place.place_id);
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=(api_key)&libraries=places&callback=initMap"async defer></script>
файл curl.php
<?php
define('GOOGLE_URL', 'https://www.googleapis.com/urlshortener/v1/url');
define('GOOGLE_API_KEY', 'api key goes here');
if( isset( $_POST[ 'longUrl' ] ) ) {
echo shorten( $_POST[ 'longUrl' ] );
} elseif( isset( $_GET[ 'shortUrl' ] ) ) {
echo expand($_GET[ 'shortUrl' ] );
} else {
echo 'You must enter a URL.';
} // end if/else
/*------------------------------------------*/
/* API Functions
/*------------------------------------------*/
/**
* Shortens the incoming URL using the Google URL shortener API
* and returns the shortened version.
*
* @long_url The URL to shorten.
*/
function shorten($long_url) {
$ch = curl_init(GOOGLE_URL . '?key=' . GOOGLE_API_KEY);
curl_setopt_array(
$ch,
array(
CURLOPT_HTTPHEADER => array('Content-Type: application/json'),
CURLOPT_RETURNTRANSFER => 1,
CURLOPT_TIMEOUT => 5,
CURLOPT_CONNECTTIMEOUT => 0,
CURLOPT_POST => 1,
CURLOPT_SSL_VERIFYHOST => 0,
CURLOPT_SSL_VERIFYPEER => 0,
CURLOPT_POSTFIELDS => '{"longUrl": "' . $long_url . '"}'
)
);
$json_response = json_decode(curl_exec($ch), true);
return $json_response['id'] ? $json_response['id'] : $long_url;
} // end shorten
?>
Вопрос: вы получили доступ к службе сокращения URL-адресов до 30 мая. 2018? Если нет (что в моем случае), я получаю 403 Forbidden
ошибка. Так что это может быть проблемой для вас, как объяснено здесь.
В любом случае, вам, вероятно, стоит заняться миграцией (или созданием) своего кода с FDL (динамические ссылки Firebase).
документация объясняет, как использовать сервис FDL. После того, как вы создали свой проект, вы можете обратиться к этот а также этот правильно построить свой запрос.
В конце концов, вы должны иметь возможность делать все через Javascript (PHP не нужен), и ваш код должен выглядеть примерно так (с минимальным кодом):
function initialize() {
var reviewUrl = 'http://search.google.com/local/writereview?placeid=';
var myLatLng = new google.maps.LatLng(46.2, 6.17);
var mapOptions = {
zoom: 4,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var input = document.getElementById('pac-input');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
getShortLink(reviewUrl + place.place_id);
});
}
function getShortLink(longUrl) {
var apiKey = 'MY_API_KEY'; // Replace this with the appropriate value
var params = {
"longDynamicLink": "https://example.page.link/?link=" + longUrl + "&apn=com.example.android&ibi=com.example.ios", // Replace this with the appropriate values
"suffix": {
"option": "SHORT"}
}
$.ajax({
url: 'https://firebasedynamiclinks.googleapis.com/v1/shortLinks?key=' + apiKey,
type: 'POST',
data: jQuery.param(params),
contentType: "application/json",
success: function(response) {
alert(response.status);
},
error: function() {
alert("error");
}
});
}
initialize();
Надеюсь это поможет!
Так как Google прекратил поддержку сокращения URL, другой альтернативой было использование Firebase Dynamic Links (FDL). Я исследовал FDL и нашел, что это немного сложно и слишком много усилий для того, чего я хотел достичь.
Я использовал API-интерфейс сокращения Bitly Link для сокращения URL-адреса, у меня есть те же функции, что и у Google URL-сокращения, и его проще реализовать.
Использовал это для сокращения моего URL:
function makeShort() {
//Bitly Shortner Function using AJAX
$.ajax({
//Type of XML query request
type: 'GET',
url: 'https://api-ssl.bitly.com/v3/shorten?access_token='+"ACCESS-TOKEN"+'&longUrl='+longUrl,
dataType: 'json',
success: function(result) {
//If Http status Code is "OK"if(result.status_code === 200) {
//Store the result in shorted_url variable
$('#shorted_url').html('<a href="url"> url </a>'.replace (/url/g ,result.data.url ))
} else {
//Do nothing
}
},
//Otherwise return the error
error: function(jqXHR, textStatus, errorThrown) {
}
});
}
Спасибо за ваши ответы на эту тему.
Приветствия.