Javascript 基于自动完成输入的动态谷歌地图_Javascript_Jquery_Google Maps

Javascript 基于自动完成输入的动态谷歌地图

javascript jquery google-maps

Javascript 基于自动完成输入的动态谷歌地图,javascript,jquery,google-maps,Javascript,Jquery,Google Maps,我想创建基于自动完成输入的动态谷歌地图。我将代码编写为：- <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 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>


变量映射_选项={
中心：{
拉丁美洲时间：19.0825223，
液化天然气：72.7411155
},
缩放：15，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（'sale\u map\u canvas'），map\u选项）；
var marker=new google.maps.marker({
职位：{
拉丁美洲时间：19.0825223，
液化天然气：72.7411155
},
地图：地图，
德拉格布尔：是的
});
var city_选项={
类型：['（城市）]，
组件限制：{国家：“}
}
变量局部性\u选项={
组件限制：{国家：“}
}
var city=new google.maps.places.Autocomplete（document.getElementById（'sale\u city'），city\u选项）；
var locality=new google.maps.places.Autocomplete（document.getElementById（'sale\u locality'），locality\u options）；
google.maps.event.addListener（城市，'place_changed'，函数（）{
var places=city.getPlaces（）；
var bounds=new google.maps.LatLngBounds（）；
var i，地点；
for（i=0；place=places[i]；i++）
{
控制台日志（位置、几何、位置）；
扩展（place.geometry.location）；
标记器.设置位置（位置.几何.位置）；
}
映射边界（bounds）；
map.setZoom（15）；
});
google.maps.event.addListener（locality，'place_changed'，function（）{
var places=locality.getPlaces（）；
var bounds=new google.maps.LatLngBounds（）；
var i，地点；
for（i=0；place=places[i]；i++）
{
控制台.日志（位置.几何.位置）；
扩展（place.geometry.location）；
标记器.设置位置（位置.几何.位置）；
}
映射边界（bounds）；
map.setZoom（15）；
});
城市
地点

地图没有显示出来。请解决它。我已经通过参考上的视频编写了代码。代码中几乎没有问题

缺少地图分区“销售地图画布”

地图应该在页面加载时加载

我已经更改了代码，现在正在加载地图

<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>


#销售(地图)(帆布){
身高：100%；
}
var映射；
函数初始化（）{
变量映射_选项={
中心：{
拉丁美洲时间：19.0825223，
液化天然气：72.7411155
},
缩放：15，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（'sale\u map\u canvas'），map\u选项）；
var marker=new google.maps.marker({
职位：{
拉丁美洲时间：19.0825223，
液化天然气：72.7411155
},
地图：地图，
德拉格布尔：是的
});
var city_选项={
类型：['（城市）]，
组件限制：{国家：“}
}
变量局部性\u选项={
组件限制：{国家：“}
}
var city=new google.maps.places.Autocomplete（document.getElementById（'sale\u city'），city\u选项）；
var locality=new google.maps.places.Autocomplete（document.getElementById（'sale\u locality'），locality\u options）；
google.maps.event.addListener（城市，'place_changed'，函数（）{
var place=city.getPlace（）；
var bounds=new google.maps.LatLngBounds（）；
控制台日志（位置、几何、位置）；
扩展（place.geometry.location）；
标记器.设置位置（位置.几何.位置）；
映射边界（bounds）；
map.setZoom（15）；
});
google.maps.event.addListener（locality，'place_changed'，function（）{
var place=locality.getPlace（）；
var bounds=new google.maps.LatLngBounds（）；
控制台.日志（位置.几何.位置）；
扩展（place.geometry.location）；
标记器.设置位置（位置.几何.位置）；
映射边界（bounds）；
map.setZoom（15）；
});
};
google.maps.event.addDomListener（窗口“加载”，初始化）；
城市
地点

您的HTML中没有id=“sale\u map\u canvas”的div。我确实添加了id=“sale\u map\u canvas”的div。但还是不行不行不行。。你能做一件事吗，即创建一个JSFiddle并给我链接奇怪。你能将html复制粘贴到一个文件中并查看吗。它对我有用。我会很快给你小提琴的链接我复制了。。但它仍然不起作用！！！这就是为什么我说要上传到JSFIDLE上