mapa de google

Insertar un mapa de Google en un sitio web

Google sigue actualizando sus APIs para permitir a los desarrolladores incorporar las diferentes herramientas en los sitios o aplicaciones web. En este caso les voy a mostrar lo fácil que es insertar un mapa de Google en un sitio web para señalar una dirección.

insertar mapa de google en la web
Mapa de Google en tu web

A continuación dejo el código necesario para insertar un mapa de Google, y mas abajo lo explico línea por línea.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
	  function initialize() {
	    var latlng = new google.maps.LatLng(-34.577605,-58.409552);
	    var myOptions = {
	      zoom: 15,
	      center: latlng,
        	mapTypeControl: true,
		mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
      		navigationControl: true,
      		navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
	        mapTypeId: google.maps.MapTypeId.ROADMAP
	    };
	    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	    
	    var contentString = 
	    '<h2 id="firstHeading" class="firstHeading">Alpina Motors</h2>'+
	    '<div id="bodyContent">'+
	    '<p>Dirección del lugar<br>'+
	    '(01) 1234-5678<br>'+
		'Palermo<br>'+
		'Ciudad de Buenos Aires<br>'+
		'Argentina</p>'+
	    '</div>';

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

		var marker = new google.maps.Marker({
	      position: latlng, 
	      map: map, 
	      title:"Título del Globo"
		});

		infowindow.open(map,marker);

		<!--	
		google.maps.event.addListener(marker, 'click', function() {
		  infowindow.open(map,marker);
		});
		-->
	  }
</script>

Este código se inserta entre las etiquetas HEAD de tu pagina web. El primer script llama a la API de Google y en el segundo es donde se definen todas las características visuales del mapa y del globo de información.

Es muy importante la línea:
var latlng = new google.maps.LatLng(-34.577605,-58.409552);
Los valores entre paréntesis, son las coordenadas del mapa, Latitud y Longitud, el punto exacto donde aparecerá la chinche.

Estos valores se obtienen del sitio de GoogleMaps. Al buscar una dirección las coordenadas aparecen en la barra de direcciones.


En el grupo:

var myOptions = {
	      zoom: 15,
	      center: latlng,
        	mapTypeControl: true,
		mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
      		navigationControl: true,
      		navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
	      mapTypeId: google.maps.MapTypeId.ROADMAP
	    };

Es donde vamos a definir las diferentes opciones de presentación del mapa:

Zoom: el valor que representa la distancia a la que aparece el mapa.
Center: latlng. Para que el mapa haga centro en las coordenadas.
mapTypeControlOptions: Define las los controles que se mostraran en el mapa.
navigationControl: Si se muestra o no el control de navegación.
navigationControlOptions: En caso de mostrar el control de navegacion, se define el tamaño.
mapTypeId: Tipo de Mapa. Puede ser de calles, satelite, hibrido o relieve.

Los diferentes posibles valores para cada una de estas variables los encontramos en la pagina de Ejemplos de GoogleMap.

Luego, la línea:
var map = new google.maps.Map(document.getElementById(«map_canvas»), myOptions);
Define el nombre con el que vamos a referirnos al mapa en nuestra pagina y le pasa como parámetros las opciones definidas mas arriba.

Y finalmente, el contenido del globo:

var contentString = 
'Titulo del Globo
'+ ' Dirección del lugar
'+ 'Telefono (01) 1234 - 5678
'+ 'Palermo
'+ 'Ciudad de Buenos Aires
'+ 'Argentina ';

En el código HTML solamente hay que modificar la etiqueta BODY para que quede de la siguiente forma:

 

Para que ejecute la funcion definida en el script y llame al mapa.

Y finalmente, donde queremos que aparezca el mapa lo indicamos de la siguiente forma:

<div id="map_canvas">&nbsp;</div>

No es tan complicado, no?
Alguno de ustedes ya lo tiene implementado en algún sitio? Le encontraron otras características que no estén comentadas en este post?


Si te gustó o te entretuvo el contenido de este posteo, haciendo un click en los avisos me ayudas a mantener el sitio con vida y a seguir publicando.

Y si quieres ganar algo de dinero sin esfuerzo, registrate en IPRoyal desde este banner y recibí 1 dolar de regalo al comenzar a usar la aplicación para generar ingresos pasivos.

ingresos pasivos Pawns.app

Acá puedes conocer más sobre ingresos pasivos, que es y como funciona IPRoyal Pawns.

Deja un comentario