comment ajouter mon bouton de localisation à google map

-1

Je voudrais ajouter mon bouton de localisation à ma carte comme le fait la vraie carte google. J'ai essayé quelques plugins mais ils n'ont pas eu de bouton de localisation, que dois-je faire? ici est un plug-in que je l'ai utilisé:comment ajouter mon bouton de localisation à google map

var mapOptions = { 
 
    zoom: 17, 
 
    center: new google.maps.LatLng(-34.397, 150.644), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
}; 
 
var map = new google.maps.Map(document.getElementById('map_canvas'), 
 
    mapOptions); 
 
var GeoMarker = new GeolocationMarker(map);

Source

2017-10-07 Ali Faridnia

Voulez-vous dire la mettre en place un marqueur sur un emplacement sur les cartes ?, si oui, lisez cette documentation: https://developers.google .com/maps/documentation/javascript/examples/marker-simple –

je veux dire juste comme google map sur les téléphones, ajouter un bouton et quand cliquez le sauter à ma position –

Pour les navigateurs Web que vous pouvez utiliser le html5 construit dans la géolocalisation pour obtenir votre emplacement: Vous pouvez suivre cette doc: https://developers.google.com/maps/documentation/javascript/examples/map-geolocation

Mais d'abord définir un emplacement par défaut dans le cas où le navigateur ne prend pas en charge la géolocalisation

var myLocation = {lat: -34.397, lng: 150.644};

Après cela dans votre fonction init vous pouvez obtenir votre emplacement comme celui-ci:

if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 

     myLocation.lat = position.coords.latitude; 
     myLocation.lng = position.coords.longitude; 
     map.setCenter(myLocation); 

     }, function() { 
     handleLocationError(true, map.getCenter()); 
    }); 
} else { 
    // Browser doesn't support Geolocation 
    handleLocationError(false, map.getCenter()); 
}

comme centre par défaut de la carte

map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 17, 
    center: myLocation, 
    mapTypeId: 'roadmap' 
});

Ensuite, il suffit d'appeler les coordonnées de votre emplacement cette fonction si vous voulez revenir en arrière à votre emplacement

function goToMyLocation() { 
    map.setCenter(myLocation); 
}

Cochez cette exemple de travail: https://jsbin.com/ricebu/edit?html,css,js,output

Voici l'extrait de code ainsi

var map; 
 
var btnLocation = document.getElementById("btn-location"); 
 
var myLocation = { 
 
    lat: -34.397, 
 
    lng: 150.644 
 
}; 
 

 
function initMap() { 
 

 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 17, 
 
    center: myLocation, 
 
    mapTypeId: 'roadmap' 
 
    }); 
 

 
    if (navigator.geolocation) { 
 
    navigator.geolocation.getCurrentPosition(function(position) { 
 

 
     myLocation.lat = position.coords.latitude; 
 
     myLocation.lng = position.coords.longitude; 
 

 
     // I just added a marker for you to verify your location 
 
     var marker = new google.maps.Marker({ 
 
     position: myLocation, 
 
     map: map 
 
     }); 
 

 
     map.setCenter(myLocation); 
 
    }, function() { 
 
     handleLocationError(true, map.getCenter()); 
 
    }); 
 
    } else { 
 
    // Browser doesn't support Geolocation 
 
    handleLocationError(false, map.getCenter()); 
 
    } 
 
} 
 

 
function handleLocationError(browserHasGeolocation, infoWindow, pos) { 
 
    console.log(browserHasGeolocation ? 
 
    'Error: The Geolocation service failed.' : 
 
    'Error: Your browser doesn\'t support geolocation.'); 
 
} 
 

 

 
btnLocation.addEventListener('click', function() { 
 
    goToMyLocation(); 
 
}); 
 

 
function goToMyLocation() { 
 
    map.setCenter(myLocation); 
 
}

#map { 
 
    height: 100%; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#btn-location { 
 
    position: absolute; 
 
    right: 20px; 
 
    top: 20px; 
 
    z-index: 1; 
 
    padding: 20px; 
 
    border: none; 
 
    border-radius: 4px; 
 
    background-color: rgba(255, 255, 255, 0.8); 
 
    transition: 0.5s; 
 
} 
 

 
#btn-location:hover { 
 
    background-color: rgba(0, 0, 0, 1); 
 
    color: white; 
 
    cursor: pointer; 
 
}

<html> 
 

 
<head> 
 
    <title>Location</title> 
 
</head> 
 

 
<body> 
 
    <button id="btn-location">Go to my Location</button> 
 
    <div id="map"></div> 
 
    <!-- Replace the value of the key parameter with your own API key. --> 
 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKQX3cyZ7pVKmBwE8wiowivW9qH62AVk8&callback=initMap"></script> 
 
</body> 
 

 
</html>

Source

2017-10-10 06:43:58

comment ajouter mon bouton de localisation à google map

Répondre

Questions connexes