Thiết kế website giá rẻ

Question

I need help adding a bubble around the user’s location collected by an interactive map on my web app in html/javascript. I have gotten the program to automatically collect the user’s location upon visiting the site, which is necessary due to the fact that this maps data is used to group users by location into chatrooms for an anonymous chatting platform. Furthermore, I also need help getting the program to group users together based on bubble proximity to a few central, predetermined locations on the map which will serve as chatroom bases per se. These locations have not been input to the code yet, but there will be 6 different latitude/longitude coordinates. Finally, I also would greatly appreciate an explanation as to how I could incorporate this map into a minimap on my chat platform that appears on the chatting page. Thank you so much. Here is my current code slightly modified from Google Maps API:

<!DOCTYPE html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
 DISCLAIMER: This code is from Google's API to implement their maps software. 
 The user tracking and positioning, as well as the map view elements to increase/decrease
 the view range, were implemented by Wyatt Paradise
-->
<html>
  <head>
    <style>
      /**
       * @license
       * Copyright 2019 Google LLC. All Rights Reserved.
       * SPDX-License-Identifier: Apache-2.0
       */
      /** 
       * Always set the map height explicitly to define the size of the div element
       * that contains the map. 
       */
      #map {
        height: 100%;
      }

      /* Makes the sample page fill the window. */
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      .custom-map-control-button {
        background-color: #fff;
        border: 0;
        border-radius: 2px;
        box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
        margin: 10px;
        padding: 0 0.5em;
        font: 400 18px Roboto, Arial, sans-serif;
        overflow: hidden;
        height: 40px;
        cursor: pointer;
      }
      .custom-map-control-button:hover {
        background: rgb(235, 235, 235);
      }
    </style>
    <title>Geolocation</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <script>
      // Global variables to store map and info window instances
      let map, infoWindow;

      // Global variable to store the selected range
      let selectedRange = 0;

      function initMap() {
        // Initialize map and info window
        map = new google.maps.Map(document.getElementById("map"), {
          center: { lat: 35.205894, lng: -97.445717 },
          zoom: 17,
        });
        infoWindow = new google.maps.InfoWindow();

        // Get user's current location automatically
        getUserLocation();
      }

      // Function to get user's current location
      function getUserLocation() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(
            (position) => {
              const userPos = {
                lat: position.coords.latitude,
                lng: position.coords.longitude,
              };

              // Display user's location on the map
              const userMarker = new google.maps.Marker({
                position: userPos,
                map: map,
                title: "Your Location",
              });

              // Center map on user's location
              map.setCenter(userPos);
            },
            () => {
              handleLocationError(true, infoWindow, map.getCenter());
            }
          );
        } else {
          // Browser doesn't support Geolocation
          handleLocationError(false, infoWindow, map.getCenter());
        }
      }

      // Function to handle location errors
      function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(
          browserHasGeolocation
            ? "Error: The Geolocation service failed."
            : "Error: Your browser doesn't support geolocation."
        );
        infoWindow.open(map);
      }

      // Expose the initMap function to the global scope
      window.initMap = initMap;
    </script>
  </head>
  <body>
    <div id="map"></div>
    <!-- Load Google Maps API with callback to initMap -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDm-ArKttbnMcFJn5glWhrjMJZXHQU0DTQ&callback=initMap&v=weekly&solution_channel=GMP_CCS_geolocation_v1"
      defer
    ></script>
  </body>
</html>

I tried looking up how to add bubbles to user location, but all I’ve found is how to add Google Maps using bubble software. This is almost all of the results I’m seeing, and none of the Youtube videos or stack overflow comments I’ve encountered have been relevant. Please help

Thiết kế website giá rẻ

Danh mục

How to add bubble around user location using Google Maps API?