基於自動完成輸入的動態Google地圖

我想基於自動完成輸入創建動態Google地圖。我寫的代碼爲： -基於自動完成輸入的動態Google地圖

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDeAtURNzEX26_mLTUlFXYEWW11ZdlYECM&libraries=places&language=en"></script> 
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 
<script type="text/javascript"> 
var map_options = { 
    center: { 
    lat: 19.0825223, 
    lng: 72.7411155 
    }, 
    zoom: 15, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

var map = new google.maps.Map(document.getElementById('sale_map_canvas'),map_options); 

var marker = new google.maps.Marker({ 
    position:{ 
    lat: 19.0825223, 
    lng: 72.7411155 
    }, 
    map:map, 
    draggable:true 
}); 
var city_options = { 
    types: ['(cities)'], 
    componentRestrictions: {country: "in"} 
} 
var locality_options = { 
    componentRestrictions: {country:"in"} 
} 
var city = new google.maps.places.Autocomplete(document.getElementById('sale_city'),city_options); 
var locality = new google.maps.places.Autocomplete(document.getElementById('sale_locality'),locality_options); 
google.maps.event.addListener(city,'place_changed',function(){ 
var places = city.getPlaces(); 
var bounds = new google.maps.LatLngBounds(); 
var i,place; 
for (i = 0; place=places[i]; i++) 
{ 
console.log(place.geometry,location); 
bounds.extend(place.geometry.location); 
marker.setPosition(place.geometry.location); 
} 
map.fitBounds(bounds); 
map.setZoom(15); 
}); 
google.maps.event.addListener(locality,'place_changed',function(){ 
var places = locality.getPlaces(); 
var bounds = new google.maps.LatLngBounds(); 
var i,place; 
for (i = 0; place=places[i]; i++) 
{ 
console.log(place.geometry.location); 
bounds.extend(place.geometry.location); 
marker.setPosition(place.geometry.location); 
} 
map.fitBounds(bounds); 
map.setZoom(15); 
}); 
</script> 

<body> 
<input id="sale_city" name="sale_city" type="text" class="validate" autocomplete="on" placeholder="" required> 
<label for="sale_city">City</label> 

<input id="sale_locality" name="sale_locality" type="text" class="validate" autocomplete="on" placeholder="" required> 
<label for="sale_locality">Locality</label> 
<div id="sale_map_canvas"></div> 
</body>

該地圖未顯示。請解決它..我通過參考視頻編寫代碼https://youtu.be/2n_r0NDekgc

來源

2016-01-27 Romil Shah

沒有在你的HTML的id =「sale_map_canvas」不派息。 – geocodezip

我確實添加了ID爲「sale_map_canvas」的div。但它仍然不起作用 –

代碼中很少有問題。

地圖div「sale_map_canvas」缺失。
地圖應在頁面加載時加載。

我已經改變了代碼和現在的地圖加載

<style> 
#sale_map_canvas { 
     height: 100%; 
     } 
</style> 
<script src="http://maps.googleapis.com/maps/api/js?libraries=places"></script> 
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> 
<script type="text/javascript"> 


var map; 

function initialize() { 

var map_options = { 
    center: { 
    lat: 19.0825223, 
    lng: 72.7411155 
    }, 
    zoom: 15, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

map = new google.maps.Map(document.getElementById('sale_map_canvas'),map_options); 

var marker = new google.maps.Marker({ 
    position:{ 
    lat: 19.0825223, 
    lng: 72.7411155 
    }, 
    map:map, 
    draggable:true 
}); 
var city_options = { 
    types: ['(cities)'], 
    componentRestrictions: {country: "in"} 
} 
var locality_options = { 
    componentRestrictions: {country:"in"} 
} 
var city = new google.maps.places.Autocomplete(document.getElementById('sale_city'),city_options); 
var locality = new google.maps.places.Autocomplete(document.getElementById('sale_locality'),locality_options); 
google.maps.event.addListener(city,'place_changed',function(){ 
var place = city.getPlace(); 
var bounds = new google.maps.LatLngBounds(); 

console.log(place.geometry,location); 
bounds.extend(place.geometry.location); 
marker.setPosition(place.geometry.location); 

map.fitBounds(bounds); 
map.setZoom(15); 
}); 
google.maps.event.addListener(locality,'place_changed',function(){ 
var place = locality.getPlace(); 
var bounds = new google.maps.LatLngBounds(); 

console.log(place.geometry.location); 
bounds.extend(place.geometry.location); 
marker.setPosition(place.geometry.location); 

map.fitBounds(bounds); 
map.setZoom(15); 
}); 



}; 

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


</script> 

<body> 
<input id="sale_city" name="sale_city" type="text" class="validate" autocomplete="on" placeholder="" required> 
<label for="sale_city">City</label> 

<input id="sale_locality" name="sale_locality" type="text" class="validate" autocomplete="on" placeholder="" required> 
<label for="sale_locality">Locality</label> 
<div id="sale_map_canvas"></div> 
</body>

來源

2016-01-27 17:19:06 Thangaraja

它不工作..你能做一件事，即創建一個JSFiddle並給我鏈接 –

奇怪。你可以複製粘貼html文件並看看。它爲我工作。我會盡快給你小提琴的鏈接 – Thangaraja

我沒有複製它..但它仍然不工作！這就是爲什麼我說要上傳JSfiddle –

基於自動完成輸入的動態Google地圖

回答

相關問題