javascript - Google maps marker Showing wrong Position? -
i new react/google maps ,i trying simple dynamic map location pointer based on user input react js
but google marker showing wrong place.and yes verified lat , api correct marker placing goes wrong.. 
this code
import react 'react'; import helmet 'react-helmet'; import {connect} 'react-redux'; import {setnotificationstatus} '../actions/notification_actions'; import {getplaces,getlocation,getlocationfromapi} '../actions/post_actions' //code here class postcon extends react.component{ constructor(props){ super(props); this.state = { suggestionlist:[], latlong:{lat:0,lng:0}, locationsugg:[], canlocationrender:false, calplacarender:false, locationclassname:'searchplaceri ', locationterm:'' } this.handleplacechange = this.handleplacechange.bind(this); this.handlelocationchange = this.handlelocationchange.bind(this); } handleplacechange(e){ e.preventdefault(); let searchterm = e.target.value; this.props.getplaces(searchterm).then((res) => { this.setstate({ suggestionlist:res }) }) } handlelocationchange(e){ e.preventdefault(); let searchterm = e.target.value; this.setstate({ locationterm:searchterm, locationclassname:'searchplaceri ', }); let convertedterm = searchterm.split(" ").join("+"); // console.log(searchterm.split(" ").join("+")) this.props.getlocationfromapi(convertedterm).then((res) => { console.log(res.results) this.setstate({ locationsugg:res.results, canlocationrender:true }) }) } componentdidmount(){ this.props.triggernotification(true,"hello "); new google.maps.map(this.refs.map, { center: this.state.latlong, zoom: 1, minzoom:1 }); } updatestate(data){ console.log('clicked state',data); let latlong = {lat:data.geometry.location.lat,lng:data.geometry.location.lat} console.log(latlong); this.setstate({ latlong }) } updatestateforlocation(data) { console.log('clicked location',data); let latlong = {lat:data.geometry.location.lat,lng:data.geometry.location.lat} // console.log(latlong); this.setstate({ locationclassname:'searchplaceri selectobject', canlocationrender:false, locationterm:data.formatted_address, }); let map = new google.maps.map(this.refs.map, { center: latlong, zoom: 4, }); new google.maps.marker({ position: latlong, map: map, title: 'hello world!' }); new google.maps.circle({ strokecolor: '#ff0000', strokeopacity: 0.8, strokeweight: 2, fillcolor: '#000', fillopacity: 0.001, map: map, center: latlong, radius: math.sqrt(603502) * 100 }); this.props.triggernotification(true,"tag place"); } render(){ // console.log(this.state) return( <div> <helmet title="make plan" link={[ {"rel":"stylesheet","href":"/postcon.css"}, {"rel":"stylesheet","href":"https://fonts.googleapis.com/css?family=quicksand:300,400"}, {} ]} meta={[ {name:"viewport",content:"width=device-width, initial-scale=1"}, {property:"og:type", content:"article"}, ]} /> <div classname="container"> <div classname="mapcontainer"> {/*render map*/} <div ref="map" style={{width:'100%',height:'100%'}}> </div> </div> <div classname="downconfeed"> <div classname="posfeed"> <div classname="postconstarts"> <form> <input type="text" name="title" classname="title" placeholder="title" /> <div classname="searchplacecon selected"> <input onclick={(e) => this.props.triggernotification(true,"select city/country")} onchange={this.handlelocationchange} value={this.state.locationterm} type="text" name="location" classname={this.state.locationclassname} placeholder="tag place" /> <input onclick={(e) => this.props.triggernotification(true,"select place selected location")} onchange={this.handleplacechange} type="text" name="place" classname="searchplaceri" placeholder="tag place" /> </div> <div classname="suggestion"> <ul> {/*{this.state.suggestionlist.map(data => {*/} {/*return (*/} {/*<div key={data.place_id} onclick={(e) => this.updatestate(data)} classname="singlesugg">*/} {/*<h2>startbuks</h2>*/} {/*<span>{data.formatted_address}</span>*/} {/*</div>*/} {/*)*/} {/*})}*/} {this.state.canlocationrender ? this.state.locationsugg.map(data => { return ( <div key={data.place_id} onclick={(e) => this.updatestateforlocation(data)} classname="singlesugg"> <h2>{data.formatted_address}</h2> </div> ) }) : ""} </ul> </div> <textarea placeholder="say more place" defaultvalue={""} /> <input classname="price" name="price" type="text" placeholder="price" /> <br /> <input type="submit" defaultvalue="add" classname="alignselft" /> </form> </div> </div> </div> <div classname="alreadyadded"> <div classname="singlecontainer"> <div classname="singlecard"> <div classname="singlepostcon"> <div classname="placetitle"> <h1>paris clinton</h1> <p classname="priceh">cyber hub, dlf cyber city, gurgaon</p> </div> <p>ei had rated place 5 when walked in midival punditz playing on lazy sunday afternoon...this place love, relaxed ambiance, live grill, bar , array of wine aroma of cheese wafting in air. opted sunday buffet, priced @ 1500+ taxes. along mouth watering delicacies, choice of veg , non-veg , unlimited wine , other choice of alcohol, yes read right, unlimited, waffles , pancakes die for. our brunch extended hours on end wine freely flowing. bartender makes mean martinis. love visit again. though desserts bit letdown, yet, #loveditl</p> <div classname="pricen"> <p>300$</p> <button>remove</button> </div> </div> <div classname="singlepostcon"> <div classname="placetitle"> <h1>paris clinton</h1> <p classname="priceh">cyber hub, dlf cyber city, gurgaon</p> </div> <p>ei had rated place 5 when walked in midival punditz playing on lazy sunday afternoon...this place love, relaxed ambiance, live grill, bar , array of wine aroma of cheese wafting in air. opted sunday buffet, priced @ 1500+ taxes. along mouth watering delicacies, choice of veg , non-veg , unlimited wine , other choice of alcohol, yes read right, unlimited, waffles , pancakes die for. our brunch extended hours on end wine freely flowing. bartender makes mean martinis. love visit again. though desserts bit letdown, yet, #loveditl</p> <div classname="pricen"> <p>300$</p> </div> </div> <div classname="singlepostcon"> <div classname="placetitle"> <h1>paris clinton</h1> <p classname="priceh">cyber hub, dlf cyber city, gurgaon</p> </div> <p>ei had rated place 5 when walked in midival punditz playing on lazy sunday afternoon...this place love, relaxed ambiance, live grill, bar , array of wine aroma of cheese wafting in air. opted sunday buffet, priced @ 1500+ taxes. along mouth watering delicacies, choice of veg , non-veg , unlimited wine , other choice of alcohol, yes read right, unlimited, waffles , pancakes die for. our brunch extended hours on end wine freely flowing. bartender makes mean martinis. love visit again. though desserts bit letdown, yet, #loveditl</p> <div classname="pricen"> <p>300$</p> </div> </div> </div> </div> </div> </div> <script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxx"> </script> </div> ) } } const mapstatetoprops = (state) => { return { } }; const mapdispatchtoprops = (dispatch) => { return{ triggernotification :(bool,msg) => dispatch(setnotificationstatus(bool,msg)), getplaces:(term) => dispatch(getplaces(term)), getlocation:(term) => dispatch(getlocation(term)), getlocationfromapi:(term) => dispatch(getlocationfromapi(term)) } }; export default connect(mapstatetoprops,mapdispatchtoprops)(postcon) ;
the longitude not getting set correctly. have error on line
let latlong = {lat:data.geometry.location.lat,lng:data.geometry.location.lat} you setting data.geometry.location.lat both lat lng.
change data.geometry.location.lat data.geometry.location.lng while setting longitude
let latlong = {lat:data.geometry.location.lat,lng:data.geometry.location.lng}
Comments
Post a Comment