Cómo hacer un mapa y usarlo en mi archivo HTML

Cuando tuve que poner mapas en una página web, siempre usé el mapa incrustado que proporciona Google. Abra el área que desea en el mapa en Google Maps, haga clic en el botón que he ilustrado a continuación y debería obtener un elemento que le permitirá incrustar el mapa en una página web.


Es posible (no estoy seguro exactamente cómo, no he superado una simple incrustación antes) superponer datos personalizados en el mapa.

De lo contrario, si desea hacer el mapa por sí mismo, estaría buscando obtener datos de OpenStreetMap, utilizando una herramienta de representación para crear mosaicos de mapas y luego mostrando el mapa en su página web con la ayuda de una herramienta como Leaflet (biblioteca de JavaScript ) Pero es probable que esto tome 10x o 100x el tiempo que lo haría una simple incrustación de Google Maps.

Para crear un mapa, recomiendo usar algunos de los programas de mapeo gratuitos y de código abierto disponibles, como Mapbox, TileMill, CartoDB, Mapnik, SaraGEO y OpenStreetMaps. Todo esto se puede diseñar y superponer con archivos de forma y puntos de datos. Los datos también se pueden vincular a través de cualquier archivo externo y Github también. Este es un simple HTML incrustado.

Si este es su propio mapa dibujado “encuéntrelo” que ha creado para especificar su ubicación, entonces sí puede hacerlo y colocarlo como cualquier otra imagen en su página HTML.

Si encuentra que Google Maps está demasiado ocupado para su uso o simplemente desea un mapa simple para que lo usen sus visitantes, entonces usar su propio mapa personalizado es una excelente idea. A veces, los mapas de representación son más fáciles que un mapa de ruta exacto si se dibujan teniendo en cuenta la simplicidad.

HACIENDO TU MAPA
Puede usar cualquier aplicación de gráficos en su computadora para hacer su mapa. Windows Paint es muy fácil. Cada aplicación que decidas usar toma tiempo para aprender primero. También puede dibujar el estilo antiguo del mapa y luego escanearlo. Use su aplicación de gráficos para agregar detalles o marcadores y para texto.

No especifica para qué es su mapa. ¿Es para ubicar su negocio? ¿Da instrucciones para un evento? ¿Marca todas tus ubicaciones en la ciudad? ¿Es un mapa de búsqueda del tesoro por diversión? ¿Es para adultos o niños? Si es para alguno de estos propósitos, un mapa personalizado sería muy divertido y puede incluir cosas que nunca se encuentran en Google Maps. A los fines de esta respuesta, supondré que está haciendo un mapa de búsqueda del tesoro.

Detalles como ese son importantes en las preguntas porque la respuesta tiene que elegir una dirección.

¿QUÉ TAMAÑO DE IMAGEN?
Asegúrese de que el tamaño de su imagen se ajuste a su página sin tener que estirarla o encogerla. Si el mapa es la parte principal de su página, hágalo grande. Tengo 1000 x 500 que cabe en una página y se ve muy bien con espacio para texto a continuación. Si desea poner una leyenda o texto a un lado de la imagen (“imagen flotante hacia la izquierda o hacia la derecha”), haga que la imagen sea 800 x 500. O puede probar 800 x 600 para una apariencia más cuadrada. Eso dependerá de las dimensiones de su mapa que no puedo determinar desde aquí. Si espera que algunos de sus visitantes impriman su mapa, hágalo para que se ajuste a una página de 8 1/2 “x 11”.

COLOCANDO SU MAPA (IMAGEN)
Es mejor usar la etiqueta de estilos para posicionar y formatear su imagen en su página.

Aquí está el código de la imagen. También supongo que mantiene todas sus imágenes en una carpeta de imágenes en su servidor host (como lo hago yo).

map

Para un buen SEO, nombraría su archivo de mapa con algo específico como “treasure-hunt-map.jpg” y crearía las etiquetas ALT y TITLE como “Treasure Hunt Map”. El punto es hacer que la gente venga y use su mapa que ya ha configurado como un medio para atraer e informar a sus visitantes.

La configuración de estilo que ajuste según el tamaño real de la imagen de su mapa, dónde desea que esté el texto del subtítulo y cuánto espacio desea alrededor de su mapa.

Espero que esto te ayude a hacer y colocar tu mapa. Una vez más, los detalles específicos pueden ayudar a encontrar la mejor solución. Háganos saber quién es usted (dueño del negocio, estudiante, publicidad del club, etc.) y qué está tratando de hacer para que podamos ayudarlo.

Si desea utilizar un mapa real, debe comprar uno de las compañías que proporcionan las imágenes de sitios como Google Maps.
pero en su lugar, le recomendé que usara el mapa de google o el mapa de bing para su sitio usando técnicas html 5

More Interesting

Estoy aprendiendo desarrollo web full stack, ¿debería preocuparme por aprender AWS cuando empiezo a aprender el lado del backend?

Estoy tratando de aprender HTML para desarrollar sitios web. ¿Dónde debería comenzar?

Quiero crear un sitio que permita a las personas compartir historias, poemas, trabajos de investigación y actualizarse automáticamente con noticias y chat. ¿Que debo hacer?

Estoy familiarizado con JavaScript, Ruby y Scala. Para el desarrollo de backend, ¿debería aprender Node, Rails o Play?

Quiero aprender completamente el desarrollo web. ¿Dónde puedo encontrar una lista de libros que me pueden ayudar a aprenderlo por completo? Me alegrará saber que hay algunas series de libros de clase mundial para el desarrollo web.

Estoy interesado en aprender cómo diseñar y crear sitios web y aplicaciones. ¿Donde debería empezar?

Cómo hacer popular el contenido de mi sitio web

Cómo convertirse en un corredor de bolsa

Voy a comenzar a desarrollar un gran proyecto de red social. ¿Debo usar Node.JS o necesito usar Java (para el backend)?

No sé nada sobre desarrollo web / codificación. Dicho esto, tengo una idea para una tienda en línea basada en negocios / sitios web. ¿Cómo puedo progresar?

Construí una API de back-end y quiero mostrarla en GitHub. ¿Qué información debe contener mi archivo Léame y qué estructura debe tener?

Me mudaré a los EE. UU., ¿Cómo debo prepararme para conseguir un trabajo como programador / desarrollador?

Soy un desarrollador web líder. Piensa en aprender Desarrollo móvil. ¿Hará que mi perfil sea fuerte?

Estoy frustrado. Hace días que no trabajo. ¿Por qué es difícil configurar MySQL, Apache y PHP en una Mac Yosemite?

Voy a comenzar una carrera como desarrollador front-end, ¿qué debo tener en cuenta?