google maps api – ProgramaciónExtrema.com https://programacionextrema.com Tutoriales de programación! Thu, 11 Aug 2016 01:56:48 +0000 es hourly 1 https://wordpress.org/?v=5.6.15 https://programacionextrema.com/wp-content/uploads/2015/10/cropped-icon-programacion-extrema-32x32.png google maps api – ProgramaciónExtrema.com https://programacionextrema.com 32 32 Animar un marker en Google Maps https://programacionextrema.com/2015/12/06/animar-marker-google-maps/ https://programacionextrema.com/2015/12/06/animar-marker-google-maps/#respond Sun, 06 Dec 2015 03:16:06 +0000 http://programacionextrema.com/?p=909 En esta ocasión veremos cómo animar un marker en Google Maps utilizando la función setTimeout() que nos ofrece Java Script, si no entienden como funciona dicha función los invito a pasar por el tutorial donde se explica: http://programacionextrema.com/2015/11/13/funciones-setinterval-y-settimeout-en-java-script. Cómo animar un marker en Google Maps Para realizar la animación vamos a utilizar la propiedad animation… Read More

La entrada Animar un marker en Google Maps aparece primero en ProgramaciónExtrema.com.

]]> En esta ocasión veremos cómo animar un marker en Google Maps utilizando la función setTimeout() que nos ofrece Java Script, si no entienden como funciona dicha función los invito a pasar por el tutorial donde se explica: http://programacionextrema.com/2015/11/13/funciones-setinterval-y-settimeout-en-java-script.

Cómo animar un marker en Google Maps

Para realizar la animación vamos a utilizar la propiedad animation con el valor google.maps.Animation.DROP al crear un marker:

new google.maps.Marker({
            position: position,
            map: map,
            animation: google.maps.Animation.DROP
          });

A continuación un ejemplo completo donde se agregan varios markers a un mapa con una animación en tiempos diferentes, utilizando la función setTimeout().

<!DOCTYPE html>
<html style="height:100%">
  <head>
    <title>Animar un marker en Google Maps</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
      html, body{
        height:100%;
        margin: 0px;
      }
      #googleMap{
        width:100%;
        height:100%;
      }
    </style>
    <script type="text/javascript">
      var neighborhoods = [
        {lat: 52.511, lng: 13.447},
        {lat: 52.549, lng: 13.422},
        {lat: 52.497, lng: 13.396},
        {lat: 52.517, lng: 13.394}
      ];
      
      var markers = [];
      var map;
      	
      function initialize() {
        // Configuración del mapa
        var mapProp = {
          zoom: 12,
          center: {lat: 52.520, lng: 13.410}
        };
        // Agregando el mapa al tag de id googleMap
        map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
              
      	// Luego de 8 segundos comienza la animación
      	setTimeout(function(){
      	  drop();
      	}, 8000)
             
      }
      
      // Elimina y vuelve a cargar los markers
      function drop() {
        clearMarkers();
        for (var i = 0; i < neighborhoods.length; i++) {
		  // Se agrega un marker con un tiempo diferente
          addMarkerWithTimeout(neighborhoods[i], i * 200);
        }
      }
      
      // Agrega un marker con una animación después de un tiempo (timeout)
      function addMarkerWithTimeout(position, timeout) {
        window.setTimeout(function() {
          markers.push(new google.maps.Marker({
            position: position,
            map: map,
            animation: google.maps.Animation.DROP
          }));
        }, timeout);
      }
      
      // Elimina los markers del mapa
      function clearMarkers() {
        for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(null);
        }
        markers = [];
      }
             
    </script>
    <script async defer type="text/javascript" src="http://maps.googleapis.com/maps/api/js?signed_in=true&callback=initialize"></script>
  </head>
  <body>
    <div id="googleMap"></div>
  </body>
</html>

Solamente incluyendo el código anterior en un archivo HTML podrán visualizar el mapa con la animación de markers en el navegador.

Hemos llegado al final de este tutorial, espero que les sea de gran utilidad y ante cualquier problema no duden en dejar un comentario.

La entrada Animar un marker en Google Maps aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/12/06/animar-marker-google-maps/feed/ 0 Crear un polígono en Google Maps https://programacionextrema.com/2015/12/04/crean-un-poligono-en-google-maps/ https://programacionextrema.com/2015/12/04/crean-un-poligono-en-google-maps/#respond Fri, 04 Dec 2015 19:40:15 +0000 http://programacionextrema.com/?p=896 La API de Google Maps nos ofrece muchas características y funcionalidades para poder manipular un mapa, ya sea para la versión web o móvil. Entre las funcionalidades se destaca la posibilidad de crear un polígono, la cual veremos en esta ocasión. Cómo crear un polígono en Google Maps Para crear un polígono en Google Maps… Read More

La entrada Crear un polígono en Google Maps aparece primero en ProgramaciónExtrema.com.

]]> La API de Google Maps nos ofrece muchas características y funcionalidades para poder manipular un mapa, ya sea para la versión web o móvil. Entre las funcionalidades se destaca la posibilidad de crear un polígono, la cual veremos en esta ocasión.

Cómo crear un polígono en Google Maps

Para crear un polígono en Google Maps vamos a utilizar el objeto google.maps.Polygon, con el cual definiremos las coordenadas, el color de las lineas que une los puntos y el grosor, entre otras cosas. En el siguiente ejemplo, gracias al objeto mencionado, vamos a ver un polígono que une a la Argentina con Brasil y Chile, mediante una linea roja.

<!DOCTYPE html>
<html style="height:100%">
  <head>
    <title>Crean un polígono en Google Maps</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
      html, body{
        height:100%;
        margin: 0px;
      }
      #googleMap{
        width:100%;
        height:100%;
      }
    </style>
    <script type="text/javascript">
      function initialize() {
        // Configuración del mapa
        var mapProp = {
          center: {lat: -30.466697939183756, lng: -63.462234249999995},
          zoom: 4,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        // Agregando el mapa al tag de id googleMap
        var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
       
      
        // Definiendo las coordenadas para el path del polígono
        var triangleCoords = [
          {lat: -34.6036844, lng: -58.381559100000004}, // Brasil
          {lat: -14.235004, lng: -51.92527999999999},// Argentina
          {lat: -33.4488897, lng: -70.6692655} // Chile
        ];
      
        // Construyendo el póligono
        var poligono = new google.maps.Polygon({
          paths: triangleCoords,
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.35
        });
        poligono.setMap(map);
      
      }
      
    </script>
    <script async defer type="text/javascript" src="http://maps.googleapis.com/maps/api/js?signed_in=true&callback=initialize"></script>
  </head>
  <body>
    <div id="googleMap"></div>
  </body>
</html>

Es importante prestar atención a la linea poligono.setMap(map), ya que de esa forma se agrega el polígono al mapa.
Para agregar o cambiar las coordenadas que definen el polígono debemos utilizar la variable triangleCoords, la cual es de tipo array.

Si visualizamos el mapa en nuestro navegador el resultado seria el siguiente:

Polígono en Google Maps

Polígono en Google Maps

Bueno gente, eso es todo por hoy. Si tienen algún problema no duden en dejar un comentario.

La entrada Crear un polígono en Google Maps aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/12/04/crean-un-poligono-en-google-maps/feed/ 0 Marker draggable en Google Maps https://programacionextrema.com/2015/12/02/marker-draggable-en-google-maps/ https://programacionextrema.com/2015/12/02/marker-draggable-en-google-maps/#respond Wed, 02 Dec 2015 23:53:01 +0000 http://programacionextrema.com/?p=871 En este sencillo tutorial aprenderemos a realizar un marker draggable en Google Maps, para eso vamos a utilizar la función google.maps.event.addListener que nos permite registrar un evento determinado sobre un marker. ¿Cómo hacer un marker draggable en Google Maps? Mediante un ejemplo vamos a mostrar cómo agregar el evento draggable a un marker. En este… Read More

La entrada Marker draggable en Google Maps aparece primero en ProgramaciónExtrema.com.

]]> En este sencillo tutorial aprenderemos a realizar un marker draggable en Google Maps, para eso vamos a utilizar la función google.maps.event.addListener que nos permite registrar un evento determinado sobre un marker.

