Repositorio de ejemplo para el workshop de Django y Google Maps.
- Tener instalado Python
- Tener instalado Django
- Windows (https://www.python.org/downloads/windows/)
- Mac (https://www.python.org/downloads/mac-osx/)
- Linux (https://www.python.org/downloads/source/)
Comprobar la instalación ejecutando el comando python --version en la consola.
Para instalar Django, ejecutar el comando pip install django en la consola.
Entrara a la consola de GCP Google.
Para crear una API Key, se debe ir a la sección de APIs y Servicios y seleccionar la opción de Credenciales.
Tambien activar la API de Maps JavaScript API.
Es nesesario contar con un proyecto creado en GCP, si no se tiene, se debe crear uno nuevo. Y tener una cuenta de facturación asociada a la cuenta de GCP.
¿Descargaste el código ya terminado? Recuerda que para poder utilizar las API de Google Maps, es necesario crear una API Key, ya que este repositorio no contiene la API Key.
Recordar cambiar la API Key en:
<script src="https://maps.googleapis.com/maps/api/js?key=[CAMBIAR API KEY]&callback=initMap"></script>
Por la generada en la consola de Google.
Leer las mejores practicas para el uso de las API Keys
Para crear un proyecto en Django, ejecutar el comando django-admin startproject [nombre del proyecto] en la consola.
El comando utilizado fue: django-admin startproject maps-example
Estructura del proyecto:
maps-example
├── manage.py
└── maps-example
├── __init__.py
├── settings.py
├── urls.py
└── wsgi.py
Para levantar el servidor de desarrollo, ejecutar el comando python manage.py runserver en la consola.
Abrir el navegador y navegar a http://localhost:8000/. Puerta por defecto de Django.
Las apps en Django son como los módulos de un proyecto. Cada app tiene su propia funcionalidad y se puede reutilizar en otros proyectos.
Para crear una app, ejecutar el comando python manage.py startapp [nombre de la app] en la consola.
El comando utilizado fue: python manage.py startapp maps
Estructura de la app (Contenida dentro del proyecto):
maps
├── admin.py
├── apps.py
├── __init__.py
├── migrations
│ └── __init__.py
├── models.py
├── tests.py
└── views.py
Las views son las encargadas de procesar la información que se envía al servidor y de generar la respuesta que se envía al cliente.
Para crear una view, se debe crear una función en el archivo views.py de la app.
from django.shortcuts import render
from django.http import HttpResponse
def members(request):
return HttpResponse("Hello world! ")Si abrimos el navegador y navegamos a http://localhost:8000, no se mostrará nada. Esto es porque no se ha creado una ruta para la view.
Las URLs son las encargadas de manejar las peticiones que se hacen al servidor.
Para crear una URL, se debe crear una ruta en el archivo urls.py del proyecto.
# urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
# Add this line:
path('maps/', include('maps.urls')),
]Ahora deberíamos poder navegar a http://localhost:8000/maps/ y ver el mensaje Hello world! . En caso de que no se muestre el mensaje, saltar a los settings para indicarle a Django que la app maps ha sido creada.
Los settings son los encargados de configurar el proyecto.
Para indicarle a Django que la app maps ha sido creada, en la sección INSTALLED_APPS del archivo settings.py del proyecto, se debe agregar la app.
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
# Add this line:
'maps'
]Los templates son los encargados de mostrar la información al usuario.
Para crear un template, se debe crear un archivo .html en la carpeta templates de la app.
<!-- /templates/home.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maps</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>Para poder utilizar el template, modificamos la view para que renderice el template.
# views.py
from django.http import HttpResponse
from django.template import loader
def index(request):
template = loader.get_template('home.html')
return HttpResponse(template.render())Los templates dinámicos son los encargados de mostrar la información al usuario de forma dinámica.
Modificamos el template para que muestre la información que se envía desde la view.
<!-- /templates/home.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maps</title>
</head>
<body>
<h1>Workshop Django + Google Maps - eSource</h1>
<p>
Api Key: {{apiKey}}
My first name is {{ first_name }}. My last name is {{ last_name }}.
</p>
</body>
</html>Hay que notar que en el template se utilizan las variables {{apiKey}} y {{ first_name }} y {{ last_name }}. Estas variables se envían desde la view.
Modificamos la view para que envíe la información al template.
# views.py
from django.http import HttpResponse
from django.template import loader
def index(request):
first_name = 'Tu nombre'
last_name = 'Tu apellido'
apiKey = 'sustituir por la api key'
template = loader.get_template('home.html')
context = {
'first_name': first_name,
'last_name': last_name,
'apiKey': apiKey
}
return HttpResponse(template.render(context, request))Verificar que se muestre la información en el navegador. En caso de que no se muestre, verificar que la ruta sea correcta. Así mismo, verificar que el template se encuentre en la carpeta templates de la app. Y los nombres de las variables sean correctos.
Para agregar un mapa, se debe agregar el siguiente código en el template.
<!-- /templates/home.html -->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Mi primer mapa</title>
<style>
#map {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<h1>Workshop Django + Google Maps - eSource</h1>
<p>
Api Key: {{apiKey}}
My first name is {{ first_name }}. My last name is {{ last_name }}.
</p>
<div id="map"></div>
<script>
// coordenadas ciudad de mexico
var location = { lat: 19.432608, lng: -99.133209 };
function initMap() {
var mapa = new google.maps.Map(document.getElementById("map"), {
center: location,
zoom: 6,
// estilos opcionales
});
}
window.initMap = initMap;
</script>
<script src="https://maps.googleapis.com/maps/api/js?key={{apiKey}}&callback=initMap"></script>
</body>
</html>Verificar que se muestre el mapa en el navegador. En caso de que no se muestre, verificar que la ruta sea correcta. Así mismo, verificar que el template se encuentre en la carpeta templates de la app. Y los nombres de las variables sean correctos.
Para agregar marcadores, se debe agregar el siguiente código en el template.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Mi primer mapa</title>
<style>
#map {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<h1>Workshop Django + Google Maps - eSource</h1>
<p>
Api Key: {{apiKey}}
My first name is {{ first_name }}. My last name is {{ last_name }}.
</p>
<div id="map"></div>
<script>
// The escapejs filter escapes text to be used in JavaScript strings.
var list = "{{list | escapejs}}"
list = JSON.parse(list)
console.log(list)
function initMap() {
var mapa = new google.maps.Map(document.getElementById("map"), {
center: list[0],
zoom: 6,
// estilos opcionales
});
// add markers from the list
for (var i = 0; i < list.length; i++) {
addMarker(list[i], mapa);
}
}
function addMarker(location, mapa) {
var marker = new google.maps.Marker({
position: location,
map: mapa,
});
var infoWindow = new google.maps.InfoWindow({
content:
"Esta es la sucursal con coords: " +
location.lat +
", " +
location.lng,
});
marker.addListener("click", function () {
infoWindow.open(mapa, marker);
});
}
window.initMap = initMap;
</script>
<script src="https://maps.googleapis.com/maps/api/js?key={{apiKey}}&callback=initMap"></script>
</body>
</html>Finalmente, hemos agregado marcadores a nuestro mapa. Para poder agregar marcadores, se debe enviar una lista de coordenadas desde la view.
# views.py
from django.http import HttpResponse
from django.template import loader
import json
def index(request):
mexico_city = { 'lat': 19.432608, 'lng': -99.133209 }
colombia = { 'lat': 4.570868, 'lng': -74.297333 }
list = [mexico_city, colombia]
list_json = json.dumps(list)
first_name = 'Tu nombre'
last_name = 'Tu apellido'
apiKey = 'sustituir por la api key'
template = loader.get_template('home.html')
context = {
'first_name': first_name,
'last_name': last_name,
'apiKey': apiKey,
'list': list_json
}
return HttpResponse(template.render(context, request))Sigue aprendiendo con nosotros. Conocemas sobre eSource Capital y las soluciones con Google Cloud Platform. https://esourcecapital.com/maps
eSource - 2023
El código de este repositorio es solo para fines demosntrativos. Se recomienda revisar la documentación oficial de Django y Google Maps para conocer más sobre el uso de estas herramientas, sus mejores prácticas y las ultimas actualizaciones.