Cómo crear algunos proyectos sencillos con la API de Google Maps
Cómo crear algunos proyectos sencillos con la API de Google Maps

Cómo crear algunos proyectos sencillos con la API de Google Maps

  • 178 visualizaciones
  • 2 minuto de lectura
En este artículo, aprenderá cómo crear mapas interactivos, optimizar rutas y analizar datos de ubicación con la API de Google Maps en GCP.
administración
  • 27 de octubre de 2025
0 acciones
0
0
0
0
0
acciones
0
0
0
0

Proyecto 1: Localizador de tiendas web con búsqueda de ubicación y autocompletado

Solicitud: Mostrar todas las sucursales/representantes en el mapa, búsqueda rápida de direcciones/ubicaciones cercanas.
API: API de JavaScript de Maps + Lugares (Autocompletar/Detalles). Google para desarrolladores

Esqueleto simple (HTML + JS)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Store Locator</title>
<style>#map{height:70vh} .panel{padding:8px}</style>
<script>
let map, marker, autocomplete, sessionToken;

async function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 35.6892, lng: 51.3890 }, zoom: 12, mapId: "YOUR_MAP_ID"
});

// Autocomplete با Session Token برای صورت‌حساب درست
sessionToken = new google.maps.places.AutocompleteSessionToken();
const input = document.getElementById("search");
autocomplete = new google.maps.places.Autocomplete(input, { fields: ["place_id","geometry","name"] });
autocomplete.setOptions({ sessionToken });

autocomplete.addListener("place_changed", () => {
const place = autocomplete.getPlace();
if (!place.geometry) return;
const loc = place.geometry.location;
map.panTo(loc); map.setZoom(15);
if (marker) marker.setMap(null);
marker = new google.maps.Marker({ position: loc, map, title: place.name });
});
}
</script>
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap">
</script>
</head>
<body>
<div class="panel">
<input id="search" placeholder="کافه / فروشگاه نزدیک من..." size="40" />
</div>
<div id="map"></div>
</body>
</html>

  • Punto importante: Token de sesión En Autocompletar, es correcto agrupar las búsquedas en una sesión y facturación. Si usa el widget listo, la gestión de sesiones es automática; si usa el servicio sin procesar, debe... Token de sesión de autocompletado Construir (como arriba). Google para desarrolladores+2Google para desarrolladores+2

  • Si utiliza el estilo de nube, ID del mapa Configúrelo en su ID de mapa. Google para desarrolladores+1

  • Restringir la clave. (Referencias HTTP + restricción de API para Places/Maps JS).

Proyecto 2: "Ruta multiparada con orden de parada optimizado"«

Solicitud: Mensajería/logística ligera, ventas de marketing, enrutamiento rápido teniendo en cuenta el orden óptimo de paradas.
API: API de rutas (calcular rutas Con optimizarWaypointOrder). Google para desarrolladores+1

Solicitud de muestra (cURL – REST)

curl -X POST "https://routes.googleapis.com/directions/v2:computeRoutes" \
-H "Content-Type: application/json" \
-H "X-Goog-Api-Key: $API_KEY" \
-H "X-Goog-FieldMask: routes.optimizedIntermediateWaypointIndex,routes.distanceMeters,routes.duration" \
-d '{
"origin": {"address": "Tehran"},
"destination": {"address": "Tehran"},
"travelMode": "DRIVE",
"optimizeWaypointOrder": true,
"intermediates": [
{"address": "Karaj"},
{"address": "Qom"},
{"address": "Varamin"},
{"address": "Ekbatan, Tehran"}
]
}'

  • La respuesta incluye rutas.optimizadoIntermedioWaypointIndex que da el orden óptimo de paradas intermedias. Google para desarrolladores

  • Para la matriz de tiempo/distancia multiorigen-multidestino, también puede utilizar calcularMatrizDeRuta Usar (en el mismo conjunto de API de rutas) Google para desarrolladores

  • De nuevo Restringir la clave a la IP del servidor. Si la solicitud se realiza desde el backend. Google para desarrolladores

Proyecto 3: «Validación de direcciones en el anverso y reverso del pedido»

Solicitud: Pago en tienda online, prevención de errores de devolución/entrega de paquetes.
API: API de validación de direcciones. Google para desarrolladores+1

Ejemplo simple (cURL – REST)

curl -X POST "https://addressvalidation.googleapis.com/v1:validateAddress?key=$API_KEY" \
-H "Content-Type: application/json" \
-d '{
"address": { "regionCode": "IR", "locality": "Tehran", "addressLines": ["Valiasr St, No. 123"] }
}'

  • El resultado incluye la calidad/estandarización de los componentes de la dirección y el mejor geocódigo; puede sugerir mejoras al usuario. Google para desarrolladores

Ejemplo de backend de Python (cliente oficial)

from google.maps import addressvalidation_v1 as av
client = av.AddressValidationClient()
req = av.ValidateAddressRequest(
address=av.PostalAddress(region_code="IR", locality="Tehran", address_lines=["Valiasr St, No. 123"])
)
resp = client.validate_address(request=req)
print(resp.result.verdict, resp.result.address.formatted_address)

  • Existe una biblioteca oficial de Python para la validación de direcciones. Google Cloud

(Opcional) Estilo de nube e ID del mapa

Si quieres una interfaz de usuario de marca, en la consola una Estilo de mapa basado en la nube Crea, obtén el ID del mapa y configúralo en tu cliente (compatible con WebJS y Static/Android/iOS). Puedes actualizar el estilo desde la consola sin modificar el código. Para inspirarte rápidamente, Asistente de estilo Ver.

En este artículo:
,,
Artículo escrito por:
Seguir
Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Artículo anterior
Artículo siguiente
También te puede gustar