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

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.
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.

Deja una respuesta

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


También te puede gustar
Almacenamiento en la nube Amazon S3

¿Qué es Amazon S3? Un análisis experto del servicio de almacenamiento en la nube de Amazon.

En el mundo tecnológico actual, se generan y transfieren enormes cantidades de datos constantemente. Empresas, desarrolladores y usuarios necesitan una plataforma fiable, escalable y siempre disponible. En este sentido, Amazon S3 (Simple Storage Service) es un popular servicio de AWS diseñado para simplificar y hacer más segura la gestión y el almacenamiento de datos.
Cómo usar Steam CMD Recovered

Tutorial completo sobre la instalación y el uso de SteamCMD para iniciar un servidor de juegos

SteamCMD es la herramienta oficial de Valve para descargar, instalar y actualizar versiones de juegos en servidores dedicados. Esta herramienta permite a los administradores de servidores de juegos crear, administrar y recibir actualizaciones automáticamente en un servidor dedicado sin necesidad de un cliente de Steam completo. En esta guía, te explicaremos paso a paso cómo instalar y configurar SteamCMD, y luego cómo instalar un servidor dedicado para un juego.