Код Google Map с помощью акций URL

Say, вы идете в Google Maps и поиск «Walmart», а затем выберите первый Walmart в списке, и вы получите URL, как: https://www.google.com/maps/place/Walmart+Supercenter/@41.7991677,-70.5882922,10z/data=!4m5!1m2!2m1!1swalmart!3m1!1s0x89e4c6127cc5b685:0x104d337439f46ea9Код Google Map с помощью акций URL

затем, если вы идете этот URL-адрес дает вам действительную карту с точечной точкой. Это (выше) - это URL-адрес, который будет храниться в моей базе данных, таким образом, URL-адрес, который я хочу использовать для встраивания карты.

Конечно, я не могу использовать этот URL, чтобы встроить в IFRAME, и вместо этого я должен использовать: https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d380717.11119594605!2d-70.5882922!3d41.7991677!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e4c6127cc5b685%3A0x104d337439f46ea9!2sWalmart+Supercenter!5e0!3m2!1sen!2sus!4v1445294674664

Так ... для любого разделяемого Google Maps URL, как я могу преобразовать его в встраиваемый url, который будет использоваться в качестве iframe src?

Я могу сделать это на стороне сервера, используя PHP или клиентскую часть с javascript. использование регулярного выражения было бы приемлемым.

источник

2015-10-19 Jakar

вы пробовали это: http://stackoverflow.com/questions/24579591/how-to-turn-google-maps-url-into -an-iframe-friendly-url – Suyog

Нет, я не должен был хорошо искать, потому что я этого не видел. Похож на то, что мне нужно («специально для решения lat/long). Благодарю. – Jakar

Это может сделать трюк:

$matches = []; 

preg_match("/@(.*?),(.*?),/",$str,$matches); 

$place = $matches[1]; 

preg_match("/@(.*?),(.*?),/",$str,$matches); 

$lat = $matches[1]; 
$long = $matches[2]; 

echo '<iframe src="https://www.google.com/maps/embed/v1/place?q='.$place.'&center='.$lat.','.$long.'&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU&zoom=8" frameborder="0"></iframe>';

После того, как первый @ обугливается он расположен на широте и logitude, которые вы можете извлечь с помощью регулярных выражений, который я написал, и чем захватить выход на 2 группы и добавить это то, что на вложенный URL.

источник

2015-11-03 19:50:13 Burimi

Но как насчет других частей ('! 1m14! 1m8! 1m3! 1d380717.11119594605! 2d' и'! 3d' и '! 3m2! 1i1024! 2i768! 4f13.1! 3m3! 1m2! 1s0x89e4c6127cc5b685% 3A0x104d337439f46ea9! 2sWalmart + Гипермаркет! 5e0! 3м2! 1sen! 2sus! 4v1445294674664')? Не изменится ли это и от места к месту? – Jakar

@Jakar Я обновил свой вопрос, чтобы вы могли использовать его правильно, вам просто нужен ключ API из Maps. – Burimi

Не знаю, почему вы хотите сделать это преобразование, и все, но если вы используете яваскрипт на сторону клиента, то вы можете использовать Google maps v3 для JavaScript

Тогда вы сразу получите LAT/LNG и вы можете хранить их и использовать для всех будущих вызовов, что кажется более чистым подходом.

