En este fin de semana he pensando mirar la libreria Gmaps.js que me permite interactuar con Google Maps de forma facil.

Uno de los detalles que deseaba realizar era un mapa, marcando cierto lugares forestales y al hacer clic, muestre un detalle de la el lugar forestal, basado a la imagen, La documentacion esta entre lineas y el link de ejemplo esta disponible para descargar.

Primero creare el index.html que tendra el mapa.

<html>
<head>
 <title>Ejemplo de Gmaps</title>
 <link rel="stylesheet" type="text/css" href="estilo.css">
 <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
 <!-- Script de Google Api & gmaps-->
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
 <script type="text/javascript" src="gmaps.js"></script>
 <!-- Script con las funcionalidades de gmapsjs -->
 <script type="text/javascript" src="extmaps.js"></script>
 
</head>
<body>
 <!-- div de region donde se presentaran el mapa -->
 <div id="map"></div>
</body>
</html>
* div de mapa */
#map
{
	background: white;
	width: 650px;
	height: 440px;
}
/* div que contenda la informacion de la finca */
#finca_def
{
	background: white;
	width: 250px;
	height: 200px;
}

/* alinear los p en la definicion de la finca a la izquierda */
#finca_def p
{
	text-align: left;

}

body{
	background: red;
}
Finalmente el archivo extmaps.js lo he llamado asi porque es una extension de gmaps que solo contiene la funcionalidad de agregar los marcadores en el mapa.
/* contenido html que mostrare al hacer click en el icono del mapa */
var conhtml = '<div id="finca_def"> 
 <h1>Finca Energia</h1> 
 <p><b>Distancia: </b>Barcelona, Finca de 24KM.</p> 
 <p><b>Productividad: </b>Energia Eolica</p> 
 <p><b>Permisos: </b>A-12, B45.</p> 
 <p><b>Responsable Civil: </b>Dany Paredes.</p> 
 <p><b>Capacidad Energetica: </b>345KW.</p> 
 </div>';


/* objeto mapa */
 var map;
 $(document).ready(function(){
 
 /* Inicializo Gmaps especificando el div donde se incluira y las cordenadas iniciales */
 map = new GMaps({
 div: '#map',
 lat: -12.043333,
 lng: -77.028333
 });

 /* Agrego un Marker en el objeto map, con un titulo, especificando el icono y el contenido html */
 map.addMarker({
 lat: -12.043333,
 lng: -77.028333,
 title: 'Finca Santiago',
 icon: "sacramento.png",
 infoWindow: {
 content: conhtml
 },
 click: function(e) {
/* en caso que quisira que al hacer click realizara un evento */
 }
});

/* Agrego otro Marker similar al anterior */
 map.addMarker({
 lat: -12.045633,
 lng: -77.022,
 title: 'Finca Santo Domingo',
 icon: "sacramento.png",
 infoWindow: {
 content: conhtml
 }
 });

 });

Puedes descargar el proyecto de ejemplo http://goo.gl/NhtlWN o
si tienen alguna duda pues pueden visitar la pagina oficial de gmaps http://hpneo.github.io/gmaps/