CodeSolution

Please wait...

Drag and Drop Google map in Ionic 2 and Javascript

@ionic  @ google map  @ drag and drop  @ application  @ javascript  

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>