Geolocalizar on Page Load con Google Maps y React JS 15.4

3 minuto(s)

En esta página:

Demo Github

Demo Github

La velocidad de carga de los componentes en el DOM mediante React JS es muy buena, que pasa si usamos Geolocalizacion para mostrar nuestra ubicación vamos a experimentar como nos va. Voy a usar la versión 15.4.2 de React JS y la Geolocalizacion Nativa de HTML5 en el Navegador, básicamente convertimos los objetos que nos da Google API y los acoplamos y renderizamos como componentes en el DOM.

Antes de comenzar con el tutorial les recuerdo que en los bloques de códigos mas extensos explico que hace cada línea de código mediante comentarios. Bueno vamos con el tutorial:

Declaro mis variables que voy a emplear en el proyecto


var map, marker, myLatlng, mapOptions, geoCoder, currentLoc, ubicacionActual;

var map, marker, myLatlng, mapOptions, geoCoder, currentLoc, ubicacionActual;

Creamos nuestro componente para Geolocalizar


var Geolocalizar = React.createClass({

var Geolocalizar = React.createClass({

Creamos la función para el botón ‘Buscar mi ubicación’ al hacer click en el botón este llamará a esta función


//Creamos la funcion para el botón 'Buscar mi ubicación'
  getUbicacion: function() {
    
    //Si el Navegador soporta Geolocalización HTML5 que proceda y si no enviamos una alerta
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) { 
        var lat = position.coords.latitude;
        var lng = position.coords.longitude;

        currentLoc = new google.maps.LatLng(lat, lng);

        //Eliminamos el marcador agregado previamente       
        if (marker) {
          marker.setMap(null);
        }        

        var popupContent = '<div id="content"><h5 align="center" id="firstHeading" class="heading">Tu ubicación! </h5></div>'

        var infowindow = new google.maps.InfoWindow({
          content: popupContent
        });

        map.setCenter(currentLoc);//Centramos nuestra ubicación en el centro del mapa

        //Personalizamos el icono de nuestra ubicación
        image = {
            url: 'images/mifp.jpg', // // ubicacion de la imagen de perfil
            scaledSize: new google.maps.Size(50, 50), // medidad de la imagen de perfil
            //origin: new google.maps.Point(0,0), // origin
            //anchor: new google.maps.Point(0, 0) // anchor
        };

        //Creamos el marcador e instanciamos la imagen creada anteriormente
        marker = new google.maps.Marker({
            position: currentLoc,
            map: map,
            zoom: 17,
            title: 'Mi Ubicación',
            icon:image
        });

        infowindow.open(map,marker);
      });
        
    }
    else {
      alert('Tu Navegador no soporta Geolocalización, por favor actualizalo!');
    }
  },

//Creamos la funcion para el botón 'Buscar mi ubicación'

getUbicacion: function() {

//Si el Navegador soporta Geolocalización HTML5 que proceda y si no enviamos una alerta

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(function(position) {

var lat = position.coords.latitude;

var lng = position.coords.longitude;

currentLoc = new google.maps.LatLng(lat, lng);

//Eliminamos el marcador agregado previamente

if (marker) {

marker.setMap(null);

}

var popupContent = '<div id="content"><h5 align="center" id="firstHeading" class="heading">Tu ubicación! </h5></div>'

var infowindow = new google.maps.InfoWindow({

content: popupContent

});

map.setCenter(currentLoc);//Centramos nuestra ubicación en el centro del mapa

//Personalizamos el icono de nuestra ubicación

image = {

url: 'images/mifp.jpg', // // ubicacion de la imagen de perfil

scaledSize: new google.maps.Size(50, 50), // medidad de la imagen de perfil

//origin: new google.maps.Point(0,0), // origin

//anchor: new google.maps.Point(0, 0) // anchor

};

//Creamos el marcador e instanciamos la imagen creada anteriormente

marker = new google.maps.Marker({

position: currentLoc,

map: map,

zoom: 17,

title: 'Mi Ubicación',

icon:image

});

infowindow.open(map,marker);

});

}

else {

alert('Tu Navegador no soporta Geolocalización, por favor actualizalo!');

}

Renderizamos el botón para Buscar mi ubicación, el icono de nuestra ubicación y otros elementos


render: function() {
    return (
      <div className="form-group">

        <h1>Geolocalizar on Page Load con Google Maps y React JS</h1>

        <div className="col-md-3">
          <div className="input-group">
              <button className="btn btn-default" id="buscarmi" onClick={this.getUbicacion}><i className="fa fa-location-arrow"></i>Buscar mi ubicación</button>              
          </div>
        </div>

      </div>
      
    );
  }
});

render: function() {

return (

<h1>Geolocalizar on Page Load con Google Maps y React JS</h1>

<button className="btn btn-default" id="buscarmi" onClick={this.getUbicacion}><i className="fa fa-location-arrow"></i>Buscar mi ubicación</button>

</div>

);

}

});

Renderizamos el mapa


var Gmaps = React.createClass({
  
  render: function() {
    return (
      <div id="map"></div>
    );
  }
});

var Gmaps = React.createClass({

render: function() {

return (

);

}

});

Cargamos la pagina index con la funcion navigator.geolocation.getCurrentPosition nativa de HTML5 para que nos detecte la ubicación al entrar a la Página


var App = React.createClass({

  //Después de renderizar el componente Gmaps, llamamos a la función componentDidMount para enlazar Google Maps con React y sus demas componentes
  componentDidMount: function() {
    
    //Iniciamos Geocoder
    geocoder = new google.maps.Geocoder();

    //Geolocalizamos la ubicacion del usuario al entrer a la página
    myLatlng = navigator.geolocation.getCurrentPosition(function(position) {
      var geolocalizaralcargarpagina = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
      //map.setCenter(geolocalizaralcargarpagina);

        var lat = position.coords.latitude;
        var lng = position.coords.longitude;

        ubicacionActual = new google.maps.LatLng(lat, lng);

        //Eliminamos el marcador agregado previamente
        if (marker) {
          marker.setMap(null);
        }

        var popupContent = '<div id="content"><h5 align="center" id="firstHeading" class="heading">Tu ubicación! </h5></div>'

        var infowindow = new google.maps.InfoWindow({
          content: popupContent
        });

        map.setCenter(ubicacionActual);//Centramos nuestra ubicación en el centro del mapa

        image = {
            url: 'images/mifp.jpg', // url
            scaledSize: new google.maps.Size(50, 50), // scaled size
            origin: new google.maps.Point(0,0), // origin
            anchor: new google.maps.Point(0, 0) // anchor
        };

        marker = new google.maps.Marker({
            position: ubicacionActual,
            map: map,
            zoom: 17,
            title: 'Mi Ubicación',
            icon:image
        });

        infowindow.open(map,marker);

    });

    //Le damos opciones a nuestro mapa
    mapOptions = {
      zoom: 17,
      center: myLatlng
    };

    //Renderizamos el mapa
    map = new google.maps.Map(document.getElementById('map'), mapOptions);

    //Agregamos marcadores al mapa
    marker = new google.maps.Marker({
      position: ubicacionActual,
      map: map,
      title: 'location'
    });  

  },

  
  //Renderizamos los componentes Geolocalizar y Gmaps
  render : function() {
    return (
      <div>
        <Geolocalizar />
        <Gmaps />
      </div> 
    )
  }

});

var App = React.createClass({

//Después de renderizar el componente Gmaps, llamamos a la función componentDidMount para enlazar Google Maps con React y sus demas componentes

componentDidMount: function() {

//Iniciamos Geocoder

geocoder = new google.maps.Geocoder();

//Geolocalizamos la ubicacion del usuario al entrer a la página

myLatlng = navigator.geolocation.getCurrentPosition(function(position) {

var geolocalizaralcargarpagina = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);

//map.setCenter(geolocalizaralcargarpagina);

var lat = position.coords.latitude;

var lng = position.coords.longitude;

ubicacionActual = new google.maps.LatLng(lat, lng);

//Eliminamos el marcador agregado previamente

if (marker) {

marker.setMap(null);

}

var popupContent = '<div id="content"><h5 align="center" id="firstHeading" class="heading">Tu ubicación! </h5></div>'

var infowindow = new google.maps.InfoWindow({

content: popupContent

});

map.setCenter(ubicacionActual);//Centramos nuestra ubicación en el centro del mapa

image = {

url: 'images/mifp.jpg', // url

scaledSize: new google.maps.Size(50, 50), // scaled size

origin: new google.maps.Point(0,0), // origin

anchor: new google.maps.Point(0, 0) // anchor

};

marker = new google.maps.Marker({

position: ubicacionActual,

map: map,

zoom: 17,

title: 'Mi Ubicación',

icon:image

});

infowindow.open(map,marker);

});

//Le damos opciones a nuestro mapa

mapOptions = {

zoom: 17,

center: myLatlng

};

//Renderizamos el mapa

map = new google.maps.Map(document.getElementById('map'), mapOptions);

//Agregamos marcadores al mapa

marker = new google.maps.Marker({

position: ubicacionActual,

map: map,

title: 'location'

});

//Renderizamos los componentes Geolocalizar y Gmaps

render : function() {

return (

<div>

</div>

)

}

});

Enviamos todo al div o capa #contenedor_mapa


ReactDOM.render(<App />, document.getElementById('contenedor_mapa'));

ReactDOM.render(<App />, document.getElementById('contenedor_mapa'));

En nuestra vista vamos a crear el div #contenedor_mapa


<div id="contenedor_mapa"> </div>

Ahora no olvidemos instanciar los recursos necesarios para correr React JS y Google Maps, yo los instancio en la parte de abajo antes de cerrar la etiqueta </body>


<!-- script -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
  <script src="js/JSXTransformer.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=TUAPIKEYACA&libraries=places" async defer></script>
  <script src="js/application.js" type="text/jsx" ></script>
</body>
</html>

</body>

</html>

Nota: Para que no te compliques dejo el codigo en el repo Github para que lo mires con calma y lo pruebes en tu servidor, al inicio de este articulo esta el botón Github para ir al repo y puedas descargarte todo el codigo fuente.

Por favor no olvides seguirnos en nuestras redes sociales, eso nos motiva mucho a seguir adelante.

Espero que te sea muy útil este tutorial, nos vemos hasta un próximo tutorial.