Google Maps Plugin - Updated - Showcase

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

谦和的电影票 · 陈仙辉：以“超导”为起点 ...· 4 月前 ·

豪气的大葱 · DOE CODE GitLab ...· 4 月前 ·

欢快的花生 · 在sql查询的where子句中使用if条件_ ...· 8 月前 ·

傻傻的凳子 · ROCK2 - Drugs, ...· 8 月前 ·

怕老婆的仙人球 · 2023年喜剧《MONDAYS / ...· 1 年前 ·

Now updated and includes Directions, Distances, Travel Duration, Place details by id, Place photo by id, Static images. Also new icon.

More coming soon.

Leave me a review if you like it.

Hi Ali, thanks for this plugin which seems to do what i was looking for. I just installed it but have no idea how to use it.
What I want to do is:

As an admin, input a category (bar, restaurant…) and a location to display the results in a RG with the places details (Name, address, rate, open now, openin hour, photo, etc.)

Save these places and its details so I can play with them once saved.

I used to get this to work with the old API connector but for some reasons it’s not saving properly all the fields I am retrieving from google Places…

If your plugin is adapted to the above, would you mind sharing an example so I can see how to set it up?

thanks

Hi @AliFarahat , I’m trying to figure out how utilize the street view aspect of your plugin. I’ve used a text element to display the output, but nothing seems to appear. I’ve been successful in embeding an street view iframe by reffering to Google’s API reference and implementing a streetview via iframe, but I’d like to utilize your plugin so I don’t have to recreate calls for API connector. Do you have any instructions on how implement the streetview feature?

Is the output from your plugin what I would put inside:

Hi Ali Farahat,

Forgive my ignorance but it’d be possible to hAve a basic example of the use of this API in a map, showing the driving directions from point A to point B?
I’d appreciate it very much.
Regards,

Hi Ali,

I’m sorry for bothering you again, but the set of code you mentioned would be of much help.

Thanks,

Sorry about that. Here you go. Be sure to replace the API_KEY with yours

<!DOCTYPE html>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Directions service</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      #map {
        height: 100%;
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
    </style>
  </head>
    <div id="map"></div>
    <script>
function initMap() {
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer;
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {
      lat: 24.758402,
      lng: 54.929581
  //**  Enable below for Traffic layer
  //var trafficLayer = new google.maps.TrafficLayer();
  //trafficLayer.setMap(map);
  directionsDisplay.setMap(map);
  directionsService.route({
    origin: new google.maps.LatLng(25.245257, 55.359976),
    destination: new google.maps.LatLng(24.986390, 55.179924),
    travelMode: google.maps.TravelMode.DRIVING
  function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
    </script>
  </body>
</html>

Hello again,

First of all, thank you for your answer.

Although, since I’m a beginner, I don’t know where to insert that HTML piece. I imagine it could be at the page element itself. I tried but with no result. Actually, the result was a frozen page.
I’m trying to get the driving directions into a Map B from two input elements in the page, let’s say Input A for start and Input B for destination. Are these bubble names the same as id’s? I’m asking this because in your code appears “getElementById” thing… if not, how can I set the id’s of the bubble elements?
I know I’m asking too much. If you have time and patience I’d appreciate it very much.
Best regards,

You have to replace the following with dynamic data that you need directions for. Just insert the lat, long for each origin and destination. Also, note that map will not render till the origin and destination are both available.

origin: new google.maps.LatLng(25.245257, 55.359976), 
destination: new google.maps.LatLng(24.986390, 55.179924),