javascript - Dynamic Google Maps based on Autocomplete Input -
i want create dynamic google map based on autocomplete input. have written code as:-
<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; (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; (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> the map isn't showing up. please solve it..i've written code referring video on https://youtu.be/2n_r0ndekgc
there few issues in code.
- map div "sale_map_canvas" missing.
- map should loaded on page load.
i have changed code , map loading
<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> 
Comments
Post a Comment