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>