Hi I am using the following https://github.com/perliedman/leaflet-control-geocoder to get the location on map. But When I get the result I want to have the option to move the marker so I can adjust the coordinates. I found a code that is moving the marker and shows the coordinates in a 2 fields but I have problem to join the two codes together. Also how I get the results coordinates to show in the two flields. I dont have much experience with leaflet maps so any help would be appreciated.
Thank you
Dany
my code:
<html lang="en">
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<link rel="stylesheet" href="assets/css/leaflet-control-geocoder.css" />
</head>
<body>
<div class="map" id="map" style="width: 600px; height: 400px"></div>
<input id="latitude" type="text" name="latitude" />
<input id="longitude" type="text" name="longitude" />
</body>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="assets/js/leaflet-control-geocoder.js"></script>
<script type="text/javascript">
var map = L.map('map').setView([0, 0], 2);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.Control.geocoder().addTo(map);
var marker = L.marker([51.441767, 5.470247],{
draggable: true
}).addTo(map);
marker.on('dragend', function (e) {
document.getElementById('latitude').value = marker.getLatLng().lat;
document.getElementById('longitude').value = marker.getLatLng().lng;
});
</script>
</html>
Simply refer to Leaflet Control Geocoder API.
You can customize what the plugin does with the result it receives from the search request. By default it creates a (fixed) marker, binds a popup and opens it.
In your case, you could do:
var geocoder = L.Control.geocoder().addTo(map),
latInput = document.getElementById('latitude'),
lngInput = document.getElementById('longitude'),
previousMarker;
// Customize what to do from the result.
geocoder.markGeocode = function (result) {
var latlng = result.center;
// Remove previous marker if any.
if (previousMarker) {
map.removeLayer(previousMarker);
}
previousMarker = L.marker(latlng, {
draggable: true // Create a draggable marker.
}).addTo(map).
on('dragend', onDragEnd). // Attach position display.
bindPopup(result.html). // Emulate Geocoder default behaviour.
openPopup(); // bind a popup and open it right away.
displayLatLng(latlng); // Display position right away.
};
function onDragEnd(event) {
var latlng = event.target.getLatLng();
displayLatLng(latlng);
}
function displayLatLng(latlng) {
latInput.value = latlng.lat;
lngInput.value = latlng.lng;
}
Demo: http://jsfiddle.net/ve2huzxw/11/
Related
I tried the following code to place a marker on the included Mapbox-map with a mouse click on the map and write the latitude/longitude values from this marker into the two input-fields below the map:
<html>
<head>
<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
<style>
#addmap {
position: abolute;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id='addmap'></div>
<script>
mapboxgl.accessToken = 'PLACEHOLDER_FOR_MAPBOX_TOKEN';
var map = new mapboxgl.Map({
container: 'addmap',
style: 'mapbox://styles/mapbox/streets-v11'
});
function onClick(event){
document.getElementById('lat').value = event.latlng.lat;
document.getElementById('lng').value = event.latlng.lng;
var group = L.featureGroup();
group.id = 'group';
var p_base = L.circleMarker([event.latlng.lat ,event.latlng.lng], {
color: '#fff',
fillColor: '#6a97cb',
fillOpacity: 1,
weight: 1,
radius: 6
}).addTo(group);
map.addLayer(group);
}
</script>
<input id='lat' name='lat' type='text' />
<input id='lng' name='lng' type='text' />
</div>
</body>
</html>
Unfortunately, neither placing the marker on the map nor writing its coordinates into the input fields work when clicking on the map. Where am I doing it wrong?
Nothing happens when you click on the map because you haven't registered your onClick function as a "click" event listener.
Try the following:
let mapEl = document.getElementById('addmap');
mapEl.addEventListener('click', onClick);
Then, when you click on the map element, it will trigger your onClick event listener.
map.on('click', function(e) {
//marker.setLngLat(e.lngLat);
var lat = e.lngLat.wrap().lat;
var lng = e.lngLat.wrap().lng;
$("input#latbox").val(lat);
$("input#lngbox").val(lng);
});
Hi i try to set the maxbaounds in a leaflet map but it doesn't work. My first questions is maxbounds stop to pan outside the borders that I set? I follow this examples but something is wrong in my code
Leaflet maxBounds - bounds do not work
https://docs.mapbox.com/mapbox.js/example/v1.0.0/maxbounds/
My code
<html>
<head>
<title>A Leaflet map!</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.4.0/dist/leaflet.css" />
<script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full"></script>
<style>
#map{ height: 100% }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/leaflet#1.4.0/dist/leaflet.js"></script>
<script>
var southWest = L.latLng(34.072711,31.758391),
northEast = L.latLng(36.113055, 35.124228),
bounds = L.latLngBounds(southWest, northEast);
var counties = $.ajax({
url: "https://gist.githubusercontent.com/vassilaros/3791204ca226d5b236b4cd3106ef23cf/raw/PicnicSites.geojson",
dataType: "json",
success: console.log("County data successfully loaded."),
error: function(xhr) {
alert(xhr.statusText)
}
})
$.when(counties).done(function() {
var map = L.map('map')
.setView([35.126411,33.429859], 9);
//tiles - http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png
var basemap = L.tileLayer('http://tile1.maps.2gis.com/tiles?x={x}&y={y}&z={z}', {
attribution: '© 2GIS © Open Cartography',
subdomains: 'abcd',
maxBounds: bounds,
maxZoom: 19,
minZoom: 9
}).addTo(map);
// Add requested external GeoJSON to map
var kyCounties = L.geoJSON(counties.responseJSON).addTo(map);
var scale = L.control.scale()
scale.addTo(map)
});
</script>
</body>
</html>
Use maxBounds on the L.map to set the bounds limits.
var map = L.map('map')
.setView([35.126411,33.429859], 9)
.setMaxBounds(bounds);
Plus - don't confuse mapbox.js with leaflet.js - they're different.
(I'm very noob with this. I'm learning on my own, I know my code is messy.)
I am working with Google Maps API, and I want the user to click a button (either Restaurant 1 or Restaurant 2) and then have the map pan to the location of that restaurant, using a marker and a InfoWindow above. Simple, right?
Here's my HTML code so far.
<!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="estilo.css">
<link rel="stylesheet" href="fuente1.css">
<link rel="stylesheet" href="fuente2.css">
<style>
html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}
</style>
<body class="w3-light-grey">
<!-- Page Container -->
<div class="w3-content w3-margin-top" style="max-width:1400px;">
<!-- The Grid -->
<div class="w3-row-padding">
<!-- Left Column -->
<div class="w3-third">
<div class="w3-white w3-text-grey w3-card-4">
<div class="w3-container">
<img><br>Choose a restaurant<p><br>
<button id="button" style="width:110px;height:30px;cursor:pointer;">Restaurant 1</button>
<button id="button2" style="width:110px;height:30px;cursor:pointer;">Restaurant 2</button>
<!-- End Left Column --> </p>
</div>
</div>
</div>
<!-- Right Column -->
<div class="w3-twothird">
<div class="w3-container w3-card w3-white w3-margin-bottom">
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-suitcase fa-fw w3-margin-right w3-xxlarge w3-text-blue"></i>
MAP
</h2><div class="w3-container">
<html>
<body>
<div id="map" style="width:555px;height:500px"></div>
<script>
function myMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(31.825948, -116.599869),
zoom: 16
});
}
function addmarker(lat, lon) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lon),
map: map
});
map.panTo(new google.maps.LatLng(lat, lon));
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBQ3QnkneaUIsXaJHZtYwqdWxX9KCMj4CA&callback=myMap">"></script>
</body>
</html>
<br><br>
</div>
</div>
<!-- End Right Column -->
</div>
<!-- End Grid -->
</div>
<!-- End Page Container -->
</div>
</body>
</html>
</body>
</html>
As you can see I have everything set up. The only thing that doesn't work are the buttons.
I have the following Javascript but I have no idea whatsoever on how to implement it in my HTML.
$('#button').click(function() {
addmarker('-22.3157017', '-49.0660877');
});
$('#button2').click(function() {
addmarker('-23.5936152', '-46.5856465');
});
I'll be happy to hear any lectures for this affair and any help will be greatly appreciated.
For reference, I want it to work pretty much like this one. Place marker on google maps api with html button
I did not use your markup - I've created my own.
Upon checking your javascript, everything seems well, except of these two things: missing jQuery library and the code placement of your button event handlers.
It seems you are trying to add Google Maps Javascript API Markers to these locations "-22.3157017,-49.0660877" and "-23.5936152,-46.5856465" by pressing their corresponding triggers (buttons). I would suggest doing a Reverse Geocoding before adding the markers once an event has been fired.
The term geocoding generally refers to translating a human-readable
address into a location on a map. The process of doing the converse,
translating a location on the map into a human-readable address, is
known as reverse geocoding.
You should also add jQuery as an external library to make their events such as ".click()" to work. You can download it here.
For the buttons, you should add these lines $('#button1').click(function()); and $('#button1').click(function()); inside your myMap() function.
It should look something like this:
function myMap() {
var myLatLng = {lat: 31.825948, lng: -116.599869};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
$('#button1').click(function(){
var coord = { lat: parseFloat('-22.3157017'), lng: parseFloat('-49.0660877') };
addMarker( coord, map );
});
$('#button2').click(function(){
var coord = { lat: parseFloat('-23.5936152'), lng: parseFloat('-46.5856465') };
addMarker( coord, map );
});
}
On your addMarker function, add two arguments that accepts the coordinates, and the map object.
function addMarker(params, map) {);
Inside that function, create a variable geocoder and the value is a new instance of google.maps.Geocoder().
var geocoder = new google.maps.Geocoder();
With that, you can now use geocode method. Geocode method accepts two arguments: location and callback. In the location parameter, you need to supply the coordinates you acquired from the addMarker() function.
geocoder.geocode({'location' : params}, function( results, status ) {});
The callback is the part where most of our logic will be implemented. The callback accepts two arguments: results, and status. The results argument returns an array of results if the status is OK. If so, we will now iterate through each array element and then create a new Google Maps Javascript API Markers. On the markers, we'll just supply the coordinates and maps object for its position and map property.
if (status === 'OK') {
var result = results.map( function( value, index ){
map.setCenter(params);
var newMarker = new google.maps.Marker({
position : params,
map : map,
});
});
} else {
alert('Geo not successful: ' + status);
}
This line 'map.setCenter(params);' sets the position displayed by the map.
Whole code below:
<button id="button1">Restaurant 1</button>
<button id="button2">Restaurant 2</button>
<div id="map"></div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzjs-bUR6iIl8yGLr60p6-zbdFtRpuXTQ&callback=myMap">
</script>
function myMap() {
var myLatLng = {lat: 31.825948, lng: -116.599869};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
$('#button1').click(function(){
var coord = { lat: parseFloat('-22.3157017'), lng: parseFloat('-49.0660877') };
addMarker( coord, map );
});
$('#button2').click(function(){
var coord = { lat: parseFloat('-23.5936152'), lng: parseFloat('-46.5856465') };
addMarker( coord, map );
});
}
function addMarker(params, map) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'location' : params}, function( results, status ) {
if (status === 'OK') {
var result = results.map( function( value, index ){
map.setCenter(params);
var newMarker = new google.maps.Marker({
position : params,
map : map,
animation: google.maps.Animation.DROP,
});
});
} else {
alert('Geo not successful: ' + status);
}
});
}
Hope it could help and happy coding!
I have answered this before on stackoverflow for how to show icons and infowindow and just updated my fiddle to use https instead. Following are very simple steps you need to take care of.
When you click on that fiddle you will see all HTML, JS and CSS I have used to show icons on map, list of people on car and interactivity to click on them to centre on map.
Using gmap3 library I have inlcuded google map on page
Using List elements I have coded location of items at <li data-gb="car" data-mapid="sc102" data-isactive="0" data-lat="53.538566" data-long="-0.327017199999951">Second Car</li> in data attributes for each item. It can be restuarants, parks etc
Important bits in code are in Javascript and these are
Events and Addmarker actions as well as logic to click on list items.
{ action: 'addMarkers',
marker:{
values:ulmarkerspeople,
options:{
draggable: false,
icon:'http://webricate.com/stackoverflow/mapicons/male-2.png'
},
events:{
mouseover: function(marker, event, context){
var listelement = jQuery("li[data-mapid='"+context.data.id+"']");
jQuery(listelement).attr('style','background-color:#ccc');
jQuery(listelement).attr('data-isactive','1');
var map = $(this).gmap3("get"),
infowindow = $(this).gmap3({get:{name:"infowindow"}});
if (infowindow){
infowindow.open(map, marker);
infowindow.setContent(context.data.ht);
jQuery("#customPopup").html(context.data.ht);
jQuery("#customPopup").show(500);
} else {
$(this).gmap3({
infowindow:{
anchor:marker,
options:{content: context.data.ht}
}
});
jQuery("#customPopup").html(context.data.ht);
jQuery("#customPopup").show(500);
}
},
mouseout: function(marker,event,context){
var listelement = jQuery("li[data-mapid='"+context.data.id+"']");
jQuery(listelement).attr('style','background-color:#fff');
jQuery(listelement).attr('data-isactive','0');
var infowindow = $(this).gmap3({get:{name:"infowindow"}});
if (infowindow){
infowindow.close();
jQuery("#customPopup").hide(500);
jQuery("#customPopup").html("");
}
}
}
}
}
Please read through Javascript comments on fiddle and you will get the gist of it.
I am creating a map that consists of three maps and markers total that can be switched between like in this leaflet example, although when I test it, instead of the each map rendering as a single version filling the map frame they display as many multiple in a tile layout. Below is my code I am currently using, note that the images I am using for the maps are not actually maps thus I am using the 'L.CRS.Simple'.
This is the result I was expecting (sans the makers and with my images), maybe someone can spot where I went wrong?
-
<html>
<head>
<title>Interactive Map</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
<style>
#map {
width: 1000px;
height: 1000px;
}
</style>
</head>
<body>
<div id="map">
<script>
var map1 = L.tileLayer('map1.png');
var map2 = L.tileLayer('map2.png');
var map3 = L.tileLayer('map3.png');
var markers = L.layerGroup(); //Leaving empty for the time being, using just to create check box in menu
var map = L.map('map', {
crs: L.CRS.Simple,
layers: [map1, map2, map3, markers],
maxZoom: 5
});
var baseMaps = {
"Map 1": map1,
"Map 2": map2,
"Map 3": map3
};
var overlayMaps = {
"Markers": markers
};
var bounds = [[0,0], [1000,1000]];
L.control.layers(baseMaps, overlayMaps, bounds).addTo(map);
map.fitBounds(bounds);
</script>
</div>
</body>
Yes, I am using locally stored images, no, I do not have images setup to use the standard URL format, if you choose to try my code just sub in 3 random pictures.
Here is a pic of what is occurring:
You forgot a 's' to markers
var overlayMaps = {
"Markers": markers
};
It should work now ;)
I am trying to create a map dialog which allows the user to select his or her desired location.
I have a working example located at http://jsfiddle.net/HCUPa/1/, and the source code is below.
When the infowindow is closed (by clicking the X on the infowindow), how do I remove the associated marker? Do I then need to remove the infowindows name from the array, and if so, how?
Also, when the map (or dialog and then the map) is closed, how do I detect it being closed, and should I be cleaning up any resources, and if so what and how?
I attempted to use addListeners for both as shown in my example, but it isn't working.
Lastly, not really my formal question, but I would appreciate any advise whether I am generally doing this correct. This was my first attempt of the Google map api, and I am still a JavaScript novice, and would appreciate any suggestions, criticize, etc.
Thank you
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
#googleMap { height: 100%;width: 100%;}
div.modify-title-bar div.ui-dialog-titlebar {border:0;background-image:none;background-color:transparent;padding:0;margin:0;}
#dialog-map,div.modify-title-bar {padding:0;margin:0;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link type="text/css" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>
<script type="text/javascript">
function createMap(geocoder,myCenter,address) {
var map = new google.maps.Map(document.getElementById("googleMap"),{center:myCenter,zoom:5,mapTypeId:google.maps.MapTypeId.ROADMAP});
var marker = new google.maps.Marker({position: myCenter,map: map,});
var infowindow = new google.maps.InfoWindow({content: '<span>'+address+'</span><br><button class="accept">Select Address</button>'});
infowindow.open(map,marker);
google.maps.event.addListener(map, 'close', function(event) {
//How do I detect map closing, what and how should I clean up? Maybe move to dialog close?
alert('close map');
delete geocoder,myCenter,address,map,marker,infowindow;
});
google.maps.event.addListener(map, 'click', function(event) {
marker.setMap(null);
marker = new google.maps.Marker({
position: event.latLng,
map: map,
});
geocoder.geocode({location: event.latLng}, function(GeocoderResult, GeocoderStatus) {
infowindow.close();
infowindow = new google.maps.InfoWindow({content: '<span>'+GeocoderResult[0].formatted_address+'</span><br><button class="accept">Select Address</button>'});
infowindow.open(map,marker);
});
google.maps.event.addListener(infowindow,'closeclick',function(){
//How do I detect if infowindow is closed? Do I then need to remove the infowindows name from the array, and if so, how?
alert('Remove marker');
marker.setMap(null);
});
});
}
$(function(){
$("#googleMap").on("click", "button.accept", function(){
$('#address').val($(this).parent().children('span').eq(0).text());
$("#dialog-map").dialog('close');
});
$("#findIt").click(function(){$("#dialog-map").dialog("open");return false;});
$("#dialog-map").dialog({
autoOpen : false,
resizable : false,
height : 500,
width : 800,
modal : true,
dialogClass : 'modify-title-bar',
open : function() {
var address=$.trim($('#address').val()),
geocoder=new google.maps.Geocoder,
LatLng,
//Default LatLng
Ya=47.6204901, Za=-122.34964839999998,
//Give default address to limit geocoder calls
default_address='400 Broad Street, Seattle, WA 98109, USA';
if(address) {
geocoder.geocode({address: address}, function(GeocoderResult, GeocoderStatus) {
if (GeocoderStatus=='OK') {
LatLng=GeocoderResult[0].geometry.location;
}
else {
LatLng=new google.maps.LatLng(Ya,Za);
adderss=default_address;
}
createMap(geocoder,LatLng,address);
});
}
else {
LatLng=new google.maps.LatLng(Ya,Za);
createMap(geocoder,LatLng,default_address);
}
}
});
});
</script>
</head>
<body>
<button id="findIt">Find it on a map</button>
<input id="address" type="text" value="1600 Pennsylvania Avenue Northwest Washington, DC">
<div id="dialog-map" title="Select a location">
<div id="googleMap"></div>
</div>
</body>
</html>
Create a new function that listens for the infowindow close event
function infowindowClose(infowindow, marker) {
google.maps.event.addListenerOnce(infowindow, 'closeclick', function() {
marker.setMap(null);
});
}
Call that everytime you create a new infowindow.
Working Demo
You are doing well for your first time using the API. If you want more than one marker and infobox then you will need to make a few changes, otherwise it's fine.