2013-10-01 2 views
-1

Salut les gars, quelqu'un sait comment obtenir la latitude et la longitude par type sur google map en utilisant PHP ou Javascript?PHP google map obtenir Latitude et Longitude par type

par exemple, je veux obtenir tout restaurant sur cet endroit:

emplacement: Royaume-Uni, devon

Type: Restaurant

il doit retourner nom du restaurant, latitude, longitude.

toute aide serait appréciée :)

+0

un autre exemple pour ce serait: emplacement: Royaume-uni de type : aéroport –

+0

qui est le [API Places] (https: // developers.google.com/places/). Cependant, il ne retournera pas tous les endroits (à moins qu'il soit limité à une petite zone). Il retournera 200 emplacements (recherche radar) ou jusqu'à 60 emplacements avec plus d'informations par groupes de 20. – geocodezip

Répondre

0

HTML et JS

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <link href="default.css" 
     rel="stylesheet"> 
    <title>Places search box</title> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script> 
    <script> 
function initialize() { 
    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    var defaultBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(-33.8902, 151.1759), 
     new google.maps.LatLng(-33.8474, 151.2631)); 
    map.fitBounds(defaultBounds); 

    var input = /** @type {HTMLInputElement} */(document.getElementById('target')); 
    var searchBox = new google.maps.places.SearchBox(input); 
    var markers = []; 

    google.maps.event.addListener(searchBox, 'places_changed', function() { 
    var places = searchBox.getPlaces(); 

    for (var i = 0, marker; marker = markers[i]; i++) { 
     marker.setMap(null); 
    } 

    markers = []; 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0, place; place = places[i]; i++) { 
     var image = { 
     url: place.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) 
     }; 

     var marker = new google.maps.Marker({ 
     map: map, 
     icon: image, 
     title: place.name, 
     position: place.geometry.location 
     }); 

     markers.push(marker); 

     bounds.extend(place.geometry.location); 
    } 

    map.fitBounds(bounds); 
    }); 

    google.maps.event.addListener(map, 'bounds_changed', function() { 
    var bounds = map.getBounds(); 
    searchBox.setBounds(bounds); 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
    <style> 
     #target { 
     width: 345px; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="panel"> 
     <input id="target" type="text" placeholder="Search Box"> 
    </div> 
    <div id="map-canvas"></div> 
    </body> 
</html> 

ET CSS

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

#map-canvas, #map_canvas { 
    height: 100%; 
} 

@media print { 
    html, body { 
    height: auto; 
    } 

    #map-canvas, #map_canvas { 
    height: 650px; 
    } 
} 

#panel { 
    position: absolute; 
    top: 5px; 
    left: 50%; 
    margin-left: -180px; 
    z-index: 5; 
    background-color: #fff; 
    padding: 5px; 
    border: 1px solid #999; 
} 

RÉFÉRER ICI POUR PLUS! GOOGLE PLACES

1

Cocher cette

$(function() { 
     var lat = 44.88623409320778, 
      lng = -87.86480712897173, 
      latlng = new google.maps.LatLng(lat, lng), 
      image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png'; 

     //zoomControl: true, 
     //zoomControlOptions: google.maps.ZoomControlStyle.LARGE, 

     var mapOptions = { 
      center: new google.maps.LatLng(lat, lng), 
      zoom: 13, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      panControl: true, 
      panControlOptions: { 
       position: google.maps.ControlPosition.TOP_RIGHT 
      }, 
      zoomControl: true, 
      zoomControlOptions: { 
       style: google.maps.ZoomControlStyle.LARGE, 
       position: google.maps.ControlPosition.TOP_left 
      } 
     }, 
     map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions), 
      marker = new google.maps.Marker({ 
       position: latlng, 
       map: map, 
       icon: image 
      }); 

     var input = document.getElementById('searchTextField'); 
     var autocomplete = new google.maps.places.Autocomplete(input, { 
      types: ["geocode"] 
     }); 

     autocomplete.bindTo('bounds', map); 
     var infowindow = new google.maps.InfoWindow(); 

     google.maps.event.addListener(autocomplete, 'place_changed', function (event) { 
      infowindow.close(); 
      var place = autocomplete.getPlace(); 
      if (place.geometry.viewport) { 
       map.fitBounds(place.geometry.viewport); 
      } else { 
       map.setCenter(place.geometry.location); 
       map.setZoom(17); 
      } 

      moveMarker(place.name, place.geometry.location); 
      $('.MapLat').val(place.geometry.location.lat()); 
      $('.MapLon').val(place.geometry.location.lng()); 
     }); 
     google.maps.event.addListener(map, 'click', function (event) { 
      $('.MapLat').val(event.latLng.lat()); 
      $('.MapLon').val(event.latLng.lng()); 
      infowindow.close(); 
        var geocoder = new google.maps.Geocoder(); 
        geocoder.geocode({ 
         "latLng":event.latLng 
        }, function (results, status) { 
         console.log(results, status); 
         if (status == google.maps.GeocoderStatus.OK) { 
          console.log(results); 
          var lat = results[0].geometry.location.lat(), 
           lng = results[0].geometry.location.lng(), 
           placeName = results[0].address_components[0].long_name, 
           latlng = new google.maps.LatLng(lat, lng); 

          moveMarker(placeName, latlng); 
          $("#searchTextField").val(results[0].formatted_address); 
         } 
        }); 
     }); 

     function moveMarker(placeName, latlng) { 
      marker.setIcon(image); 
      marker.setPosition(latlng); 
      infowindow.setContent(placeName); 
      //infowindow.open(map, marker); 
     } 
    }); 

travail démo fiddle

Questions connexes