davidmaogomezz/App Ionic Framework con Google Maps, Marker y Geolocalización.markdown

## App Ionic Framework con Google Maps, Marker y Geolocalización.markdown

      
    Raw
  

              App Ionic Framework con Google Maps, Marker y Geolocalización.markdown
            
          
    App Ionic Framework con Google Maps, Marker y Geolocalización

Este ejemplo permite abrir un Modal de Ionic, el cual contiene una directiva que se encarga de cargar un mapa que ubica un Marker según la geolocalización la primera vez que se abre, permitiendo luego cambiar la ubicación del Marker al dar un toque en cualquier parte del mapa
A Pen by Juan David Nicholls Cardona on CodePen.
License.

  
## index.html
<html ng-app="App">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Directiva de Mapa con Ionic y la Geolocalización Funcionando</title>

    <link href="//code.ionicframework.com/1.0.0-rc.3/css/ionic.min.css" rel="stylesheet">
    <script src="//code.ionicframework.com/1.0.0-rc.3/js/ionic.bundle.min.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
  </head>
  <body ng-controller="HomeController">

    <div class="bar bar-header">
      <h1 class="title">Mapa con Marker y Geolocalización</h1>
    </div>
    <ion-content class="padding has-subheader">
      <div class="list">
        <div class="item">
          Latitud: {{ ubicacion.latitud }}
        </div>
        <div class="item">
          Longitud: {{ ubicacion.longitud }}
        </div>
      </div>
      <div class="padding">
        <button ng-click="Geolocalizar()" class="button button-block button-assertive">Geolocalizar</button>
      </div>
    </ion-content>
    <script id="modalMapa.html" type="text/ng-template">
      <div class="modal" style="height: 100%;">
        <header class="bar bar-header bar-positive">
            <h1 class="title">MAPA</h1>
            <div class="button button-clear" ng-click="modal.remove()"><span class="icon ion-close"></span></div>
        </header>
        <map scroll="false" data-tap-disabled="true" latitud="ubicacion.latitud" longitud="ubicacion.longitud" geolocalizado="ubicacion.geolocalizado" style="width: 100%;height: 100%;display: block;"></map>
      </div>
    </script>
  </body>
</html>

## script.js
angular.module('App', ['ionic'])

.controller('HomeController', function($scope, $ionicModal) {
  $scope.ubicacion = {
    latitud : 0,
    longitud : 0,
    geolocalizado : false
  };
  $scope.Geolocalizar = function () { $ionicModal.fromTemplateUrl('modalMapa.html', {
      scope: $scope,
      animation: 'slide-in-up'
    }).then(function (modal) {
      $scope.modal = modal;
      $scope.modal.show();
    });
  };
})
.directive('map', function ($ionicLoading) {
    return {
        restrict: 'E',
      	scope: {
          latitud : "=",
          longitud : "=",
          geolocalizado : "="
        },
      	bindToController: true,
        template: "<div></div>",
        controller: function ($scope, $element) {
          debugger;
          function CreateMap(centro, successFunction) {
                var map = new google.maps.Map($element[0], {
                    center: centro,
                    zoom: 17,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    panControl: false,
                    streetViewControl: false,
                    zoomControlOptions: {
                        position: google.maps.ControlPosition.LEFT_CENTER
                    }
                });
                var styledMapType = new google.maps.StyledMapType([
                {
                    featureType: 'all',
                    elementType: 'all',
                    stylers: [
                    { saturation: -99 }
                  ]
                }], {
                    map: map,
                    name: 'Night Map'
                });
                map.mapTypes.set('map-style', styledMapType);
                map.setMapTypeId('map-style');
                google.maps.event.addDomListener($element[0], 'mousedown', function (e) {
                    e.preventDefault();
                    return false;
                });
                google.maps.event.addListener(map, 'click', function (e) {
                    CreateMarker(e.latLng);
                });
                google.maps.event.addListener(map, "idle", function () {
                    google.maps.event.trigger(map, 'resize');
                });
                var marker = new google.maps.Marker();
                function CreateMarker(latLng) {
                    	$scope.latitud = latLng.lat(); //latitud
                      $scope.longitud = latLng.lng(); //longitud
                    console.log($scope.latitud);
                    console.log($scope.longitud);
                    marker.setMap(null);
                    marker = new google.maps.Marker({
                        position: latLng,
                        animation: google.maps.Animation.DROP,
                        map: map
                    });
                    map.setZoom(17);
                    setTimeout(function () {
                        map.setZoom(18);
                        map.setCenter(latLng);
                    }, 500);
                }
                if (successFunction) {
                    successFunction(CreateMarker);
                }
            }
            if (!$scope.geolocalizado) {//No se ha obtenido la ubicación
                $ionicLoading.show({
                    template: 'Cargando...'
                });
                navigator.geolocation.getCurrentPosition(function (pos) {
                    var LatLng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
                    CreateMap(LatLng, function (CreateMarker) {
                        CreateMarker(LatLng);
                        $ionicLoading.hide();
                        $scope.geolocalizado = true;
                    });
                }, function () {
                    //Ubicación por defecto
                    var LatLng = new google.maps.LatLng(6.233311, -75.575248);
                    CreateMap(LatLng, function () {
                        $ionicLoading.hide();
                        $scope.geolocalizado = true;
                    });
                },{maximumAge: 3000, timeout: 5000, enableHighAccuracy: true});
            } else {
                var LatLng = new google.maps.LatLng($scope.latitud,
                                                 $scope.longitud);
                CreateMap(LatLng, function (CreateMarker) {
                    CreateMarker(LatLng);
                });
            }
        }
    }
});;

