my code:
(i used ArcGIS for the map code https://developers.arcgis.com/javascript/3/jssamples/widget_locate.html )
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>OpenStreetMap</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.35/esri/css/esri.css">
<style>
html, body, #esri-map-container {
padding: 0px;
margin: 0px;
height: 100%;
width: 800px;
height: 500px;
}
#LocateButton {
position: absolute;
top: 95px;
left: 20px;
z-index: 50;
}
</style>
<script src="https://js.arcgis.com/3.35/"></script>
<script>
var map;
require([
"esri/map",
"esri/dijit/LocateButton",
"dojo/domReady!"
], function(Map, LocateButton)
{
map = new Map("map", {
center: [-56.049, 38.485],
zoom: 3,
basemap: "streets"
});
geoLocate = new LocateButton({
map: map
}, "LocateButton");
geoLocate.startup();
geoLocate.on('locate', (data) => {
console.log(data);
});
});
</script>
</head>
<body>
<div id="map" class="map">
<div id="LocateButton"></div>
</body>
</html>
So i get coordinates with:
geoLocate.on('locate', (data) => {
console.log(data);
});
and then i want to convert them into an address.
with the address i want to give them information about the city they live in.
since i want to get an address on my specific country (Israel)
which is not big, the idea is maybe to write a table with longitude and latitude and the main citys
and when some user use his locate button, i will find which from the table is the closest to him, and then return the data i already written in a table or something like this
so my question is:
is there a way to convert my long and latitude to the address with what i have written? or maybe is it better for me to do the second idea with prewritten data.
i don't know how to do those, so i would like to get some directions on where to start or how to look for it.
thanks.
In your second method, you have to use rectangular boundaries of all cities, you can search for it.
but if you want direct from long lat to location.
use google map cloud APIs, visit their website to learn more.
Related
I'm using MapBox on my application and i would like to know how can i display lat and lng inside div element after i select an address from a list that are display inside a div? My reference is this MapBox page https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder-no-map/, but i didn't find a correct way to do that using javascript.
To explain more clearly my doubt, below are the code that i'm using on my application and i would like to display lat and lng inside "latitude" and "longitude" div's as below if is possible:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Use the geocoder without a map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js"></script>
<link
rel="stylesheet"
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css"
type="text/css"
/>
<!-- Promise polyfill script required to use Mapbox GL Geocoder in IE 11 -->
<script src="https://cdn.jsdelivr.net/npm/es6-promise#4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise#4/dist/es6-promise.auto.min.js"></script>
<style>
#geocoder {
z-index: 1;
width: 100%;
text-align: center;
top: 20px;
}
.mapboxgl-ctrl-geocoder {
min-width: 100%;
}
</style>
<div id="geocoder"></div>
//How to display latitude and longitude inside div element below after select a value inside geocoder div above?
<div id="latitude">
<div id="longitude">
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiM3dzdG9yZSIsImEiOiJja2RoaWVlaGwyc2VxMnlwbWVrd2F2bmVoIn0.YNjkfQ-709GuxaE4vOjsxg';
var geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
types: 'country,region,place,postcode,locality,neighborhood'
});
geocoder.addTo('#geocoder');
</script>
</body>
</html>
In this case, how can i improve the code above to display latitude and longitude informations inside a div after select a value inside geocoder div?
If I'm understanding you well, what you want is basically capture the result selected in the geocoder and paint the coordinates of the result in a div. For that, you need to subscribe to the result event.
For that, you need to add the event listener like this, and there paint the result in the inner HTML of the div:
geocoder.on('result', function(r) {
console.log(r);
document.getElementById("coords").innerHTML = r.result.center;
})
I have created a fiddle on how to subscribe to result selected on geocoder
PS: If this answer solves your question, please mark it as answer accepted, in that way it will help other users to know is the right solution.
I'm using Mapbox to integrate in a javascript/php project. So far so good. Works great. Looking around their api I was wondering whether it was possible to have a mix between mapbox-gl-directions and mapbox-directions api. They don't seem to be the same thing.I really like the example from mapbox-gl-directions which gives the user options to select between driving, cycling and walking. But I already have coordinates for the origin point and coordinates for the destination point. I don't necessarily need the user to input those coordinates but I would also like to leave the user the option to enter alternative coordinates if he wanted to. How can I add starting and destination points to the mapbox-gl-directions just like the mapbox-directions-api? I've looked everywhere in their docs.
mapbox-gl-directions :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display driving directions</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; };
</style>
</head>
<body>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.2/mapbox-gl-directions.js"></script>
<link
rel="stylesheet"
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.2/mapbox-gl-directions.css"
type="text/css"
/>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoid2ViYjI0aCIsImEiOiJjazU3a2lkbW4wNGJrM2RvNnNrNnBzbGlxIn0.GGnF34IsMQyqKNoam241tA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-79.4512, 43.6568],
zoom: 13
});
map.addControl(
new MapboxDirections({
accessToken: mapboxgl.accessToken
}),
'top-left'
);
</script>
</body>
</html>
Turn
map.addControl(
new MapboxDirections({
accessToken: mapboxgl.accessToken
}),
'top-left'
);
into
var directions = new MapboxDirections({
accessToken: mapboxgl.accessToken
});
map.addControl(directions,'top-left');
map.on('load', function() {
directions.setOrigin([12, 23]); // can be address in form setOrigin("12, Elm Street, NY")
directions.setDestinaion([11, 22]); // can be address
})
everyone, I have uploaded my google map KML file to my website then I have used google map javascript API key. if you notice once you run the map you will see all my markers in white( transparent ) is there a way to have my map exactly the same way like I had it before saving. the code below, Thank you in advance:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<title>KML Layers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: new google.maps.LatLng(35.5715, -97.66704),
});
var ctaLayer = new google.maps.KmlLayer({
url: 'https://rogerslimos.com/KML.kml',
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
I'm dabbling a bit with google maps and data presentation and was wondering if it is possible to create a button on the map page to drop the markers.
I have no programming experience (I deal with SQL mainly) so any help appreciated - I have the following code taken from varying webistes:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
// Standard google maps function
function initialize() {
var myLatlng = new google.maps.LatLng(52.469397,-3.208008);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
TestMarker();
}
// Function for adding a marker to the page.
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map,
animation: google.maps.Animation.DROP
});
}
// Testing the addMarker function
function TestMarker() {
Marker1=new google.maps.LatLng(52.268000,-3.043000); addMarker(Marker1);
Marker23=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker23);
Marker24=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker24);
Marker25=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker25);
Marker26=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker26);
Marker584=new google.maps.LatLng(51.747777,-3.500599); addMarker(Marker584);
Marker585=new google.maps.LatLng(51.608871,-3.647570); addMarker(Marker585);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="border: 1px solid black; width: 500px; height: 400px;">map div</div>
<p style="margin-top: 5px">
<button id="drop">Drop</button>
</p>
</body>
</html>
Now this creates a button, but I can't for the life of me work out how to link this back to my markers. I have found something here that I should be able to adapt but I just don't have the knowhow.
My markers are defined by a sql query, but for now I would like to be able to simply feed in a list and get a drop button to drop them when I click on it.
Any help massively appreciated :)
Remove the call to TestMarker from your initialize function. Then just add an onclick attribute to your button:
<button id="drop" onclick="TestMarker()">Drop</button>
How can I use Google Maps API to show me a full screen map with no sidebars or search bar? I just need it to show a specific location in a mobile app, users don't need to search. Is this possible?
Also if I provide a street address how can it put a push-pin at the location?
Assuming you are planning to use the v3 API, you may want to check the following section of the documentation:
Developing for Mobile Devices (iPhone and Android device)
As for your second question, you can use Geocoding. Consider the following simple example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Geocoding Demo</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map { height: 100% }
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var address = 'Oxford Street, London, UK';
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.TERRAIN,
zoom: 12
});
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': address
},
function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
new google.maps.Marker({
position: results[0].geometry.location,
map: map
});
map.setCenter(results[0].geometry.location);
}
else {
// Google couldn't geocode this request. Handle appropriately.
}
});
</script>
</body>
</html>
Screenshot: