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í:
