Google 放置 API 和 URL 缩短器 API

Question

简介：我正在尝试使用 google 位置 API 和 URL 缩短器 API 创建网络应用程序。如果用户搜索一个地点，它会提取地点 ID 并创建一个长 URL - "http://search.google.com/local/writereview?placeid=" + place_id" 然后使用这个长 URL 来缩短它使用 Google URL shortener API 然后将其填充到文本字段中，以便用户可以复制生成的短 URL。我无法弄清楚为什么它不会'不要缩短 URL。请注意我的实际代码中有 (api_key)。非常感谢任何帮助。

谢谢。

Index.html代码

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

Answer 1

问题是：您是否在 2018 年 5 月 30 日之前访问过 URL 缩短服务？如果不是（这是我的情况），我会收到 403 Forbidden 错误。所以这可能也是你的问题，as explained here。

无论如何，您应该考虑使用 FDL（Firebase 动态链接）.

迁移（或创建）您的代码

documentation explains how to use the FDL service. Once you have created your project, you can refer to this and this 正确构建您的查询。

最后，您应该能够通过 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();

希望对您有所帮助！

Answer 2

由于 Google 停止支持 URL 缩短器，另一种选择是使用 Firebase Dynamic Links (FDL)。我研究了 FDL，发现它有点复杂，而且对于我想要实现的目标来说需要付出太多努力。

我使用 Bitly Link 缩短器 API 来缩短我的 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) {

                }
            }); 
        }

感谢您对此主题的回复。

干杯。

Google 放置 API 和 URL 缩短器 API

Google places API and URL shortener API

javascript

php

google-maps

firebase-dynamic-links

google-url-shortener