javascript - Google Maps Autocomplete, selected option from dropdown not displaying acccurate location on first time -
i trying show map when user uses options in autocomplete.. having select location twice correct map show.. following code api v3... can spot in code below might doing wrong?
function initializegooglemap() { //var autocomplete = new google.maps.places.autocomplete(input); //autocomplete.bindto('bounds', map); //var infowindow = new google.maps.infowindow(); //var marker = new google.maps.marker({ // map: map, // anchorpoint: new google.maps.point(0, -29) //}); var mapoptions = { center: new google.maps.latlng(latitude, longitude), zoom: 13, styles: [{ //featuretype: "poi", elementtype: "labels", stylers: [{ visibility: "off" }] }], maptypecontrol: false }; var map = new google.maps.map(document.getelementbyid('fixturemap-canvas'), mapoptions); var input = /** @type {htmlinputelement} */( document.getelementbyid('txtaddress')); var types = document.getelementbyid('type-selector'); var options = { types: ['address'] }; var autocomplete = new google.maps.places.autocomplete(input); autocomplete.bindto('bounds', map); autocomplete.settypes(options.types); var infowindow = new google.maps.infowindow(); var marker = new google.maps.marker({ map: map, anchorpoint: new google.maps.point(0, -29) }); google.maps.event.addlistener(autocomplete, 'place_changed', function () { infowindow.close(); marker.setvisible(false); var place = autocomplete.getplace(); if (!place.geometry) { return; } // if place has geometry, present on map. if (place.geometry.viewport) { map.fitbounds(place.geometry.viewport); alert("came here 1 >" + place.geometry.viewport.longitude); } else { map.setcenter(place.geometry.location); map.setzoom(17); // why 17? because looks good. alert("came here 2"); } marker.seticon(/** @type {google.maps.icon} */({ 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(35, 35) })); marker.setposition(place.geometry.location); marker.setvisible(true); var address = ''; if (place.address_components) { address = [ (place.address_components[0] && place.address_components[0].short_name || ''), (place.address_components[1] && place.address_components[1].short_name || ''), (place.address_components[2] && place.address_components[2].short_name || '') ].join(' '); } infowindow.setcontent('<div><strong>' + place.name + '</strong><br>' + address); infowindow.open(map, marker); }); }
the code snippet provided above working fine, dr.molle pointed out in comments, led me further investigate there onchange event on same textbox txtaddress resetting coordinates.
solution if else facing same issue please check code see if there onchange event on same textbox overriding map data.
function initializegooglemap() { .... // code works fine } ps: in case couldn't have posted whole js file huge! post main snippet handling map.
Comments
Post a Comment