MarkerCluster en Google Maps

No hay comentarios

El MarkerCluster es una biblioteca que forma parte de las utilidades de Google Maps que aplica clustering basado en grids para una colección de marcadores. Esta librería funciona iterando los marcadores y cada marcador se suma a un grupo más cercano si está dentro de un mínimo de pixeles.

Consideremos la siguiente imagen en donde tenemos un conjunto de marcas a las cuales se les aplicará el algoritmo de cluster de la librería de Google Maps.

 Marcas Cluster

Continue reading…

Agregar multiples Marcas con Información a Google Maps

No hay comentarios

Este tema me tomo algo de tiempo poder desarrollarlo y espero les pueda ayudar. La idea principal es extraer registros almacenados en una base de datos de MYSQL y la información de esos registros (nombre, dirección  teléfono  latitud,longitud) poder mostrarlos en una marca en Google Maps de acuerdo a la latitud y longitud del registro y una vez establecida la marca al dar clic en ella mostrar el resto de la información de ese usuario (nombre, dirección y teléfono). Después de mucha búsqueda en la red, la mejor solución que encontré fue la siguiente:

  1. Extraer la información de MYSQL y generar un archivo  XML con dicha información,aquí mismo en mi blog encontrara como generar este tipo de archivos en PHP.
  2. Una vez obtenida la información mostrarla en Google Maps con el siguiente código:

Continue reading…

Publicar un punto con Información a Google Maps

No hay comentarios

Cuantas veces no hemos querido agregar un mapa de Google a nuestro sitio web, ademas de poner un punto con información acerca de una ubicación. Viendo la información de Google Developers podemos encontrar todo el código necesario para que esto no sea un dolor de cabeza. Aqui les dejo el codigo necesario para elaborar esto utilizando la nueva versión 3 de la API de Google.

<html>
<head>
<title>Puntos de Interes</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  google.maps.event.addDomListener(window, 'load', function() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 9,
      center: new google.maps.LatLng(25.632241,-103.379288),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infoWindow = new google.maps.InfoWindow;

    var onMarkerClick = function() {
      var marker = this;
      var latLng = marker.getPosition();
      infoWindow.setContent('<h5>INSTITUTO TECNOLOGICO DE LA LAGUNA</h5><font size="-3"> Blvd. Revolucion y Calz. Cuahutemoc S/N<br>Col. Centro<br>Torreon, Coah.<br>Tel. (871)7051313</font>');

      infoWindow.open(map, marker);
    };

    google.maps.event.addListener(map, 'click', function() {
      infoWindow.close();
    });

    var marker1 = new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(25.532877,-103.435299)
    });

    google.maps.event.addListener(marker1, 'click', onMarkerClick);

  });
</script>
<style type="text/css">
  body {
    font-family: sans-serif;
	background:#CCC;color:#6f6f6f;line-height:18px;min-width:960px
  }
  #map {
    width: 450px;
    height:450px;

  }
</style>
</head>
<body>

  <center><div id="map"></div></center>

</body>
</html>

 Este es un ejemplo muy sencillo de como agregar ese punto. Ademas de estos se puede integrar dicho código con PHP para poder sacar información de una base de datos y mostrarlo en la información. Ojala y les sea de utilidad.

Saludos.