PASO 1:
Creamos un fichero html con el siguiente código, incluye el javascript que llamará a las librerías de Google:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng;
latlng = new google.maps.LatLng(40.396764, -3.713379);
var myOptions = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var address = location.search;
address = address.substring(address.indexOf('=') + 1);
codeAddress(address);
}
function codeAddress(address) {
if (geocoder) {
geocoder.geocode({ 'address': address },
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location });
}
else {
alert("Error cargando el mapa: "
+ status + "\n"
+ "Asegúrese de rellenar correctamente País, Provincia, Ciudad, Dirección y Código postal.");
}
});
}
}
</script>
</head>
<body style="margin: 0px; padding: 0px;" onload="initialize()">
<div id="map_canvas" style="width: 100%; height: 100%">
</div>
</body>
</html>
PASO 2:
En la entidad Cuenta (podríamos hacerlo en cualquiera que tuviera campos de dirección) editamos el evento onLoad del formulario para insertar el siguiente código que hará que cuando pulsemos en una pestaña se cargue el mapa:
crmForm.all.tab5Tab.onclick = function() {
var url = "";
if (crmForm.all.address1_country.DataValue != null)
url = crmForm.all.address1_country.DataValue;
if (crmForm.all.address1_stateorprovince.DataValue != null)
url += (url == "" ? "" : ", ") + crmForm.all.address1_stateorprovince.DataValue;
if (crmForm.all.address1_city.DataValue != null)
url += (url == "" ? "" : ", ") + crmForm.all.address1_city.DataValue;
if (crmForm.all.address1_line1.DataValue != null)
url += (url == "" ? "" : ", ") + crmForm.all.address1_line1.DataValue;
if (crmForm.all.address1_line2.DataValue != null)
url += (url == "" ? "" : ", ") + crmForm.all.address1_line2.DataValue;
if (crmForm.all.address1_line3.DataValue != null)
url += (url == "" ? "" : ", ") + crmForm.all.address1_line3.DataValue;
if (crmForm.all.address1_postalcode.DataValue != null)
url += (url == "" ? "" : ", ") + crmForm.all.address1_postalcode.DataValue;
if (url != "") {
url = "MIHOST/localizador.html?address=" + url;
crmForm.all.IFRAME_mapa.src = url; }
}
Consideraciones:tab5Tab - el número corresponde al la pestaña donde está el mapa, recordar que como un array, empieza en 0 el conteo. Esta es mi 6ª pestaña en realidad.
MIHOST/ - es donde está publicado el fichero html
PASO 3:
Creamos un campo iframe dentro de la pestaña que tendrá el mapa y lo llamamos IFRAME_mapa. Obviamente este nombre puede cambiarse si se hace también en el código anterior.
En la url del mapa escribimos: about:blank
Marcamos la casilla para que se expanda todo lo posible en el formulario.
PASO 4:
Publicamos los cambios de la entidad y nos quedará algo así:
3 comentarios:
Hola, muy bien tu guia sobre como hacerlo, pero tengo una duda, mira al parecer cuando quiero abrir "div id="map_canvas" style="width: 100%; height: 100%"
el 100% no me lo toma, pero si pengo un tamaño en px si lo despliega, solo cuando uso 100% no me deja y lo necesito para que auto dimensione cuando maximize o minimize la ventan.
En las propiedades del iframe ya tiene puesto lo de expand by default y nada tambien.
Saludos y gracias.
Hola Luis, el código que publiqué en el post es exactamente el mismo que tengo en el CRM y cuando maximizo la ventana (una Cuenta) el iframe (y su contenido, el mapa) también se adapta al nuevo tamaño.
Sí es cierto que queda como una banda blanca en el lateral derecho, entre el borde del mapa y el borde del iframe. ¿Que sería ideal que se ajustara perfectamente? seguro que sí, pero no le doy importancia.
Puedes probar jugando con el scroll del html, quitarlo con javascript por ejemplo.
Un saludo y gracias a tí por participar :-)
Great article if you ask me. Thank u for providing that data.
Greg Octocus
wireless internet jammer
Publicar un comentario