You want to set the center value to the current geolocation value when using google map api

JSP Code

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@include file="/importhead.jsp" %> <%@include file="/header.jsp" %> <%@include file="/panel.jsp" %>

<select id="location_distance">
    <option value="500">500m</option>
    <option value="1000">1km</option>
    <option value="3000">3km</option>
    <option value="5000">5km</option>
</select>

<div id="map"></div>
<script>
    function initMap(){
        var options = {
            zoom:17,
            center:{lat:37.519747,lng:126.930340},
            disableDefaultUI: true
            /* /* center: myLatlng,
            mapTypeControl: false,
            draggable: false,
            scaleControl: false,
            scrollwheel: false,
            navigationControl: false, */
            /* /* streetViewControl: false, */

/* mapTypeId: google.maps.MapTypeId.ROADMAP */ }

        //new map
        var map = new google.maps.Map(
                  document.getElementById('map'), options);

        // // The marker, positioned at Uluru
        var marker = new google.maps.Marker({
            position: {lat:37.519747,lng:126.930340},
            map:map,
            icon: {
                url: 'https://developers.google.com/maps/documentation/javascript/images/circle.png',
                anchor: new google.maps.Point(10, 10),
                scaledSize: new google.maps.Size(13, 20)
            }
            /* /* icon: */
        });
        var infoWindow = new google.maps.InfoWindow({
            Content: '<h3> Yeouido Coffee House</h3>'
                    /*   '<h4>Yeouido-dong Yeouido-dong, 67-gil, 11</h4>' */
        });
        marker.addListener('click', function(){
            infoWindow.open(map, marker);
        });
    }
</script>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBPwhDtefvg2PSzwiBibrJ3FVL4QU79Iyo&callback=initMap">
    </script>
</div>
<%@include file="/footer.jsp" %>

Now you want to load the center value using gps (geolocation()). Can we implement it using javascript? Help me!~

Also, please tell me how to zoom in automatically when selecting an option in gps~~~

googlemap googlemapapi gps geolocation center

2022-09-22 13:07

1 Answers

1. If there's anything you don't know... First, ask Google in English.
When I asked Google Maps javascript center current position, something like this came out. From the source you uploaded, I think you can put this right behind the var map = blah blah. line.

if (navigator.geolocation) {
     navigator.geolocation.getCurrentPosition(function (position) {
         initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
         map.setCenter(initialLocation); // This is the key...
     });
 }

2. If Google doesn't seem to answer... Browse for official documents.
I looked up the Google Maps JS API document and they told me to use the setZoom() method to dynamically adjust zoom.

2022-09-22 13:07

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656