## style.css
body {
  cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
	<html ng-app="App">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

	<title>Directiva de Mapa con Ionic y la Geolocalización Funcionando</title>

	<link href="//code.ionicframework.com/1.0.0-rc.3/css/ionic.min.css" rel="stylesheet">
	<script src="//code.ionicframework.com/1.0.0-rc.3/js/ionic.bundle.min.js"></script>
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
	</head>
	<body ng-controller="HomeController">

	<div class="bar bar-header">
	<h1 class="title">Mapa con Marker y Geolocalización</h1>
	</div>
	<ion-content class="padding has-subheader">
	<div class="list">
	<div class="item">
	Latitud: {{ ubicacion.latitud }}
	</div>
	<div class="item">
	Longitud: {{ ubicacion.longitud }}
	</div>
	</div>
	<div class="padding">
	<button ng-click="Geolocalizar()" class="button button-block button-assertive">Geolocalizar</button>
	</div>
	</ion-content>
	<script id="modalMapa.html" type="text/ng-template">
	<div class="modal" style="height: 100%;">
	<header class="bar bar-header bar-positive">
	<h1 class="title">MAPA</h1>
	<div class="button button-clear" ng-click="modal.remove()"><span class="icon ion-close"></span></div>
	</header>
	<map scroll="false" data-tap-disabled="true" latitud="ubicacion.latitud" longitud="ubicacion.longitud" geolocalizado="ubicacion.geolocalizado" style="width: 100%;height: 100%;display: block;"></map>
	</div>
	</script>
	</body>
	</html>
	angular.module('App', ['ionic'])

	.controller('HomeController', function($scope, $ionicModal) {
	$scope.ubicacion = {
	latitud : 0,
	longitud : 0,
	geolocalizado : false
	};
	$scope.Geolocalizar = function () { $ionicModal.fromTemplateUrl('modalMapa.html', {
	scope: $scope,
	animation: 'slide-in-up'
	}).then(function (modal) {
	$scope.modal = modal;
	$scope.modal.show();
	});
	};
	})
	.directive('map', function ($ionicLoading) {
	return {
	restrict: 'E',
	scope: {
	latitud : "=",
	longitud : "=",
	geolocalizado : "="
	},
	bindToController: true,
	template: "<div></div>",
	controller: function ($scope, $element) {
	debugger;
	function CreateMap(centro, successFunction) {
	var map = new google.maps.Map($element[0], {
	center: centro,
	zoom: 17,
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	panControl: false,
	streetViewControl: false,
	zoomControlOptions: {
	position: google.maps.ControlPosition.LEFT_CENTER
	}
	});
	var styledMapType = new google.maps.StyledMapType([
	{
	featureType: 'all',
	elementType: 'all',
	stylers: [
	{ saturation: -99 }
	]
	}], {
	map: map,
	name: 'Night Map'
	});
	map.mapTypes.set('map-style', styledMapType);
	map.setMapTypeId('map-style');
	google.maps.event.addDomListener($element[0], 'mousedown', function (e) {
	e.preventDefault();
	return false;
	});
	google.maps.event.addListener(map, 'click', function (e) {
	CreateMarker(e.latLng);
	});
	google.maps.event.addListener(map, "idle", function () {
	google.maps.event.trigger(map, 'resize');
	});
	var marker = new google.maps.Marker();
	function CreateMarker(latLng) {
	$scope.latitud = latLng.lat(); //latitud
	$scope.longitud = latLng.lng(); //longitud
	console.log($scope.latitud);
	console.log($scope.longitud);
	marker.setMap(null);
	marker = new google.maps.Marker({
	position: latLng,
	animation: google.maps.Animation.DROP,
	map: map
	});
	map.setZoom(17);
	setTimeout(function () {
	map.setZoom(18);
	map.setCenter(latLng);
	}, 500);
	}
	if (successFunction) {
	successFunction(CreateMarker);
	}
	}
	if (!$scope.geolocalizado) {//No se ha obtenido la ubicación
	$ionicLoading.show({
	template: 'Cargando...'
	});
	navigator.geolocation.getCurrentPosition(function (pos) {
	var LatLng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
	CreateMap(LatLng, function (CreateMarker) {
	CreateMarker(LatLng);
	$ionicLoading.hide();
	$scope.geolocalizado = true;
	});
	}, function () {
	//Ubicación por defecto
	var LatLng = new google.maps.LatLng(6.233311, -75.575248);
	CreateMap(LatLng, function () {
	$ionicLoading.hide();
	$scope.geolocalizado = true;
	});
	},{maximumAge: 3000, timeout: 5000, enableHighAccuracy: true});
	} else {
	var LatLng = new google.maps.LatLng($scope.latitud,
	$scope.longitud);
	CreateMap(LatLng, function (CreateMarker) {
	CreateMarker(LatLng);
	});
	}
	}
	}
	});;
	body {
	cursor: url('http://ionicframework.com/img/finger.png'), auto;
	}