In the google maps api, generate a URL for https://www.google.com.ua/maps/

Question

In the google maps api, generate a URL for https://www.google.com.ua/maps/

There is a project that uses the Google Maps API to build a route.

Now my task is as follows: inside the web application, use Google Maps API to create a route, then change the route by moving the route on the map (which is located in the web application) and then generate a link with which you can open Google maps (https://www.google.com.ua/maps/) where the route should be displayed, taking into account the user's shift in the app.

In other words: use the Google Maps API to generate a link that displays the changed route in Google maps

I looked at the documentation, analyzed requests and responses Google Maps API and Google maps. I never found a solution.

I want to clarify whether it is possible to implement this task?

1

javascript веб-программирование google-maps-api google-maps

Author: Yaros, 2017-08-22

Source

1 answers

score 0 · Answer 1

HTML5 Geolocation specifies the existing / current position of the user. You can probably apply the following javascript code to your maps:

<script>if (navigator.geolocation) { //Проверка поддержки браузером гео-локации
   navigator.geolocation.getCurrentPosition(function (position) {  //Получение
     var latitude = position.coords.latitude;                    //текущего положения 
     var longitude = position.coords.longitude;                 //пользователя
     var coords = new google.maps.LatLng(latitude, longitude); //Создает переменную для координат карты
     var directionsService = new google.maps.DirectionsService();
     var directionsDisplay = new google.maps.DirectionsRenderer();
     var mapOptions = //Sets map options
     {
       zoom: 15,  //Установите требуемое вам приближение для карты(0-21)
       center: coords, 
       mapTypeControl: true, 
       navigationControlOptions:
       {
         style: google.maps.NavigationControlStyle.SMALL //размер контрольной панели карты
       },
       mapTypeId: google.maps.MapTypeId.ROADMAP //опции для карты:ROADMAP, SATELLITE, HYBRID, TERRIAN
     };
     map = new google.maps.Map(document.getElementById("map"), mapOptions);
     directionsDisplay.setMap(map);
     directionsDisplay.setPanel(document.getElementById('panel'));
     var request = {
       origin: coords,
       destination: '65.791238, 21.657444',  //координаты объекта предлагаемого пользователю
       travelMode: google.maps.DirectionsTravelMode.DRIVING //опции для карты:DRIVING, WALKING, BICYCLING, TRANSIT
     };

     directionsService.route(request, function (response, status) {
       if (status == google.maps.DirectionsStatus.OK) {
         directionsDisplay.setDirections(response);
       }
     }); 
     
   });
    
 }
 </script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

HTMLCODE for such a card:

<main>
<header>
<h1>Название предлагаемого объекта</h1>
</header>
<div role=application>
<div>
<div id=map></div>
<div id="panel">
<div id="directions"></div>
</div>
</div>
</div>
</main>

When the user's location changes, they can update the map by updating the browser. In this case, the map's geo-location function will show its new current location. Optional: Documentation Google about geo-location.