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

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.