<!DOCTYPE html>
<html>
<head>
<title>Show Location with OpenLayers</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.13.1/css/ol.css" type="text/css">
<style>
.map {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.13.1/build/ol.js"></script>
<script>
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
// Define the shop location
var shopLatitude = <?php echo $_GET['shop_lat']; ?>; // Replace with your PHP variable for shop latitude
var shopLongitude = <?php echo $_GET['shop_lng']; ?>; // Replace with your PHP variable for shop longitude
var shopMarker = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([shopLongitude, shopLatitude]))
});
var shopSource = new ol.source.Vector({
features: [shopMarker]
});
var shopLayer = new ol.layer.Vector({
source: shopSource
});
map.addLayer(shopLayer);
// Try to access the user's location
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(function (position) {
var userLatitude = position.coords.latitude;
var userLongitude = position.coords.longitude;
var userMarker = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([userLongitude, userLatitude]))
});
var userSource = new ol.source.Vector({
features: [userMarker]
});
var userLayer = new ol.layer.Vector({
source: userSource
});
map.addLayer(userLayer);
}, function (error) {
alert("Error getting geolocation: " + error.message);
});
}
</script>
</body>
</html>
Here many types of latest technology news, many useful (tools, software, apps, website, technical problem solution )If you have any query regrading Site, Advertisement and any other issue, please feel free to contact me