2015-04-19 8 views
0

Я хочу изменить географическое расположение google с выбранной вами страной и, в выбранных городах и странах, в той же стране (в предыдущей стране) и в конце с типичным названием района. Что я делаю?Google map place change

//////// Loading Google Map ////// 
 
$(function() { 
 
    var latitude = $('input[name="latitude"]').val(); 
 
    var longitude = $('input[name="longitude"]').val(); 
 
    var lat = (latitude ? latitude : 38.341656192795924), 
 
     lng = (longitude ? longitude : -122.68604278564453), 
 
     latlng = new google.maps.LatLng(lat, lng), 
 
     image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png'; 
 

 
    var mapOptions = { 
 
     center: new google.maps.LatLng(lat, lng), 
 
     zoom: (latitude ? 16 : 7), 
 
     panControl: false, 
 
     zoomControl: true, 
 
     zoomControlOptions: { 
 
      style: google.maps.ZoomControlStyle.LARGE 
 
     }, 
 
     mapTypeControl: false, 
 
     streetViewControl: false, 
 
     overviewMapControl: true, 
 
     rotateControl: false, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
 
    var marker = new google.maps.Marker({ 
 
     position: latlng, 
 
     map: map, 
 
     icon: image, 
 
     draggable: true, 
 
     animation: google.maps.Animation.DROP 
 
    }); 
 

 
    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(marker, 'dragend', function(event) { 
 
     $('.MapLat').val(event.latLng.lat()); 
 
     $('.MapLon').val(event.latLng.lng()); 
 
     $("#searchTextField").val(''); 
 
    }); 
 
    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); 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://maps.google.com/maps/api/js?libraries=places&region=uk&language=en&sensor=true"></script> 
 

 
<form> 
 
    Country: 
 
    <select class="Country"> 
 
     <option value="" selected="selected"></option> 
 
     <option value="United States">United States</option> 
 
     <!--<option value="Canada">Canada</option>--> 
 
     <!-- OR etc... --> 
 
    </select> 
 
    Cities: 
 
    <select class="Cities"> 
 
     <option value="" selected="selected"></option> 
 
     <option value="New York">New York</option> 
 
     <!--<option value="Los Angeles">Los Angeles</option>--> 
 
     <!--<option value="Chicago">Chicago</option>--> 
 
     <!-- OR etc... --> 
 
    </select> 
 
    District: 
 
    <input type="text" id=SearchDistrict"> 
 
</form> 
 
<p> 
 
<div id="map_canvas" style="height: 400px;width: 500px;"></div>

DEMO:http://jsfiddle.net/qze4L0aq/

Например: (Следующий пример с Photoshop только для уточнения.)
первый: Я выбрал Страна United States Google Изменить место Карта является следующим: enter image description here
Второе: Я выбрал Города New York Google изменить место Карта как: enter image description here
Третье: Я выбрал округ Flatiron Google изменить место Карта как: enter image description here

ответ

0

Используйте Google Maps geocoder для поиска мест.

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

//////// Loading Google Map ////// 
 
$(function() { 
 
    var latitude = $('input[name="latitude"]').val(); 
 
    var longitude = $('input[name="longitude"]').val(); 
 
    var lat = (latitude ? latitude : 38.341656192795924), 
 
     lng = (longitude ? longitude : -122.68604278564453), 
 
     latlng = new google.maps.LatLng(lat, lng), 
 
     image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png'; 
 

 
    var mapOptions = { 
 
     center: new google.maps.LatLng(lat, lng), 
 
     zoom: (latitude ? 16 : 7), 
 
     panControl: false, 
 
     zoomControl: true, 
 
     zoomControlOptions: { 
 
      style: google.maps.ZoomControlStyle.LARGE 
 
     }, 
 
     mapTypeControl: false, 
 
     streetViewControl: false, 
 
     overviewMapControl: true, 
 
     rotateControl: false, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
 
    var marker = new google.maps.Marker({ 
 
     position: latlng, 
 
     map: map, 
 
     icon: image, 
 
     draggable: true, 
 
     animation: google.maps.Animation.DROP 
 
    }); 
 

 
    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(marker, 'dragend', function(event) { 
 
     $('.MapLat').val(event.latLng.lat()); 
 
     $('.MapLon').val(event.latLng.lng()); 
 
     $("#searchTextField").val(''); 
 
    }); 
 
    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); 
 
    } 
 
    
 
    $('select,input').change(function() { 
 
    var searchString = [$('select.Country').val(), $('select.Cities').val(), $('input#SearchDistrict').val()].join(', '); 
 
alert(searchString); 
 
    search(searchString); 
 

 
    }); 
 

 
    var geocoder = new google.maps.Geocoder(); 
 

 
    function search(address) { 
 
    geocoder.geocode({ 
 
     'address': address 
 
    }, function(results, status) { 
 
     if (status == google.maps.GeocoderStatus.OK) { 
 
     map.setCenter(results[0].geometry.location); 
 
     var marker = new google.maps.Marker({ 
 
      map: map, 
 
      position: results[0].geometry.location 
 
     }); 
 
     } else { 
 
     alert('Geocode was not successful for the following reason: ' + status); 
 
     } 
 
    }); 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://maps.google.com/maps/api/js?libraries=places&region=uk&language=en&sensor=true"></script> 
 

 
<form> 
 
    Country: 
 
    <select class="Country"> 
 
     <option value="" selected="selected"></option> 
 
     <option value="United States">United States</option> 
 
     <!--<option value="Canada">Canada</option>--> 
 
     <!-- OR etc... --> 
 
    </select> 
 
    Cities: 
 
    <select class="Cities"> 
 
     <option value="" selected="selected"></option> 
 
     <option value="New York">New York</option> 
 
     <!--<option value="Los Angeles">Los Angeles</option>--> 
 
     <!--<option value="Chicago">Chicago</option>--> 
 
     <!-- OR etc... --> 
 
    </select> 
 
    District: 
 
    <input type="text" id="SearchDistrict"/> 
 
</form> 
 
<p> 
 
<div id="map_canvas" style="height: 400px;width: 500px;"></div>

+0

Это не работает, на карте для названия округа. см. мой пост ** Третий **. DEMO: http: //jsfiddle.net/qze4L0aq/1/ и как получить код широты и долготы после выбора и разметки района? –