Commit 5b9306e3 authored by mohan122's avatar mohan122

added_google_map

parent f2d4c703
This diff is collapsed.
......@@ -2,4 +2,7 @@ page-home {
#BUTON {
background: color($colors, vamsi);
}
.bg {
background: color($colors, vamsi);
}
}
\ No newline at end of file
......@@ -14,15 +14,20 @@
<ion-content padding>
<!--
<ion-item id="password" style="position: relative; padding:0px;">
<ion-label floating>LOCATION</ion-label>
<ion-input type="text" value="{{ location?.coords.latitude}} {{ location?.coords.longitude }}" readonly></ion-input>
</ion-item>
-->
<div padding>
<button block ion-button color="vamsi" style="padding:0px; width: 100%;" medium (click)="mapUser()">LOCATE ME</button>
</div>
<agm-map [latitude]=" location?.coords.latitude" [longitude]="location?.coords.longitude" [mapTypeId]="'roadmap'">
<agm-marker [latitude]=" location?.coords.latitude" [longitude]="location?.coords.longitude" [markerClickable]="true"></agm-marker>
<agm-map [disableDefaultUI]="true" [latitude]="location?.coords.latitude" [streetViewControl]="true" [longitude]="location?.coords.longitude" [mapTypeId]="'roadmap'" [zoom]="15">
<agm-marker [label]="location.title" [latitude]=" location?.coords.latitude" [longitude]="location?.coords.longitude" [markerClickable]="true"></agm-marker>
</agm-map>
<div id=map></div>
</ion-content>
\ No newline at end of file
......@@ -4,7 +4,13 @@ page-maps {
width: 95%;
}
agm-map {
height: 300px;
zoom: 100%;
height: 400px;
width: 320px;
position: absolute;
left: 0;
bottom: 5;
}
map {
height: 400px;
}
}
\ No newline at end of file
......@@ -2,6 +2,15 @@ import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams ,Platform} from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { AgmCoreModule } from '@agm/core';
/*import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
GoogleMapOptions,
CameraPosition,
MarkerOptions,
Marker
} from '@ionic-native/google-maps';*/
/**
* Generated class for the MapsPage page.
......@@ -10,6 +19,7 @@ import { AgmCoreModule } from '@agm/core';
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-maps',
......@@ -18,9 +28,52 @@ import { AgmCoreModule } from '@agm/core';
export class MapsPage {
location:any;
// map: GoogleMap;
constructor(public navCtrl: NavController, public navParams: NavParams,private geolocation: Geolocation,public platform:Platform) {
}
/*loadMap() {
let mapOptions: GoogleMapOptions = {
camera: {
target: {
lat: 43.0741904,
lng: -89.3809802
},
zoom: 18,
tilt: 30
}
};
this.map = GoogleMaps.create('map_canvas', mapOptions);
// Wait the MAP_READY before using any methods.
this.map.one(GoogleMapsEvent.MAP_READY)
.then(() => {
console.log('Map is ready!');
// Now you can use all methods safely.
this.map.addMarker({
title: 'Ionic',
icon: 'blue',
animation: 'DROP',
position: {
lat: 43.0741904,
lng: -89.3809802
}
})
.then(marker => {
marker.on(GoogleMapsEvent.MARKER_CLICK)
.subscribe(() => {
alert('clicked');
});
});
});
}*/
mapUser(){
this.platform.ready().then(()=>{
let options={timeout:3000,enableHighAccuracy:true,maximumAge:0}
......@@ -35,6 +88,7 @@ this.geolocation.getCurrentPosition(options).then((location) => {
ionViewDidLoad() {
console.log('ionViewDidLoad MapsPage');
//this.loadMap();
}
}
......@@ -33,7 +33,7 @@
</ion-item>
</ion-list>
<div padding>
<button block ion-button color="vamsi" style="padding:0px; width: 100%;" medium>Sign In</button>
<button block ion-button color="vamsi" style="padding:0px; width: 100%;" medium (click)="Map()">Sign In</button>
<div class="spacer" style="width: 50px; height: 10px;"></div>
<button block ion-button color="light" medium (click)="Register()">Register</button>
</div>
......
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { RegisterPage } from '../register/register';
import { MapsPage} from '../maps/maps';
/**
* Generated class for the PloginPage page.
......@@ -20,6 +21,9 @@ export class PloginPage {
}
Register() {
this.navCtrl.push(RegisterPage);
}
Map() {
this.navCtrl.setRoot(MapsPage);
}
ionViewDidLoad() {
console.log('ionViewDidLoad PloginPage');
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment