Display the user's location on Google Maps in addition to all other markers for a comprehensive view

Question

Display the user's location on Google Maps in addition to all other markers for a comprehensive view

How can I modify the code to prompt the user for their location only when they click on a specific button, and then show all markers on the map? This jsfiddle illustrates the current issues: Google map loads markers from a database, and the user is asked by the browser if they want to share their position. Here are my questions:

How do I make the browser ask for the user's position only when they click on the "Show my position" button? How can I implement this in the code so that if the button is not clicked, the map shows the other markers instead?
When the user clicks on "Show my position," how can I adjust the map to fit all markers on the screen and make them visible?

<button>Show my position</button>
<div id="googlemap"></div>

You can view the jsfiddle here.

Note: JSFiddle may not work on Internet Explorer. Thank you for your assistance!

javascript jquery css google-maps google-maps-api-3

Answer 1

Answer №1

Make sure to assign an ID to your button, like this:

<button id="showPosition">Display my location</button>

Utilize the fitBounds() method to encompass the user's location on the map.

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (position) {
        var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

        marker = new google.maps.InfoWindow({
            map: map,
            position: pos,
            zoom: 5,
            content: 'You are here !',

        });
        bounds.extend(marker.position);

        map.fitBounds(bounds); // adjust the map with the expanded bounds

    }, function () {
        handleNoGeolocation(true);
    });
} else {
    // Geolocation is not supported by the browser
    handleNoGeolocation(false);
}

Remember to enclose your code within a click event listener:

Traditional Method

document.getElementById("showPosition").addEventListener('click', function () {

    // insert code here
});

Google Maps Approach

google.maps.event.addDomListener(document.getElementById('showPosition'), 'click', function () {

    // insert code here
});

Answer 2

Make sure to assign an ID to your button, like this:

<button id="showPosition">Display my location</button>

Utilize the fitBounds() method to encompass the user's location on the map.

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (position) {
        var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

        marker = new google.maps.InfoWindow({
            map: map,
            position: pos,
            zoom: 5,
            content: 'You are here !',

        });
        bounds.extend(marker.position);

        map.fitBounds(bounds); // adjust the map with the expanded bounds

    }, function () {
        handleNoGeolocation(true);
    });
} else {
    // Geolocation is not supported by the browser
    handleNoGeolocation(false);
}

Remember to enclose your code within a click event listener:

Traditional Method

document.getElementById("showPosition").addEventListener('click', function () {

    // insert code here
});

Google Maps Approach

google.maps.event.addDomListener(document.getElementById('showPosition'), 'click', function () {

    // insert code here
});

Answer 3

Answer №2

For the browser to request user permission only when the 'Show my position' button is clicked, you can add an onclick event to the button and then check for the navigator.geolocation condition upon clicking.

Here's an example:

<button id="showMe">Show my position</button>

Managing user permission :

document.getElementById("showMe").addEventListener('click', function () {
    if(navigator.geolocation) {
        // If the user grants permission
    } 
});

Now, the browser will only prompt for permission when the button is clicked.

To adjust the map area to fit the new marker, utilize the bounds to incorporate the new marker and then adjust the map like so :
```
bounds.extend(pos);
map.fitBounds(bounds);
```

Therefore, your updated code will resemble this:

document.getElementById("showMe").addEventListener('click', function () {
    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
        var pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);

        marker = new google.maps.InfoWindow ({
            map: map,
            position: pos,
            zoom:5,
            content: 'You are here !'
        });

    bounds.extend(pos);      // adding the new marker to the bounds.
    map.fitBounds(bounds);   // adjusting the map to cover the bounds.

    }, function() {
           handleNoGeolocation(true);
       });
    } else {
        handleNoGeolocation(false);
    }
});

Here is an updated jsFiddle.

Answer 4

For the browser to request user permission only when the 'Show my position' button is clicked, you can add an onclick event to the button and then check for the navigator.geolocation condition upon clicking.

Here's an example:

<button id="showMe">Show my position</button>

Managing user permission :

document.getElementById("showMe").addEventListener('click', function () {
    if(navigator.geolocation) {
        // If the user grants permission
    } 
});

Now, the browser will only prompt for permission when the button is clicked.

To adjust the map area to fit the new marker, utilize the bounds to incorporate the new marker and then adjust the map like so :
```
bounds.extend(pos);
map.fitBounds(bounds);
```

Therefore, your updated code will resemble this:

document.getElementById("showMe").addEventListener('click', function () {
    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
        var pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);

        marker = new google.maps.InfoWindow ({
            map: map,
            position: pos,
            zoom:5,
            content: 'You are here !'
        });

    bounds.extend(pos);      // adding the new marker to the bounds.
    map.fitBounds(bounds);   // adjusting the map to cover the bounds.

    }, function() {
           handleNoGeolocation(true);
       });
    } else {
        handleNoGeolocation(false);
    }
});

Here is an updated jsFiddle.

Display the user's location on Google Maps in addition to all other markers for a comprehensive view

Answer №1

Answer №2

Similar questions

Mapping choices array in ReactJS using the id as a key reference

Develop fresh JavaScript code using JavaScript

Padding on hover for navigation bar dropdowns

Scrolling a table to the current ng-init date in AngularJs: What’s the best approach?

AngularJS Alert: [$injector:unpr] Provider Not Recognized

Issues have been reported regarding the paramMap item consistently returning null when working with Angular 8 routing

Transferring a Variable from Arduino to JavaScript

jQuery carousel displaying a blank slide at the conclusion

Exploring the Depths of NodeJS X-Ray Web-Scraper: Uncovering Hidden Gems within Sub Pages

I encountered an issue when sending a PATCH request via Hoppscotch where the request body content was returned as 'undefined', although the username and ID were successfully

What could be the reason for angularjs not functioning as expected?

How to Retrieve the Value of <input type=date> Using TypeScript

Determine whether the input fields contain specific text

What is the best way to deactivate all 67 checkboxes once 4 of them have been chosen?

Error encountered: Application module "MyApp" not found

Guide to dynamically setting a value in an input field using JavaScript's document.querySelector

Access the child component within an @ChildComponent directive in Angular

Error: Uncaught promise rejection - The function is undefined in the context of Vue.js and Electron

What is the best way to integrate Bootstrap 5 with Next.js?

"Unlocking the Power of Social Interaction with Vue.js