programacion web, emarketing, econsulting, desarrollo web, optimizacion web, posicionamiento web, agencia de internet, sabemos de internet

10 de Septiembre 2010

.net Ajax Arzion asp.net c# css css2 Firefox google hotel inmobiliaria internet javascript jquery linux Mallorca maquetación melia microsoft mysql optimización Php Planeta Web programación web propiedades seo turismo ubuntu web xhtml

Contacto

Si tienes cualquier duda, consulta o sugerencia puedes mandarnos un email usando el siguiente formulario:

Este campo es requerido.

Por favor ingrese un email valido.

¿Como nos conoció? Google Otras Publicidad Recomendación de un amigo Referencia de otro sitio Yahoo Comentario

Este campo es requerido.

Vamos a comentar algunos consejos para desarrollar con la api de google maps lo primero que debemos hacer es obtener la key para nuestro sitio Key google maps

 

Para inicializar nuestro mapa ponemos

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
	   //centramos el mapa en una posicion con un zoom de 16
        map.setCenter(new GLatLng(43.907787,-79.359741), 16);
      }
    }

Si queremos agregar el controlador de zoom, pero con nuestras propias imagenes

function TextualZoomControl() { }

TextualZoomControl.prototype = new GControl();
	
TextualZoomControl.prototype.initialize = function(map) {
   var container = document.createElement("div");
   var zoomInDiv = document.createElement("div");
   zoomInDiv.innerHTML = ""; 
   container.appendChild(zoomInDiv);
   var zoomOutDiv = document.createElement("div");
   zoomOutDiv.innerHTML = ""; 
   container.appendChild(zoomOutDiv);
   map.getContainer().appendChild(container);
   return container;
}
    
TextualZoomControl.prototype.getDefaultPosition = function() {
	return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}
/*en la funcion load cuando creamos el mapa agregamos ahora*/
map.addControl(new TextualZoomControl());/*creamos el zoom con sus imagenes*/

Ahora si queremos agregar marcas en el mapa 

/*creamos el punto con su latitud y longitud*/
var point = new GLatLng(unaLatitud, unalongitud);
//creamos la marca
var marker = createMarker(point);
//la agregamos en el mapa
map.addOverlay(marker);
// si mas adelante la queremos eliminar podemos hacer 
map.removeOverlay(marker);
// si queremos eliminar todas las marcas 
map.clearOverlays();

Ahora vamos a ver la funcion que crea la marca createMarker() y eventos a esa marcas podemos hacer los siguiente

function createMarker(point) {
      var marker = new GMarker(point);
      GEvent.addListener(marker, "click", function() {
        alert("Me pinchaste"); 
	//podemos agregar codigo html que se visualize al hacer click en la marca	
	marker.openInfoWindowHtml('
Estos son mis datos...
');
     });
      GEvent.addListener(marker, "mouseover", function() {
		//podemos cambiar la imagen de la marca al pasar el mouse
		marker.setImage('casa.png');
      });
      GEvent.addListener(marker, "mouseout", function() {
          marker.setImage('otramarca.png');
        });
      return marker;
    }

Por ultimo podemos obtener los datos de una base de datos o de un archivo utilizando GDownloadUrl

var ajaxUrl = 'mapaFichaEmpresa.php?idEmpresa='+idEmpresa;
GDownloadUrl(ajaxUrl, function(request, status) {
	var data = eval('('+request+')');
   	createMarker(marker,data.fichaEmpresaHTML);
      	});

Este es el codigo de mapaFichaEmpresa.php

$idEmpresa = $_GET['idEmpresa'];
// Recupero la ficha de la propiedad y la devuelvo en formato JSON
$oEmpresa = new Empresa(idEmpresa); 
// Recupero los datos
$data['fichaEmpresaHTML'] = $oEmpresa->getFichaEmpresaHTML();
// Devuelvo los datos en formato JSON
echo json_encode($data); 

Tags: javascript, google maps api, google maps, google

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Agregar comentario
A continuación expresa tu comentario
Este campo es requerido.	Por favor ingrese un email valido.
Comentario Este campo es requerido.
Security code:	Enter code: