Iremart.es

Drone paso a paso Ardupilot, Visual studio y otros lenguajes de programación

  • Estadísticas

    • 200Lecturas hoy:
    • 103Lecturas ayer:
    • 127577Total de visitas:
    • 78Hoy:
    • 83Ayer:
    • 667La semana anterior:
    • 1813Visitantes por mes:
    • 84Visitantes por día:
    • 3Visitantes conectados:

Crear un mapa en google maps por código

Posted by skskynet on julio 8th, 2011

Voy poner el código poco a poco.

 

Primero voy a montar el mapa con 10 coordenadas  aleatorias centradas en un punto(he puesto valencia por poner algo).

Después mi intención es recoger de una base de datos las localidades con sus respectivas coordenadas y que se pongan en el mapa(estoy en ello). Nada más lo tenga lo pongo

Mi idea no es una prueba, estoy desarrollando para la empresa donde trabajo, poner en el mapa donde están los técnicos. La idea es ver en el mapa la ubicación de todos y a donde van después

Para que esto funcione hay que registrar la api key de google maps direccionandolo a vuestra página web y cambiarlo en el código más abajo donde pone key=

 

Código con lugares aleatorios:

 

 

<!DOCTYPE html PUBLIC “-//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” xmlns:v=”urn:schemas-microsoft-com:vml”>
<head>

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>

<title>Google Maps JavaScript API Example: Map Markers</title>

<script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA-AV6Hsr6FE2YhUyyUFu39RRC43Ptf98aiV1XYi_jSdBYlU4ATBQ7mChtkklT6cv3YNhuW8VinfRoKQ”             type=”text/javascript”></script>

<script type=”text/javascript”>

function initialize()

{

if (GBrowserIsCompatible())

{          var map = new GMap2(document.getElementById(“map_canvas”));

map.setCenter(new GLatLng( 39.470239,-0.376805), 8); //esta es la dirección de valencia para centrar el mapa, y el 8 es el zoom

// 10 lugares aleatorios

var bounds = map.getBounds();

var southWest = bounds.getSouthWest();

var northEast = bounds.getNorthEast();

var lngSpan = northEast.lng() – southWest.lng();

var latSpan = northEast.lat() – southWest.lat();

for (var i = 0; i < 10; i++) {

var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());

map.addOverlay(new GMarker(point));          }       }      }

</script>

</head>

<body onload=”initialize()” onunload=”GUnload()”>

<div id=”map_canvas” style=”width: 400px; height: 500px”></div>

//el 400*500 es el tamaño del mapa

</body>

</html>

 

Ejemplo aleatorio:  Prueba aleatoria

 

Código con 3 lugares fijos y con los iconos personalizados

 

<!DOCTYPE html PUBLIC “-//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” xmlns:v=”urn:schemas-microsoft-com:vml”>

<head>

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>

<title>Google Maps JavaScript API Example: Map Markers</title>

<script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA-AV6Hsr6FE2YhUyyUFu39RRC43Ptf98aiV1XYi_jSdBYlU4ATBQ7mChtkklT6cv3YNhuW8VinfRoKQ” type=”text/javascript”></script>

 

<script type=”text/javascript”>

function initialize() {

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById(“map_canvas”));

map.setCenter(new GLatLng( 39.470239,-0.376805), 8);

//definimos tipos de icono para cada ubicación

//tipo1

var miIcono1 = new GIcon(G_DEFAULT_ICON);

miIcono1.image = “http://www.iremart.es/mapa/tec.gif”;

//tipo2

var miIcono2 = new GIcon(G_DEFAULT_ICON);

miIcono2.image = “http://www.iremart.es/mapa/tec_cotxe.gif”;

//tipo3

var miIcono3 = new GIcon(G_DEFAULT_ICON);

miIcono3.image = “http://www.iremart.es/mapa/tecnico.jpg”;

//ubicaciones fijas

// Gandia

var point = new GLatLng(38.969022, -0.185187);

map.addOverlay(new GMarker(point , miIcono1));

 

// Castellón

var point = new GLatLng(39.986591, -0.035706);

map.addOverlay(new GMarker(point , miIcono2));

 

// Requena

var point = new GLatLng(39.488145, -1.100006);

map.addOverlay(new GMarker(point , miIcono3));

}

}

</script>

</head>

<body onload=”initialize()” onunload=”GUnload()”>

<div id=”map_canvas” style=”width: 400px; height: 500px”></div>

 

</body>

</html>

 

Ejemplo 3 lugares fijos con iconos personalizados:  Lugares fijos

One Response to “Crear un mapa en google maps por código”

  1. Sergio Says:

    Saludos, veo lo que intentas hacer…..por mi parte, he desentrañado los secretos del google earth. Mi objetivo es el mismo que el tuyo, obtener datos en tiempo real de los técnicos que salen a campo de mi empresa…. hoy después de 2 meses, he coseguido enlazar la posición de google LATITUDE, y convertirla a un punto que puedo ver en el google earth, y google MAPS y que se actualiza en tiempo real (aun no se como mostrar el track)… para ello uso mi movil con internet, y mi cuenta de google…. si quieres seguimos hablando.un saludo.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">