¿Cómo hacer un marker draggable en Google Maps?

Mediante un ejemplo vamos a mostrar cómo agregar el evento draggable a un marker. En este caso al ejecutar dicho evento vamos a imprimir en consola la latitud y longitud nueva del marker:

<!DOCTYPE html>
<html style="height:100%">
  <head>
    <title>Marker draggable en Google Maps</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
      html, body{
        height:100%;
        margin: 0px;
      }
      #googleMap{
        width:100%;
        height:100%;
      }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      function initialize() {
        // Configuración del mapa
        var mapProp = {
          center: new google.maps.LatLng(-34.5862088, -58.415677500000015),
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        // Agregando el mapa al tag de id googleMap
        var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
       
        // Creando un marker en el mapa
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(-34.5862088, -58.415677500000015),
          map: map,
          title: 'Hello World!',
          draggable: true //que el marcador se pueda arrastrar
        });
      
        // Registrando el evento drag, en este caso imprime 
        // en consola la latitud y longitud
        google.maps.event.addListener(marker,'drag',function(event) {
          console.log(event.latLng.lat());
          console.log(event.latLng.lng());
        });
      
      }
       
      // Inicializando el mapa cuando se carga la página
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="googleMap"></div>
  </body>
</html>

Es importante prestar atención a la variable draggable que se le pasa por parámetro al marker cuando se lo crea, sin esa variable en true el marker no se puede hacer draggable.

Bueno gente, espero que les sea de gran utilidad este sencillo código y ante cualquier inconveniente no duden en comentar.

La entrada Marker draggable en Google Maps aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/12/02/marker-draggable-en-google-maps/feed/ 0 Cambiar iconos en Google Maps https://programacionextrema.com/2015/12/02/cambiar-iconos-en-google-maps/ https://programacionextrema.com/2015/12/02/cambiar-iconos-en-google-maps/#respond Wed, 02 Dec 2015 22:39:48 +0000 http://programacionextrema.com/?p=865 Hoy vamos a seguir con el tema de Google Maps como lo hicimos en los anteriores tutoriales, en el último hemos visto cómo crear un evento click sobre un marker, hoy aprenderemos a cambiar iconos en Google Maps, ya que a veces los que vienen incluidos por defecto no se adecuan con el diseño de… Read More

La entrada Cambiar iconos en Google Maps aparece primero en ProgramaciónExtrema.com.

]]> Hoy vamos a seguir con el tema de Google Maps como lo hicimos en los anteriores tutoriales, en el último hemos visto cómo crear un evento click sobre un marker, hoy aprenderemos a cambiar iconos en Google Maps, ya que a veces los que vienen incluidos por defecto no se adecuan con el diseño de nuestras aplicaciones o sitios webs.

¿Cómo cambiar iconos en Google Maps?

Realizar esta tarea es muy fácil, solamente debemos indicar el path de la nueva imagen al objeto marker a través del parámetro icon. En el siguiente código podemos ver un ejemplo completo:

<!DOCTYPE html>
<html style="height:100%">
  <head>
    <title>Cambiar iconos en Google Maps</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
      html, body{
        height:100%;
        margin: 0px;
      }
      #googleMap{
        width:100%;
        height:100%;
      }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      function initialize() {
        // Configuración del mapa
        var mapProp = {
          center: new google.maps.LatLng(-34.5862088, -58.415677500000015),
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        // Agregando el mapa al tag de id googleMap
        var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
       
        // Creando un marker en el mapa
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(-34.5862088, -58.415677500000015),
          map: map,
          title: 'Hello World!',
          icon: 'path/to/icon.png' // Path al nuevo icono
        });
      
      }
       
      // Inicializando el mapa cuando se carga la página
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="googleMap"></div>
  </body>
</html>

Si no disponemos de los iconos, les recomiendo mirar el artículo en el cual se explica cómo conseguir iconos gratis para Google Maps.

Bueno gente, espero que les sea de gran utilidad este breve tutorial y ante cualquier inconveniente no duden en dejar un comentario.

La entrada Cambiar iconos en Google Maps aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/12/02/cambiar-iconos-en-google-maps/feed/ 0 Evento click sobre un marker en Google Maps https://programacionextrema.com/2015/12/02/evento-click-sobre-un-marker-en-google-maps/ https://programacionextrema.com/2015/12/02/evento-click-sobre-un-marker-en-google-maps/#respond Wed, 02 Dec 2015 01:25:13 +0000 http://programacionextrema.com/?p=860 La API Google Maps es actualmente muy utilizada por los programadores de sitios webs y aplicaciones móviles, ya que nos ofrece miles de funcionalidades interesantes para trabajar. En este tutorial aprenderemos a crear un evento click sobre un marker en Google Maps. ¿Cómo crear un evento click sobre un marker en Google Maps? Para registrar… Read More

La entrada Evento click sobre un marker en Google Maps aparece primero en ProgramaciónExtrema.com.

]]> La API Google Maps es actualmente muy utilizada por los programadores de sitios webs y aplicaciones móviles, ya que nos ofrece miles de funcionalidades interesantes para trabajar. En este tutorial aprenderemos a crear un evento click sobre un marker en Google Maps.

¿Cómo crear un evento click sobre un marker en Google Maps?

Para registrar un evento click sobre un marker vamos a utilizar la función addListener, la cual recibe como parámetro el tipo de evento y la función a ejecutar. En el siguiente ejemplo se puede apreciar como funciona:

<!DOCTYPE html>
<html style="height:100%">
  <head>
    <title>Evento click sobre un marker en Google Maps</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
      html, body{
        height:100%;
        margin: 0px;
      }
      #googleMap{
        width:100%;
        height:100%;
      }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      function initialize() {
        // Configuración del mapa
        var mapProp = {
          center: new google.maps.LatLng(-34.5862088, -58.415677500000015),
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        // Agregando el mapa al tag de id googleMap
        var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
       
        // Creando un marker en el mapa
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(-34.5862088, -58.415677500000015),
          map: map,
          title: 'Hello World!'
        });
      
	    // Evento click sobre el marker creado
        marker.addListener('click', function() {
          map.setZoom(8);
          map.setCenter(marker.getPosition());
        });
      
      }
       
      // Inicializando el mapa cuando se carga la página
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="googleMap"></div>
  </body>
</html>

Simplemente al hacer click sobre el marker se va a cambiar el zoom del mapa, manteniendo el centro.

Bueno gente, espero que les sea de gran utilidad este tutorial. Ante cualquier problema no duden en dejar un comentario.

La entrada Evento click sobre un marker en Google Maps aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/12/02/evento-click-sobre-un-marker-en-google-maps/feed/ 0 Trazar rutas en Google Maps https://programacionextrema.com/2015/12/01/trazar-rutas-en-google-maps/ https://programacionextrema.com/2015/12/01/trazar-rutas-en-google-maps/#comments Tue, 01 Dec 2015 23:51:41 +0000 http://programacionextrema.com/?p=852 En el anterior tutorial hemos visto cómo ver información de un marker en Google Maps a través de una ventana, en este aprenderemos a trazar rutas en Google Maps utilizando el objeto Polyline con un ejemplo muy sencillo. ¿Cómo trazar rutas en Google Maps? Para realizar esta tarea vamos a utilizar el objeto Polyline que… Read More

