Diseño y desarrollo web orientado al Webmaster. jQuery, HTML, CSS, PHP, MySQL, Flash, PHP, AS3, AS2, Javascript, Pearl, instalación y configuración de portales CMS, scripts, tutoriales y más...

Ver más
  • 3,533 Miembros
  • 1,088 Temas
  • 1,032 Seguidores
  • 0

Croquis de ubicación con google map API

Croquis de ubicación con google map API

Croquis de ubicación con google map API

Con este post pretendo explicar como podemos hacer un croquis de ubicación de una dirección para colocarlo en nuestra página web personal, de nuestra empresa o de algún cliente que necesite que aparezca la ubicación de su negocio en un mapa terrestre.

Parar este fin debemos ubicar las coordenadas de la dirección que queremos mostrar, para este ejemplo seleccionaremos un punto cualquiera, yo seleccioné una esquina referencial cualquier a la capital de mi país: Caracas.

Para este fin, debemo ingresar en:
http://maps.google.es/
Y ubicar la dirección de nuestro interés.

Croquis de ubicación con google map API

Croquis de ubicación con google map API



Para este ejemplo seleccione la esquina de la ciudad de Caracas entre Avenida Oeste 2 y Sur 19. Una vez seleccionado el punto, hacemos clic derecho en este y seleccionamos "Centrar el Mapa Aquí", esto es para centrar en el punto de nuestro interés.

Croquis de ubicación con google map API



Una vez centrado el mapa, nos toca ubicar las coordenadas, para esto, hacemos nuevamente clic derecho en la esquina y presionamos en "Qué Hay Aquí". Procedemos a copiar en la parte superior izquierda las coordenadas de nuestro punto.

Croquis de ubicación con google map API




Vamos con el código...

Para este fin, primeramente, debemos dirigirnos a la página de "Google Map Api":

http://code.google.com/intl/es/apis/maps/



Y debemos registrar nuestro sitio para obtener una clave API

Croquis de ubicación con google map API



Procedemos a colocar la URL de nuestro sitio web y hacer clic en Generar clave API (si es para hacer pruebas en local, podemos usar un url cualquier como lo hice yo para generar el código):

Croquis de ubicación con google map API



Una vez generado el código, copiado el apartado donde dice: "JavaScript Maps Api Example":

Croquis de ubicación con google map API



Este código debemos colocarlo entre los tags head de nuestro código html.

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAlo1PdUJdjfE-bCv4LMjgKBQpkWYODHKIJGlKH8M-8R98XOejsxT09rOjXJCzT0Inur3FQNp7rCakqw"
type="text/javascript"></script>



Quedando de esta forma el código:

Croquis de ubicación con google map API


En donde en los dos tags "GLatLng" colocaremos las coordenadas antes copiadas de la ubicación de nuestro punto, y donde myIcon.image = "building.png", será el icono que representará el punto de dirección. Así mismo, en marcador.openInfoWindowHtml("Empresa X<br />Av 2 Oeste, con Av. Sur 19"; colocaremos la dirección que aparecerá al hacer clic encima del icono.


Croquis de ubicación con google map API

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAlo1PdUJdjfE-bCv4LMjgKBQpkWYODHKIJGlKH8M-8R98XOejsxT09rOjXJCzT0Inur3FQNp7rCakqw"
type="text/javascript"></script>


<script type="text/javascript">

function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas" ));
map.setCenter(new GLatLng(10.502834,-66.901626), 19);
var myIcon = new GIcon(G_DEFAULT_ICON);
myIcon.image = "building.png";
myIcon.iconSize = new GSize (32,32);
myIcon.shadow = "";
var markerOptions = {icon:myIcon};

var punto = new GLatLng(10.502834,-66.901626);
var marcador = new GMarker(punto,markerOptions);
GEvent.addListener(marcador, "click", function() {
marcador.openInfoWindowHtml("Empresa X<br />Av 2 Oeste, con Av. Sur 19" );
});
map.addOverlay(marcador);
}
}

</script>
<style type="text/css">

body {
font-family: Arial, Helvetica, sans-serif;
font-size:12px;

}

</style>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 425px; height: 350px"></div>


</body>
</html>
  • 0
  • 2Calificación
  • 2Seguidores
  • 7.807Visitas
  • 0Favoritos

5 comentarios

@mauro_mb Hace más de 3 años
gracias ++
@GDM82541 Hace más de 3 años
Otra forma de hacerlo...Buen Post!
@Ktulu Hace más de 3 años
IMPECABLE
@arucordoba Hace más de 3 años
Muchas gracias! Pregunta: cómo hago para marcar dos (o más) empresas en el mapa? En el caso de sucursales digo....
Tienes que ser miembro para responder en este tema