Add marker in google map and display coordinates Angular 4 -


how add marker in google maps , display coordinates in angular 4

i've used google maps n angular4 apps..like this:

/////////// model /////////////////     export class googledirection {         public lat: number = 0;         public long: number = 0;     }  /////////////////////////////////////       /////////// component (not all) /////////////////      declare var $: any;      declare var google: any;     public distance : number=0;      findposition() {            let = "milan";           let from= "turin";             let froom: googledirection;           let too: googledirection;            this.getlatlong(from).then((resp) => {             froom = resp;             if (too && froom) {               this.getdirection(froom, too);             }           }).catch(() => {             this._toasterservice.pop('warning', 'attenzione', 'indirizzo di partenza errato');           });            this.getlatlong(to).then((resp) => {             = resp;             if (too && froom) {               this.getdirection(froom, too);             }           }).catch(() => {             this._toasterservice.pop('warning', 'attenzione', 'indirizzo di arrivo errato');           });          }        /**        * function retrive latlong google        * @param address         */       private getlatlong(address: string): promise<googledirection> {          return new promise<googledirection>((resolve, reject) => {           var geocoder = new google.maps.geocoder();            var result = "";            geocoder.geocode({ 'address': address }, (results, status) => {              if (!results || results.length <= 0) return reject(undefined);              var latitude = results[0].geometry.location.lat();             var longitude = results[0].geometry.location.lng();             console.log("lat: " + latitude + ", long: " + longitude);              var result = new googledirection();             result.lat = latitude;             result.long = longitude;              resolve(result);            }, (err) => {             reject(err);           });         });         }         /**        * function retrive direction google        * @param         * @param         */       private getdirection(from: googledirection, to: googledirection) {           var map = new google.maps.map(document.getelementbyid("maps"), {           zoom: 6,           center: { lat: 45.438384, lng: 10.991622 }         });          var directionsservice = new google.maps.directionsservice;         var directionsdisplay = new google.maps.directionsrenderer;          directionsdisplay.setmap(map);          directionsservice.route({           origin: { lat: from.lat, lng: from.long },           destination: { lat: to.lat, lng: to.long },           waypoints: [],           optimizewaypoints: true,           travelmode: 'driving'         }, (response, status) => {           if (status === 'ok') {             directionsdisplay.setdirections(response);             this.getdistance(from, to).then((km) => {               this.distance = km;              });           } else {             // window.alert('directions request failed due ' + status);             console.log(status);           }         });       }         /**        * function retrive distance km google        * @param         * @param         */       private getdistance(from: googledirection, to: googledirection): promise<number> {          return new promise<number>((resolve, reject) => {            var origin = new google.maps.latlng(from.lat, from.long);            var destination = new google.maps.latlng(to.lat, to.long);             var service = new google.maps.distancematrixservice();           service.getdistancematrix(             {               origins: [origin],               destinations: [destination],               travelmode: 'driving',               avoidhighways: false             }, (response, status) => {               if (status === 'ok') {                 console.log(response);                  var rows = response && response.rows && response.rows.length > 0 ? response.rows[0] : undefined;                 if (!rows) return reject(0);                  var element = rows.elements && rows.elements.length > 0 ? rows.elements[0] : undefined;                 if (!element) return reject(0);                  var distancetxt = element.distance && element.distance.text ? element.distance.text : "";                 if (!distancetxt) return reject(0);                  distancetxt = distancetxt string;                 // esempio: input "1.000,5 km", output "1000.5"                 distancetxt = distancetxt.replace(".", "").tolowercase().replace("km", "").trim().replace(",", ".");                 var distance = math.ceil(parsefloat(distancetxt));                 console.log(distance);                 resolve(distance);               } else {                 // window.alert('directions request failed due ' + status);                 console.log(status);                 reject(0)               }             });            });        }    /////////////////////////////////////

then in html:

<div class="btn-conferma-tratta-box">                     <button class="btn btn-info btn-conferma-tratta" (click)="findposition()"><i class="material-icons">map</i> visualizza itinerario</button>                         <div id="maps"></div>                 </div>

hope helps you!

p.s in package.json: "googleapis": "^19.0.0",


Comments

Post a Comment

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

i'm using class based views in django , never specify url in ajax calls , omit action parameter in form because know these requests go through post method of class based view. notice view - profile page make many requests depending on user updating on page - post method become convoluted , if/else mess example: def post(self, request, *args, **kwargs): # handle user changing available date if request.post.get('availabledate') != none: self.updateavailabledate(request) return jsonresponse({'result':'success'}) if request.post.get('newprojectname') != none: creative_user = creativeuserprofile.objects.get(id = request.user.id) project = project.create_project(creative_user, request.post['newprojectname']) project.save() return jsonresponse({'projectid': project.id }) if request.post.get('projectimage') != none , request.files['file']: proj
Read more

performance - Why is XCHG reg, reg a 3 micro-op instruction on modern Intel architectures? -

i'm doing micro-optimization on performance critical part of code , came across sequence of instructions (in at&t syntax): add %rax, %rbx mov %rdx, %rax mov %rbx, %rdx i thought had use case xchg allow me shave instruction , write: add %rbx, %rax xchg %rax, %rdx however, dimay found agner fog's instruction tables , xchg 3 micro-op instruction 2 cycle latency on sandy bridge, ivy bridge, broadwell, haswell , skylake. 3 whole micro-ops , 2 cycles of latency! 3 micro-ops throws off 4-1-1-1 cadence , 2 cycle latency makes worse original in best case since last 2 instructions in original might execute in parallel. now... cpu might breaking instruction micro-ops equivalent to: mov %rax, %tmp mov %rdx, %rax mov %tmp, %rdx where tmp anonymous internal register , suppose last 2 micro-ops run in parallel latency 2 cycles. given register renaming occurs on these micro-architectures, though, doesn't make sense me done way. why wouldn't register renamer
Read more

jquery - Responsive Navbar with Sub Navbar -

good day, forgive me nav vocabulary not best. if question confusing apologize. i'm working on navigation bar needs centered on page @ 768px , above. items in nav open (or perhaps toggle) subnav lives directly below. these nav should appear centered on page. i have been able work through responsive portion of nav bar, having main items align vertically , sub nav menu of each item roll out below, , gave them indent separation. working well. however, issue not responsive side, behavior @ width greater 768px. happens toggling menu's sub navigation pushes other main items down page below sub nav. here's code: $(document).ready(function () { //stick in fixed 100% height behind navbar don't wrap $('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>')); $('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></d
Read more