La entrada Trazar rutas en Google Maps aparece primero en ProgramaciónExtrema.com.

]]> En el anterior tutorial hemos visto cómo ver información de un marker en Google Maps a través de una ventana, en este aprenderemos a trazar rutas en Google Maps utilizando el objeto Polyline con un ejemplo muy sencillo.

¿Cómo trazar rutas en Google Maps?

Para realizar esta tarea vamos a utilizar el objeto Polyline que nos ofrece Google Maps. Con el objeto mencionado podemos definir las coordenadas y el color de la línea de la ruta, entre otras cosas interesantes. A continuación el ejemplo completo:

<!DOCTYPE html>
<html style="height:100%">
  <head>
    <title>Trazar rutas en Google Maps</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
      html, body{
        height:100%;
        margin: 0px;
      }
      #googleMap{
        width:100%;
        height:100%;
      }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      function initialize() {
      // Configuración del mapa
      var mapProp = {
       zoom: 3,
      center: {lat: -34.6036844, lng: -58.381559100000004},
      mapTypeId: google.maps.MapTypeId.TERRAIN
      };
      // Agregando el mapa al tag de id googleMap
      var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
       
      // Coordenada de la ruta (desde Misiones hasta Tierra del Fuego)
      var flightPlanCoordinates = [
        {lat: -27.4269255, lng: -55.94670759999997},
        {lat: -34.6036844, lng: -58.381559100000004},
        {lat: -43.2934246, lng: -65.11148179999998},
        {lat: -54.8053998, lng: -68.32420609999997}
      ];
      
      // Información de la ruta (coordenadas, color de línea, etc...)
      var flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
      });
      
      // Creando la ruta en el mapa
      flightPath.setMap(map);
      }
       
      // Inicializando el mapa cuando se carga la página
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="googleMap"></div>
  </body>
</html>

Al ejecutar la página anterior en nuestros navegadores el resultado tendría que ser el siguiente.

Trazar ruta en Google Maps

Ruta en Google Maps

Bueno gente, espero que les sea de gran interés este tutorial. Ante cualquier problema no duden en dejar un comentario.

La entrada Trazar rutas en Google Maps aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/12/01/trazar-rutas-en-google-maps/feed/ 6 Ver información de un marker en Google Maps https://programacionextrema.com/2015/12/01/ver-informacion-de-un-marker-en-google-maps/ https://programacionextrema.com/2015/12/01/ver-informacion-de-un-marker-en-google-maps/#respond Tue, 01 Dec 2015 00:21:23 +0000 http://programacionextrema.com/?p=837 Anteriormente hemos viste cómo agregar markers en Google Maps, en este tutorial aprenderemos a ver información de un marker en Google Maps a través de una ventana, usando el objeto InfoWindow. ¿Cómo ver información de un marker en Google Maps al hacer click? Esta funcionalidad la vamos a realizar sobre el código del anterior tutorial… Read More

La entrada Ver información de un marker en Google Maps aparece primero en ProgramaciónExtrema.com.

]]> Anteriormente hemos viste cómo agregar markers en Google Maps, en este tutorial aprenderemos a ver información de un marker en Google Maps a través de una ventana, usando el objeto InfoWindow.

¿Cómo ver información de un marker en Google Maps al hacer click?

Esta funcionalidad la vamos a realizar sobre el código del anterior tutorial en el cual creamos el mapa de Google Maps:

<!DOCTYPE html>
<html style="height:100%">
  <head>
    <title>Ver información de un marker en Google Maps</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
      html, body{
        height:100%;
        margin: 0px;
      }
      #googleMap{
        width:100%;
        height:100%;
      }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      function initialize() {
        // Configuración del mapa
        var mapProp = {
          center: new google.maps.LatLng(-34.5862088, -58.415677500000015),
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        // Agregando el mapa al tag de id googleMap
        var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
         
        // Esta es la información del marker que se va a mostrar, el contenido acepta HTML
        var infowindow = new google.maps.InfoWindow({
          content: "<strong>Información de un marker</strong>"
        });
      
        // Creando un marker en el mapa
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(-34.5862088, -58.415677500000015),
          map: map,
          title: 'Título de ejemplo'
        });
         
        // Al hacer click sobre el marker mostraremos su información en una ventana
        marker.addListener('click', function() {
          infowindow.open(map, marker);
        });
      }
      
      // Inicializando el mapa cuando se carga la página
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="googleMap"></div>
  </body>
</html>

Es importante prestar atención al objeto InfoWindow, el cual contiene la información que se va a mostrar cundo se detecte el evento click sobre el marker.
Al ejecutar la página anterior y después de hacer click sobre el marker el resultado sería el siguiente.

Información de un marker en Google Maps

Información de un marker en Google Maps

Bueno gente, hemos llegado al final de este breve tutorial, espero que les sea de gran utilidad y ante cualquier problema no duden en dejar un comentario.

La entrada Ver información de un marker en Google Maps aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/12/01/ver-informacion-de-un-marker-en-google-maps/feed/ 0 Iconos online y gratis para Google Maps https://programacionextrema.com/2015/11/30/iconos-gratis-para-google-maps/ https://programacionextrema.com/2015/11/30/iconos-gratis-para-google-maps/#respond Mon, 30 Nov 2015 21:52:17 +0000 http://programacionextrema.com/?p=830 Hoy en día existen muchos sitios webs que ofrecen distintas imágenes e iconos online y gratis para Google Maps, pero con poca variedad de categorías e incluso en algunos baja calidad. ¿Cómo conseguir iconos online y gratis para Google Maps? El sitio web https://mapicons.mapsmarker.com ofrece una gran variedad de iconos para descargar e insertar en… Read More

La entrada Iconos online y gratis para Google Maps aparece primero en ProgramaciónExtrema.com.

]]> Hoy en día existen muchos sitios webs que ofrecen distintas imágenes e iconos online y gratis para Google Maps, pero con poca variedad de categorías e incluso en algunos baja calidad.

Iconos para Google Maps

Iconos online y gratis para Google Maps

¿Cómo conseguir iconos online y gratis para Google Maps?

El sitio web https://mapicons.mapsmarker.com ofrece una gran variedad de iconos para descargar e insertar en nuestro mapa de Google Maps. En este sitio se pueden encontrar iconos sobre las siguientes categorías:

  • Víveres
  • Naturaleza
  • Turismo
  • Gente
  • Deportes
  • Educación
  • Eventos
  • Cultura y espectáculos
  • Restaurantes y Hoteles
  • Industria
  • Transporte
  • Comunicación

Una característica que hace a este sitio muy interesante es la posibilidad que nos brinda de cambiar los colores de los iconos a nuestros gustos, permitiendo que se adapten perfectamente al diseño de nuestras aplicaciones.

Bueno gente, espero que les sea de gran utilidad este articulo y puedan encontrar sus iconos para Google Maps. Ante cualquier problema no duden en dejar un comentario.

La entrada Iconos online y gratis para Google Maps aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/11/30/iconos-gratis-para-google-maps/feed/ 0 Agregar markers en Google Maps https://programacionextrema.com/2015/11/30/agregar-markers-en-google-maps/ https://programacionextrema.com/2015/11/30/agregar-markers-en-google-maps/#respond Mon, 30 Nov 2015 01:02:50 +0000 http://programacionextrema.com/?p=827 Anteriormente hemos visto cómo crear un mapa con Google Maps, en este tutorial veremos cómo agregar markers en Google Maps utilizando el lenguaje de programación Java Script. ¿Cómo agregar markers en Google Maps? Siguiendo con el código del tutorial anterior vamos a insertar un marker en el mapa con Java script como se muestra en… Read More

