Drag and Drop Google map in Ionic 2 and Javascript
Google
map
ionic2
Drag
Drop
- By Code solution
- Jan 20th, 2021
- 0 comments
- 0
Creating a new Ionic 2 Project for google map
Get full address using drag and drop the marker on the map in the ionic2 and Angular2.
View Demo : https://www.youtube.com/watch?v=Xlktxq2l5cU
To create a new Ionic 2 project, we can run the following command:
ionic start googlemap blank
then move inside the newly created directory:
cd googlemap
Open up home.html in Pages -> home directory and add the below code between the ion-content tags.
<div id="map_canvas"></div>
Open home.scss and add the css:
page-home {
#map_canvas {
height: 100%;
}
}
Open home.ts and add the code:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
declare var google:any;
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
map: any;
markers = [];
constructor(public navCtrl: NavController) {
}
ionViewDidLoad(){
this.initializeMap();
}
initializeMap() {
var geocoder;
let locationOptions = {timeout: 20000, enableHighAccuracy: true};
navigator.geolocation.getCurrentPosition(
(position) => {
var latlong = new google.maps.LatLng(position.coords.latitude, position.coords.longitude
let options = {
center: latlong,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var directionsService = new google.maps.DirectionsService;
this.map = new google.maps.Map(document.getElementById("map_canvas"), options);
var marker = new google.maps.Marker({
draggable: true,
map: this.map,
animation: google.maps.Animation.DROP,
position: latlong
});
// geocodePosition(marker.getPosition());
this.markers.push(marker);
google.maps.event.addListener(marker, 'dragend', function()
{
geocodePosition(marker.getPosition());
});
function geocodePosition(pos)
{
geocoder = new google.maps.Geocoder();
geocoder.geocode
({
latLng: pos
},
function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
this.address = results[0].formatted_address;
alert("Drop Address = "+ results[0].formatted_address);
}
else
{
console.log('Cannot determine address at this location.'+ status);
}
}
);
}
},
(error) => {
console.log(error);
}, locationOptions
);
}
}
Open index.html and add this script below the <ion-app></ion-app> tag:
<script src="http://maps.google.com/maps/api/js"></script>
?
drag and drop google map code are done you add platform in your application code platform add command:
ionic cordova platform add android/ios/windows
Build and Run command
ionic cordova build android/ios/windows ionic cordova run android/ios/windows
Github link: https://github.com/Sudarshan101/googlemap
thank you :)