См следующий код

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    <style> 
 
    html, 
 
    body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    
 
    #map { 
 
     height: 100%; 
 
    } 
 
    
 
    .controls { 
 
     margin-top: 10px; 
 
     border: 1px solid transparent; 
 
     border-radius: 2px 0 0 2px; 
 
     box-sizing: border-box; 
 
     -moz-box-sizing: border-box; 
 
     height: 32px; 
 
     outline: none; 
 
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
 
    } 
 
    
 
    #pac-input { 
 
     background-color: #fff; 
 
     font-family: Roboto; 
 
     font-size: 15px; 
 
     font-weight: 300; 
 
     margin-left: 12px; 
 
     padding: 0 11px 0 13px; 
 
     text-overflow: ellipsis; 
 
     width: 300px; 
 
    } 
 
    
 
    #pac-input:focus { 
 
     border-color: #4d90fe; 
 
    } 
 
    
 
    .pac-container { 
 
     font-family: Roboto; 
 
    } 
 
    
 
    #type-selector { 
 
     color: #fff; 
 
     background-color: #4d90fe; 
 
     padding: 5px 11px 0px 11px; 
 
    } 
 
    
 
    #type-selector label { 
 
     font-family: Roboto; 
 
     font-size: 13px; 
 
     font-weight: 300; 
 
    } 
 
    </style> 
 
    <title>Places Searchbox</title> 
 
    <style> 
 
    #target { 
 
     width: 345px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <input id="pac-input" class="controls" type="text" placeholder="Search Box"> 
 
    <div id="map"></div> 
 
    <script> 
 
    // This example adds a search box to a map, using the Google Place Autocomplete 
 
    // feature. People can enter geographical searches. The search box will return a 
 
    // pick list containing a mix of places and predicted search terms. 
 

 
    function initAutocomplete() { 
 
     var map = new google.maps.Map(document.getElementById('map'), { 
 
      center: { 
 
       lat: -33.8688, 
 
       lng: 151.2195 
 
      }, 
 
      zoom: 13, 
 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
 
     }); 
 

 
     // Create the search box and link it to the UI element. 
 
     var input = document.getElementById('pac-input'); 
 
     var searchBox = new google.maps.places.SearchBox(input); 
 
     map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 
 

 
     // Bias the SearchBox results towards current map's viewport. 
 
     map.addListener('bounds_changed', function() { 
 
      searchBox.setBounds(map.getBounds()); 
 
     }); 
 

 
     // [START region_getplaces] 
 
     // Listen for the event fired when the user selects a prediction and retrieve 
 
     // more details for that place. 
 
     var marker; 
 
     searchBox.addListener('places_changed', function() { 
 
      var places = searchBox.getPlaces(); 
 

 
      if (places.length == 0) { 
 
       return; 
 
      } 
 
      console.log('place: '+places[0]); 
 
      if(marker!=null) 
 
       marker.setMap(null); 
 

 
      var icon = { 
 
       url: places[0].icon, 
 
       size: new google.maps.Size(71, 71), 
 
       origin: new google.maps.Point(0, 0), 
 
       anchor: new google.maps.Point(17, 34), 
 
       scaledSize: new google.maps.Size(25, 25) 
 
      }; 
 
      marker = new google.maps.Marker({ 
 
       map: map, 
 
       // icon: icon, 
 
       title: places[0].name, 
 
       position: places[0].geometry.location 
 
      }); 
 
      map.setCenter(places[0].geometry.location); 
 
      //save places[0].geometry.location for all future reference 
 

 
     }); 
 
     // [END region_getplaces] 
 
    } 
 
    </script> 
 
    <script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initAutocomplete" async defer></script> 
 
</body> 
 

 
</html>

, конечно, если вам нужно вы можете удалить список поиска и по умолчанию всегда выбрать 1-ый результат.

источник

2015-11-04 08:08:25

стороне клиента вариант:

$(function() { 
 
    var str = 'https://www.google.com/maps/place/Walmart+Supercenter/@41.7991677,-70.5882922,10z/data=!4m5!1m2!2m1!1swalmart!3m1!1s0x89e4c6127cc5b685:0x104d337439f46ea9'; 
 
    var matches = str.match(/\/@([\d\.,-]+)z\//)[1]; 
 
    var splits = matches.split(','); 
 
    var lat = splits[0]; 
 
    var long = splits[1]; 
 
    var zoom = splits[2]; 
 
    var url = 'http://maps.google.com/maps?q=' + lat + ',' + long + '&z=' + zoom + '&output=embed'; 
 
    $('#output').html('<iframe style = "width:200px;height:400px" src = ' + url + '></iframe>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='output' style="width:200px;height:400px"></div>

источник

2015-11-04 12:15:35 sideroxylon

Код Google Map с помощью акций URL

ответ

Смежные вопросы