La entrada Agregar markers en Google Maps aparece primero en ProgramaciónExtrema.com.

]]> Anteriormente hemos visto cómo crear un mapa con Google Maps, en este tutorial veremos cómo agregar markers en Google Maps utilizando el lenguaje de programación Java Script.

¿Cómo agregar markers en Google Maps?

Siguiendo con el código del tutorial anterior vamos a insertar un marker en el mapa con Java script como se muestra en el siguiente ejemplo:

<!DOCTYPE html>
<html style="height:100%">
  <head>
    <title>Agregar markers en Google Maps</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
      html, body{
        height:100%;
        margin: 0px;
      }
      #googleMap{
        width:100%;
        height:100%;
      }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      function initialize() {
        // Configuración del mapa
        var mapProp = {
          center: new google.maps.LatLng(-34.5862088, -58.415677500000015),
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        // Agregando el mapa al tag de id googleMap
        var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
      
        // Creando un marker en el mapa
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(-34.5862088, -58.415677500000015),
          map: map,
          title: 'Hello World!'
        });
      }
      
      // Inicializando el mapa cuando se carga la página
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="googleMap"></div>
  </body>
</html>

Al visualizar la página vamos a ver el mapa con un marker en el centro de la ciudad de Buenos Aires.

Bueno gente, hemos llegado al final de este sencillo tutorial en el cual se explica cómo agregar markers en Google Maps. Espero que les sea de gran utilidad y ante cualquier problema no duden en dejar un comentario.

La entrada Agregar markers en Google Maps aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/11/30/agregar-markers-en-google-maps/feed/ 0 Crear un mapa con Google Maps https://programacionextrema.com/2015/11/30/crear-un-mapa-con-google-maps/ https://programacionextrema.com/2015/11/30/crear-un-mapa-con-google-maps/#respond Mon, 30 Nov 2015 00:46:10 +0000 http://programacionextrema.com/?p=825 Anteriormente hemos visto cómo realizar un autocompletado de ciudades con Google Maps, en este tutorial aprenderemos a crear un mapa con Google Maps utilizando el lenguaje de programación Java Script y HTML para la vista. ¿Cómo crear un mapa con Google Maps? Hacer esta tarea es realmente muy fácil, basta con agregar unas poca lineas… Read More

La entrada Crear un mapa con Google Maps aparece primero en ProgramaciónExtrema.com.

]]> Anteriormente hemos visto cómo realizar un autocompletado de ciudades con Google Maps, en este tutorial aprenderemos a crear un mapa con Google Maps utilizando el lenguaje de programación Java Script y HTML para la vista.

¿Cómo crear un mapa con Google Maps?

Hacer esta tarea es realmente muy fácil, basta con agregar unas poca lineas de código como se muestra en el siguiente ejemplo:

<!DOCTYPE html>
<html style="height:100%">
  <head>
    <title>Crear un mapa con Google Maps</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
      html, body{
        height:100%;
        margin: 0px;
      }
      #googleMap{
        width:100%;
        height:100%;
      }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      function initialize() {
        // Configuración del mapa
        var mapProp = {
          center: new google.maps.LatLng(-34.5862088, -58.415677500000015),
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        // Agregando el mapa al tag de id googleMap
        var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
      
      }
      
      // Inicializando el mapa cuando se carga la página
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="googleMap"></div>
  </body>
</html>

Al visualizar la página anterior vamos a poder ver el mapa ubicado en Buenos Aires.

Bueno gente, hemos llegado al final de este sencillo tutorial en el cual se explica cómo crear un mapa con Google Maps. Espero que les sea de gran utilidad y ante cualquier problema no duden en dejar un comentario.

La entrada Crear un mapa con Google Maps aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/11/30/crear-un-mapa-con-google-maps/feed/ 0