Как подключить адреса в моей sqlite db к позиционным маркерам с помощью API google maps в Django

Я начинаю программировать на Django и также начинаю использовать API Google, в нескольких словах для моего маленького проекта, мне нужно установить маркерные точки на основе моей базы данных SQLite, связанные с адресами, которые регистрируют пользователи, на карте, отображаемой в моем HTML, Я знаю, что мне нужно преобразовать эти строки адресов в координаты в JSON файле, и этот JSON файл является тем, который API может прочитать и отобразить, до сих пор мне удалось установить карту, геолокацию и установить указатели из файла примера, основанного на url, который дает документация google.

Я буду бесконечно благодарен, если кто-то сможет помочь мне разобраться в этих вопросах:

a) Как мне преобразовать адресные переменные моей модели в Django в читаемый Google API JSON. b) Как мне вызвать этот JSON файл, чтобы отобразить его на моей карте.

Большое спасибо за ваше время!

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 2,
    center: new google.maps.LatLng(2.8, -187.3),
    mapTypeId: "terrain",
  });

  infoWindow = new google.maps.InfoWindow();

    const locationButton = document.createElement("button");

    locationButton.textContent = " Mi ubicacion ";
    locationButton.classList.add("custom-map-control-button");
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
    locationButton.addEventListener("click", () => {
        // Try HTML5 geolocation.
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                (position) => {
                    const pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude,
                    };

                    infoWindow.setPosition(pos);
                    // infoWindow.setContent("Tu estas aqui");
                    // infoWindow.open(map);
                    map.setCenter(pos);
                },
                () => {
                    handleLocationError(true, infoWindow, map.getCenter());
                }
            );
        } else {
            // Browser doesn't support Geolocation
            handleLocationError(false, infoWindow, map.getCenter());
        }
    });

  // Create a <script> tag and set the USGS URL as the source.
  const script = document.createElement("script");

  // This example uses a local copy of the GeoJSON stored at
  // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
  script.src =
    "https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js";
  document.getElementsByTagName("head")[0].appendChild(script);
}

// Loop through the results array and place a marker for each
// set of coordinates.
const eqfeed_callback = function (results) {
  for (let i = 0; i < results.features.length; i++) {
    const coords = results.features[i].geometry.coordinates;
    const latLng = new google.maps.LatLng(coords[1], coords[0]);

    new google.maps.Marker({
      position: latLng,
      map: map,
    });
  }
};

Вернуться на верх