Google Maps vs Bing Maps. Parte 2.

Comparativa desde el punto de vista del desarrollador

Ante una pregunta lanzada por Miguel Loichate (@Lonifasiko) relativa al post Primeros pasos en el desarrollo con Bing Maps en .NET he decidido crear la segunda parte del post Google Maps vs Bing Maps, esta vez con un enfoque más orientado a su programación.

Su pregunta en un tweet era: “¿Qué tal es para desarrollar, supongo que tendrá una API de alto nivel en C#, ¿no? ¿Diferencias con Google Maps?“. La única API en C# es la que nos permite acceder a los servicios SOAP y REST de Bing Maps (diferencias REST y SOAP). Estos servicios nos permiten acceder a algunas de las funcionalidades de Bing Maps. Los servicios son:

Esta comparativa se va a centrar en el desarrollo de aplicaciones web usando sus correspondientes controles en AJAX por cada uno de estos proveedores.

Funcionalidades comunes:

La mayoría de las características son comunes y sólo deberemos cambiar el archivo js que apunta al proveedor correspondiente y los métodos invocados. Por lo que revisando las APIs, no será de gran dificultad cumplimentar en uno las funcionalidades ofrecidas por el otro. Básicamente necesitaremos una página HTML y un archivo javascript. A continuación mostraré algunos ejemplos básicos de carga de mapa y muestra de pins para que veáis que no son muy diferentes:

1. Creación y carga del mapa:
Página HTML Google:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mapa Google</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="MapaGoogle.js"></script>
</head>
<body onload="onLoad()">
<div id="mapaDiv" style="width:400px; height:400px"></div>
</body>
</html>

Página HTML Bing:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mapa Bing</title>
<script type="text/javascript" src='http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2'></script>
<script type="text/javascript" src="MapaBing.js"></script>
</head>
<body onload="onLoad()">
<div id="mapaDiv" style="width:400px; height:400px"></div>
</body>
</html>

Javascript Google:

function onLoad() {
var latlng = new google.maps.LatLng(42.95968115329742, -2.5895950198173523);

var myOptions = {
zoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapaDiv"), myOptions);
}

Javascript Bing:

function onLoad() {
var latlng = new VELatLong(42.95968115329742, -2.5895950198173523);
var map = new VEMap('mapaDiv');
map.LoadMap(latlng, 9, 'r', false);
}

2. Añadir un pin con su “burbuja”:

Sólo ampliaremos el código javascript.

Javascript Google:

function onLoad() {
var latlng = new google.maps.LatLng(42.95968115329742, -2.5895950198173523);

var myOptions = {
zoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapaDiv"), myOptions);

var marker = new google.maps.Marker({
position: latlng,
map: map
});

var infowindow = new google.maps.InfoWindow({
content: "Este es un ejemplo de pin en Google Maps"
});

google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}

Javascript Bing:

function onLoad() {
var latlng = new VELatLong(42.95968115329742, -2.5895950198173523);
var map = new VEMap('mapaDiv');
map.LoadMap(latlng, 9, 'r', false);
var shape = new VEShape(VEShapeType.Pushpin, latlng);
shape.SetTitle('Mi Pin');
shape.SetDescription('Este es un ejemplo de pin en Bing Maps');
map.AddShape(shape);
}

3. Comparación:
Para comparar los resultados podemos crear una página con dos iframes:

<!PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<table>
<tr><td>Google</td><td>Bing</td>
</tr>
<tr></pre>
<iframe>height=410 width=410 frameborder=0 src="MapaGoogle.htm" scrolling=no></pre>
<iframe>&amp;amp;amp;lt;span class="hiddenSpellError" pre="iframe ">height=410 width=410 frameborder=0 src="MapaBing.htm" scrolling=no ></iframe>
<pre>
</tr>
</table>
</body>
</html>

Ventajas Google Maps:

  • La mayor ventaja que he descubierto el Google Maps es la gran comunidad de usuarios que existe que facilita la resolución de problemas.
  • La carga de mapas y pins es más rápida
  • Actualización de mapas más frecuente

Ventajas Bing Maps:

  • Su SDK  interactiva que nos facilita la vida muchísimo por su usabilidad. Tambien disponible para el control Silverlight.
  • En Servicio Web para Imaginery que nos permite obtener mapas estáticos (útiles para crear versiones imprimibles de nuestros mapas) evitando el límite en longitud de URL de los mapas estáticos de Google.
  • Customizar pins es más sencillo que con Google Maps. Pues sobre los pins podemos incluir texto, de gran utilidad si los pins están agrupados y queremos mostrar el número contenido dinámicamente sin tener un icono para cada valor o un generador de iconos.

Conclusión:

Las diferencias en su programación son mínimas si estamos acostumbrados al desarrollo con mapas en Javascript, por lo que la decisión de utilizar uno u otro se basará en intereses económicos asociados a las licencias y en intereses personales relativos al diseño y navegabilidad de los mismos.

Si queréis ver ambos en acción podéis visitar la siguiente página.

Por último animaros a que lancéis vuestras dudas o comentarios como hizo Miguel Loichate. De esta forma podré ampliar el post con el fin de mejorarlo 🙂

Anuncios
  1. #1 por Miguel el 29 junio, 2011 - 11:03 pm

    Buen post Belén, ya veo que apenas hay diferencias entre las dos tecnologías de mapas, son detalles mínimos de Javascript, poquita cosa. Respecto a licencias, entiendo que tanto Google Maps como Bing Maps, la única restricción que tienen para poder utilizarlos de forma free es que la web donde los utilizas sea públicamente accesible, ¿sigue siendo esto así?

    Yo me acuerdo que tuve bastante jaleo en su día con el tema licencias, porque utilizaba Virtual Earth (predecesora de Bing Maps) dentro de un control HTML de una desktop aplicación programada en C#, en el límite de lo legal, de hecho en Google Mapsn no lo podías hacer. Por eso te preguntaba lo de C#, por si tenían algo también para desktop.

    Sigue a tope con los mapas Belén, aquí tienes a otro adicto a la cartografía ;-).

    ¡SaludoX!

  2. #2 por belensaez el 30 junio, 2011 - 2:38 pm

    Para desktop no tienen nada, al fin y al cabo para conectarse a sus mapas ya sean AJAX o Silverlight necesitamos una conexión a Internet. La solución que aplicaste sigue siendo hoy por hoy la única disponible. A menos que quieras usar el servicio web de Imagery y cargar una imagen estática en vez de un mapa dinámico.

    En cuanto a las licencias tengo entendido que Bing Maps es de pago incluso para las web públicas, pero gracias al programa BizSpark de Microsoft (http://www.youtube.com/watch?v=7nNsUoCCNAM) las licencias son gratutitas para StartUps durante tres años 🙂

  3. #3 por Roberto Sánchez el 4 abril, 2012 - 12:09 am

    Una Pregunta puedo usar estos códigos dentro de un “Editor de Contenido” de Sharepoint, saben algo al respecto?

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: