Google Map in Sharepoint SPFx with Angular
Author: Shahim Sadakath
Google Map in Sharepoint SPFx with Angular
Author: Shahim Sadakath
1) Introduction
This article is going to describe how to set up Sharepoint Framework (SPFx) Development with Angular using a template project created by Sahil Malik which is available at https://github.com/maliksahil/SPFxAngularCLI
I modified Sahil's work, integrated Google Map API and Goodzer API to an Angular Sharepoint SPFx web part. The modified code is available at https://github.com/shahimsadakath/spfx-google-map-sample
If you are new to Sharepoint SPFx and you haven't set up your development environment yet. My previous article at http://shadotnet.blogspot.com/2018/05/starting-sharepoint-framework-spfx.html will be useful.
Let's get started.
2) Steps to integrate Goodzer API
export class AppSettings {
public static GOODZER_API_ENDPOINT='https://api.goodzer.com/products/v0.1/';
public static GOODZER_API_KEY ='{your_API_Key}';
public static GMAP_URL = "https://maps.google.com/maps/api/js?key={your_API_Key}";
}
3. I added goodzer.service.ts in src -> services to access the Goodzer API as shown below
import { Injectable } from '@angular/core';
import {Http,Headers,RequestOptions, Response } from '@angular/http';
import { AppSettings } from '../app.settings';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map'
@Injectable()
export class GoodzerService {
constructor(private http: Http) {
}
searchLocations(searchText:string,latitude:string,longitude:string) : Observable
{
let headers: Headers = new Headers();
headers.append('Accept', 'application/json');
headers.append('Content-Type', 'application/json');
headers.append('Access-Control-Allow-Origin', '*');
let options = new RequestOptions({
headers: headers
});
return this.http.get(AppSettings.GOODZER_API_ENDPOINT
+'/search_locations/?query='+
searchText+
'&lat='+latitude+'&lng='+longitude+'&radius=5.0&apiKey='+AppSettings.GOODZER_API_KEY,options)
.map((response: Response) => {
//console.log(response);
return response.json();
}).catch(this.handleError);
}
searchStores(searchText:string,latitude:string,longitude:string) : Observable
{
let headers: Headers = new Headers();
headers.append('Accept', 'application/json');
headers.append('Content-Type', 'application/json');
headers.append('Access-Control-Allow-Origin', '*');
let options = new RequestOptions({
headers: headers
});
return this.http.get(AppSettings.GOODZER_API_ENDPOINT
+'/search_stores/?query='+
searchText+
'&lat='+latitude+'&lng='+longitude+'&radius=5.0&apiKey='+AppSettings.GOODZER_API_KEY,options)
.map((response: Response) => {
return response.json();
}).catch(this.handleError);
}
searchInStores(searchText:string,storeId:string) : Observable
{
let headers: Headers = new Headers();
headers.append('Accept', 'application/json');
headers.append('Content-Type', 'application/json');
headers.append('Access-Control-Allow-Origin', '*');
let options = new RequestOptions({
headers: headers
});
return this.http.get(AppSettings.GOODZER_API_ENDPOINT
+'/search_in_store/?query='+
searchText+
'&storeId='+storeId+'&apiKey='+AppSettings.GOODZER_API_KEY,options)
.map((response: Response) => {
console.log(response);
return response.json();
}).catch(this.handleError);
}
private handleError (error: Response | any) {
// In a real world app, we might use a remote logging infrastructure
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
const err = body.error || JSON.stringify(body);
errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
}else {
errMsg = error.message ? error.message : error.toString();
}
//console.log(error);
return Observable.throw(errMsg);
}
}
3) Steps to integrate Google Maps API
addMapsScript() { if (!document.querySelectorAll(`[src="${AppSettings.GMAP_URL}"]`).length) {
document.body.appendChild(Object.assign(
document.createElement('script'), {
type: 'text/javascript',
src: AppSettings.GMAP_URL,
onload: () => this.doMapInitLogic()
}));
} else {
this.doMapInitLogic();
}
}
4) Demo
5. But you can Edit the web part as shown below and change the coordinates to any city within United States, I changed it to Chicago.
6. Then reload the page now you will see that city Chicago as below
7. Type any product in Search Bar and Press Search button, it will call the Goodzer API to find the shops having the product you searched for and mark them on the map.
8. You can click on any shop and Get the direction by clicking "Get Directions" button as shown below
5) References and Further Reading
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview
https://developer.goodzer.com/docs/
https://developers.google.com/maps/documentation/javascript/tutorial
https://www.youtube.com/watch?v=_OgEqWtouuU
Довольно интересно _________________ [URL=https://zekalocasino.topgameslist.xyz/kazino-den-za-registraciyu/]Казино день за регистрацию[/URL].
Read MoreИнтересная новость _________________ [url=https://google.com.sg/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwiu99CZ6K_sAhVSSxoKHSAjDK4QFjAAegQIAhAC&url=https://worldcrypto.store/?p=14537&usg=AOvVaw2qwfC8Bi40tF7oJnu043VZ]казино в г.
Read MoreИнтересная новость _________________ [URL=https://zekalocasino.topgameslist.xyz/bonus-registraciya-onlayn-kazino/]Бонус регистрация онлайн казино[/URL].
Read MorePlease login or register to post a comment.
There are currently no comments.