Saltar al contenido
Codifíca.me | Desarrollo web | Programación

Dibujar marcadores en un mapa de Google Maps V3

20 noviembre, 2012
map android

En este ejemplo vamos a dibujar o pintar un marcador en un mapa de Google Maps con el texto que queramos.

En el ejemplo siguiente obtendremos la posición dónde queremos poner el marcador de una base de datos, además el texto que llevará el marcador también lo obtendremos de una base de datos.

Si no os hace falta recuperar posición del marcador de una base de datos podéis omitir
ese paso y reescribir un poco el código.

Lógica de la aplicación

En nuestro ejemplo hemos creado una tabla dentro de la base de datos que tiene un identificador para cada ruta (aunque aquí no vamos a pintar rutas) y un texto que irá en cada marcador, en nuestro caso ese texto ya está en la base de datos y también lo recuperaremos.

Comentamos el código

Declaramos una función en javascript que se llamará “function initialize” la cual se ejecutará en el evento onload que tendrá asociado el “body” de la página web

1
 <body onload="initialize()" onunload="GUnload()">

Estos dos parámetros los utilizamos en nuestro desarrollo para conocer la ruta y la incidencia que queremos mostrar.
Lo más seguro es que no os valgan para nada podéis sustituirlos por los que necesitéis. Nosotros los utilizamos durante el desarrollo para poder hacer la SELECT contra la base de datos y pasarle estos parámetros.

1
2
    $idIncidencia= $_REQUEST['idIncidencia'];
    $idRuta= $_REQUEST['idRuta'];

Aquí nos conectamos con la base de datos

1
    $conectado = @mysql_connect("db44563145646318.db.1and1.com","dbo44563145","elp4ssw0rd");

En el caso de que se conecte con la Base de datos realizamos la select

1
2
3
4
$sql = "SELECT SUBSTRING(LatLong,1,INSTR(LatLong,',')-1) Latitud, 
                                    SUBSTRING(LatLong,INSTR(LatLong,',')+1) Longitud,Descripcion 
                                    FROM RutasIncidencia r, IncidenciasAndroid i.....
                                    ........

Y en el caso de que obtengamos datos pintamos el marcador con el texto que hemos puesto en la base de datos:

1
2
3
4
5
6
7
   function createMarker(point, index) {
 
          var letter = String.fromCharCode("A".charCodeAt(0) + index);
          var letteredIcon = new GIcon(baseIcon);
          letteredIcon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
          ....
          ....

La imagen con el resultado:
google marcador

El código completo sería así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Google Maps JavaScript API Ejemplo de Marcador con texto</title>
    <script src="/js/maps.js"
            type="text/javascript"></script>
    <script type="text/javascript">
    function initialize() {
 
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
 
      <? 
 
          $descripcion="hola marca";
                $latitud= 10.000;
                $longitud=10.000;
      echo 'map.setCenter(new GLatLng('.$latitud.', '.$longitud.'), 13);';?>
        map.setUIToDefault();
 
        // Create a base icon for all of our markers that specifies the
        // shadow, icon dimensions, etc.
        var baseIcon = new GIcon(G_DEFAULT_ICON);
        baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
        baseIcon.iconSize = new GSize(20, 34);
        baseIcon.shadowSize = new GSize(37, 34);
        baseIcon.iconAnchor = new GPoint(9, 34);
        baseIcon.infoWindowAnchor = new GPoint(9, 2);
 
        // Creates a marker whose info window displays the letter corresponding
        // to the given index.
        function createMarker(point, index) {
          // Create a lettered icon for this point using our icon class
          var letter = String.fromCharCode("A".charCodeAt(0) + index);
          var letteredIcon = new GIcon(baseIcon);
          letteredIcon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
 
          // Set up our GMarkerOptions object
          markerOptions = { icon:letteredIcon };
          var marker = new GMarker(point, markerOptions);
          document.cookie ='variable='+index+'; expires=Thu, 2 Aug 2021 20:47:11 UTC; path=/';
           GEvent.addListener(marker, "click", function() {
            <? echo 'marker.openInfoWindowHtml("<b>" + '.json_encode($descripcion).' + "</b>");';?>
          });
          return marker;
        }
 
        <?
        $x = 0;
            echo'var latlng = new GLatLng('.$latitud.',
            '.$longitud.');
          map.addOverlay(createMarker(latlng, '.$x.'));';
         ?>
      }
     <? mysql_close($conectado);
                                } else {
                                    die("NO SE PUDO CONECTAR AL SERVIDOR MYSQL.");
                                }
    ?>
    }
    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 500px; height: 300px"></div>
  </body>
</html>

**** Hace falta que enlacéis las librerías JavaScript para los mapas de google, las podéis enlazar directamente de Google o bien bajároslas y subirlas a vuestro servidor.

Entradas relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Comentarios (11)

No entendi -.-

Responder

Hola holobolo, ¿Qué no entendiste?
Si me indicas algo más , es posible que pueda ayudarte.
Saludos

Responder

Y si deseo agregar mas de un marcador?

Responder

Puedes agregar tantos como quieras, te paso el enlace de otra entrada dónde puedes ver que agregamos varias marcas a un mapa de Google Maps.
https://www.codifica.me/desarrollo-web/insertar-marcas-google-maps-v3/
Si necesitas más ayuda estoy por aquí. 🙂

Responder

QUIERO VER EL EJEMPLO SIGUIENTE , YA QUE ES EXACTAMENTE LO QUE NECESITO HACER.

EN DONDE LO PUEDO VER?

SALUDOS! MUCHISIMAS GRACIAS POR TUS TUTORIALES

Responder

GRACIAS POR LOS POST.

DICULPA EL SIGUIENTE EJEMPLO QUE MENCIONAS , EL DE OPTENER LAS POSICIONES DESDE UNA BASE DE DATOS , DONDE LO ENCUENTRO?

Responder

Y si lo que yo quiero es leer los datos desde una base de datos y desde allí marcar mis markers? Yo no quiero agregarlos por que ya los tengo guardados en la BD

Responder

Solo tienes que recuperarlos desde la bd y pintarlos sobre el mapa.

Responder

disculpa y el codigo se guarda como.html o como quee?
esque al subirlo a mi servidor la pagina se queda en blanco
o mas bien como visualizo el ejemplo

Responder

El codigo que tienes es PHP y Html, el fichero tiene que tener extensión .php .

Saludos

Responder

Disculpa, de casualidad sabes cómo obtener una dirección a partir de coordenadas geográficas utilizando la librería GMap2?
Si tienes un ejemplo en javascript, estaría sumamente agradecida.

Saludos.

Responder