In my project, I have a database containing a list of latitudes and longitudes, corresponding to several addresses, and I want to take them from this database and plot (with routes) them all in Google Maps using Angular 2. However, I am stuck in this problem. I got no output. My code looks like this.
The service component looks like this.
import { Injectable } from '@angular/core';
import {Http, Response, Headers, RequestOptions} from "@angular/http";
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
@Injectable()
export class HawkerserviceService{
baseUrl: string;
constructor(private http: Http) {
}
fetchNews(): Observable<any> {
return this.http.get('assets/data/locations.json')
.map(response => response.json());
}
}
And I have called it in home component and looks like this
import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs/Rx';
import {HawkerserviceService } from '../hawkerservice.service';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
public latitude: number;
public longitude: number;
public places: any[];
constructor( private hawkerservice: HawkerserviceService) { }
ngOnInit() {
this.hawkerservice.fetchNews()
.subscribe(
data=> {this.places= data.locations},
Error=> console.log('this.places')
);
}
}
My HTML component is
<li *ngFor="let location of places>
<sebm-google-map [latitude]={{location.latitude}}
[longitude]={{location.longitude}}>
<sebm-google-map-marker [latitude]={{location.latitude}}
[longitude]={{location.longitude}}></sebm-google-map-marker>
</sebm-google-map>
</li>
But I am not getting any output.
My JSON data looks like this
{
"locations": [
{
"title": "Sangam Chowk",
"latitude": 27.692612,
"longitude": 85.342982
},
{
"title": "Kharikobot",
"latitude": 27.690227,
"longitude": 85.342671
},
{
"title": "Ace Instute Of management",
"latitude": 27.690693,
"longitude": 85.339581
}
]
}
What is the best way to do this?
Click on the Add New Layer button to start mapping coordinates. A window with three options will appear. You can use a (pre-) selected range to add as a map layer, an entire Excel data sheet, or a vector map layer in Esri Shape format. Select your data (From Selection or From Sheet) and click Next.
The geographic coordinate system consists of latitude and longitude lines. Each line of longitude runs north–south and measures the number of degrees east or west of the prime meridian. Values range from -180 to +180°. Lines of latitude run east–west and measure the number of degrees north or south of the equator.
Be sure of the path. Try changing the path string with something like './assets/data/locations.json'
(note the ./
)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With