i want to add marker, when i click on map.
but i dont know how to do it:(
by default I do not want to have a marker map
i just wrote this code:
var mapOptions = {
center: [17.385044, 78.486671],
zoom: 10
}
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
var map = new L.map('mapid', mapOptions);
map.addLayer(layer);
var markerOptions = {
title: "MyLocation",
clickable: true,
draggable: true
}
function onClick(e) {
alert(this.getLatLng());
}
var marker = L.marker([17.385044, 78.486671], markerOptions).on('click',onClick);
marker.addTo(map);
map.on("click", function(e){
var mp = new L.Marker([e.latlng.lat, e.latlng.lng]).addTo(map);
alert(mp.getLatLng());
});
If you are looking to set only one marker on the map, note that you must delete the previous one.
var marker;
map.on('click', function (e) {
if (marker) { // check
map.removeLayer(marker); // remove old layers
}
marker = new L.Marker(e.latlng).addTo(map); // set New Layer
});
Related
I have the following link:
choose on map
showMap accepts geocoding coordinates and shows marker at this place.
function showMap(lat,lng) {
window.open('map?lat='+lat+'&lng='+lng, 'map', 'width=600,height=400');
}
on map.jsp i have following js:
function initialize() {
var myLatlng = new google.maps.LatLng("${lat}","${lng}");
var mapOptions = {
zoom: 12,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
marker.setMap(null);
marker = new google.maps.Marker({
position: location,
map: map
});
}
}
I want to achieve that after I have changed marker position on map this change should affect showMap arguments
showMap(changedMarkerLat, changedMarkerLng)
Possible approach: instead of passing lat/lng as parameters to the function(as suggested by #esc), store these data somewhere and access them inside the function.
Example:(stores the lat/lng as attributes of the link)
<a href="#" id="context-map"
data-lat="57.8166994"
data-lng="28.33447339999998"
onclick="showMap(this)">choose on map</a>
function showMap(o) {
//you only need to open a new window when its not open yet
if(!o.map ||o.map.closed){
o.map = window.open('map?lat='+o.getAttribute('data-lat')+
'&lng='+o.getAttribute('data-lng'),
'map',
'width=600,height=400');
}
//otherwise only bring the window into front
else{
o.map.focus();
}
}
Inside the new window set the data-lat and data-lng-attributes of the link
function initialize() {
var myLatlng = new google.maps.LatLng("${lat}","${lng}");
var mapOptions = {
zoom: 12,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
try{//use a try-catch to avoid errors when the opener has been closed
var link=opener.document.getElementById('context-map');
link.setAttribute('data-lat',location.lat());
link.setAttribute('data-lng',location.lng());
}catch(e){}
//there's no need to create a new Marker,
//simply update the position of the existing Marker
marker.setPosition(location);
}
}
Demo: http://www.googledrive.com/host/0BwPgjOA-i5WyQ0VmR3JZTU9BS0U
Need a quick help with setting up the content for each marker that I'm creating
I'm looping through my Locations Obj that holds Lat,Lng for each marker (locationObj),
the content for each marker is been hold by other obejct (PermutationObj).
example:
locationObj-- > {"Lat":"34.163291","Lng":"-118.685123"} etc....
PermutationObj -- > ElectronicPopContent,LocationName
The thing is I'm getting for all the markers that I'm displaying on the map the first content and location name from the PermutationObj.
How can I fix it???
JS Code:
var locationObj;
var PermutationObj;
var map;
var mapOptions;
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18, 1],
type: 'poly'
};
function setMap(locationList, permutation) {
// List of Lat,Lng
locationObj = $.parseJSON(locationList);
PermutationObj = $.parseJSON(permutation);
var qMapTypeId = google.maps.MapTypeId.SATELLITE
var LatLngCenter = new google.maps.LatLng(34.163291, -118.685123);
var mapOptions = {
zoom: 4,
center: LatLngCenter,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var bounds = new google.maps.LatLngBounds();
for (i in locationObj) {
var LatLngPair = new google.maps.LatLng(locationObj[i]["Lat"], locationObj[i]["Lng"]);
bounds.extend(LatLngPair);
map.fitBounds(bounds);
// for (j in PermutationObj) {
// // var image = PropObj[j]["ElectroincImageURL"];
// var content = PermutationObj[j]["ElectronicPopContent"];
// break
// }
var content = PermutationObj[i]["ElectronicPopContent"];
marker = new google.maps.Marker({
position: LatLngPair,
map: map,
draggable: false,
// icon: image,
shape: shape,
anchorPoint: new google.maps.Point(12, -25)
});
//Setting up the content of the info window dynamic wise.
var infowindow = new google.maps.InfoWindow({
content: content
});
//Setting up an event listener, When the user clicks the marker, an info window opens.
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(content);
infowindow.open(map, marker);
});
}
}
Changed a few things, the first is having only one instance of the InfoWindow, the other is storing the content as a marker property and use it on the click, the last is having an instance per marker by using var marker = ... instead of marker = ... Let me know if this works for you.
var locationObj;
var PermutationObj;
var map;
var mapOptions;
var infowindow = new google.maps.InfoWindow({ });
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18, 1],
type: 'poly'
};
function setMap(locationList, permutation) {
// List of Lat,Lng
locationObj = $.parseJSON(locationList);
PermutationObj = $.parseJSON(permutation);
var qMapTypeId = google.maps.MapTypeId.SATELLITE
var LatLngCenter = new google.maps.LatLng(34.163291, -118.685123);
var mapOptions = {
zoom: 4,
center: LatLngCenter,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var bounds = new google.maps.LatLngBounds();
for (i in locationObj) {
var LatLngPair = new google.maps.LatLng(locationObj[i]["Lat"], locationObj[i]["Lng"]);
//Are you sure you need these 2 lines here?
bounds.extend(LatLngPair);
map.fitBounds(bounds);
var marker = new google.maps.Marker({
position: LatLngPair,
map: map,
draggable: false,
shape: shape,
anchorPoint: new google.maps.Point(12, -25),
infoWindowContent: PermutationObj[i]["ElectronicPopContent"]
});
//Setting up an event listener, When the user clicks the marker, an info window opens.
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(marker.infoWindowContent);
infowindow.open(map, marker);
});
}
}
I have the following code that works as intended except the google.maps.event.addListener(marker, 'click', function(). I am including all the code for reference. You will see the commented out code that I have tried. I want the map to zoom in when the marker is clicked. Thank you for your help.
$(document).ready(function() {
$("#map").css({
height: 700,
width: 800
});
var myLatLng = new google.maps.LatLng(46.053791, -118.3131256);
MYMAP.init('#map', myLatLng, 11);
$("#showmarkers").ready(function(e){
MYMAP.placeMarkers('markers.xml');
});
});
var MYMAP = {
map: null,
bounds: null
}
MYMAP.init = function(selector, latLng, zoom) {
var myOptions = {
zoom:zoom,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map($(selector)[0], myOptions);
this.bounds = new google.maps.LatLngBounds();
}
MYMAP.placeMarkers = function(filename) {
$.get(filename, function(xml){
$(xml).find("marker").each(function(){
var name = $(this).find('name').text();
var address = $(this).find('address').text();
// create a new LatLng point for the marker
var lat = $(this).find('lat').text();
var lng = $(this).find('lng').text();
var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
// extend the bounds to include the new point
MYMAP.bounds.extend(point);
var marker = new google.maps.Marker({
position: point,
map: MYMAP.map
});
var infoWindow = new google.maps.InfoWindow();
var html='<strong>'+name+'</strong.><br />'+address;
google.maps.event.addListener(marker, 'mouseover', function() {
infoWindow.setContent(html);
infoWindow.open(MYMAP.map, marker);
});
<!-- *************** here is the code I need help with **************** -->
google.maps.event.addListener(marker, 'click', function() {
<!-- attempt 1 -->
<!--map.setZoom(10); -->
<!--map.setCenter(marker.getPosition());-->
<!--attempt 2 -->
<!--mapZoom = map.getZoom();-->
<!--startLocation = event.point; -->:
<!--attempt 3 (with and without MYMAP-->
<!--MYMAP.map.setZoom(10); -->
<!--MYMAP.map.panTo(marker.position); -->
});
google.maps.event.addListener(marker,'mouseout', function() {
infoWindow.close();
});
MYMAP.map.fitBounds(MYMAP.bounds);
});
});
}
I think the best way is to get the current zoom, increment it, and set the zoom to the new value, like this :
google.maps.event.addListener(marker, 'click', function() {
MYMAP.map.setZoom(MYMAP.map.getZoom()+1);
});
http://jsfiddle.net/OxyDesign/w26fL6f7/
Is it what you wanted ?
We using multiple marker with infowindow. Everything is working fine.
The issue is when we click marker, the infowindow opens but it doesn't close when click other markers. it stay opened. so can give solutions for this issue.
The code is in http://goo.gl/s0WZx
var berlin = new google.maps.LatLng(52.520816, 13.410186);
var neighborhoods = [
new google.maps.LatLng(52.511467, 13.447179),
new google.maps.LatLng(52.549061, 13.422975),
new google.maps.LatLng(52.497622, 13.396110),
new google.maps.LatLng(52.517683, 13.394393)
];
var markers = [];
var iterator = 0;
var map;
function initialize() {
var mapOptions = {
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: berlin
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
function drop() {
for (var i = 0; i < neighborhoods.length; i++) {
setTimeout(function() {
addMarker();
}, i * 200);
}
}
function addMarker() {
var marker = new google.maps.Marker({
position: neighborhoods[iterator],
map: map,
draggable: false
});
markers.push(marker);
var contentString = $("#pop"+iterator).html();
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 300,
maxHeight: 500
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
iterator++;
}
You are creating as much infowindows, as there are markers. In your case,I think one infowindow is enough. So for working with only one infowindow, you could implement this on global scope:
//Using lazy initialization.
//InfoWindow will be created only after the first call
var getInfoWindow = (function(){
var _instance = null;
return function(){
if(_instance == null){
_instance = new google.maps.InfoWindow({
maxWidth: 300,
maxHeight: 500
});
}
return _instance;
};
})();
Also you need to store the contentString for every marker which must be shown on click event. So the final modification of addMarker method will be something like this:
function addMarker() {
var marker = new google.maps.Marker({
position: neighborhoods[iterator],
map: map,
draggable: false
});
markers.push(marker);
//Storing content html
marker.contentString = $("#pop"+iterator).html();
google.maps.event.addListener(marker, 'click', function() {
//Setting content of InfoWindow
getInfoWindow().setContent( marker.contentString );
//Opening
getInfoWindow().open(map,marker);
});
iterator++;
}
Put the var infowindow outside of the addMarker function. Like this:
var infowindow = new google.maps.InfoWindow();
Then inside your addMarker function use
infowindow.setContent(contentString);
This way the infowindow is only created once. Clicking on the different markers just moves the window and sets the content.
I am making a google maps application in which i allow a user to place only one marker on the map by clicking on the map. Everytime the user click again on the map, the old marker is deleted and the marker is placed on the new click location. I have a hidden input field and i want the its value to change each time the marker changes position. This value should be the coordinates of the new marker location. The code i have written for this is as follows,
var map;
var marker;
var coords;
function initialize() {
var latlng = new google.maps.LatLng(19.074448,72.872314);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
};
function placeMarker(location) {
if (marker) {
marker.setMap(null);
marker = null;
placeMarker(location);
}
else {
marker = new google.maps.Marker({
position: location,
map: map
});
document.getElementById("id_lat").value = marker.getPosition().toUrlValue()
}
};
Specifically, i am using this line to change the value,
document.getElementById("id_lat").value = marker.getPosition().toUrlValue()
where the id of the relevant hidden field is "id_lat"
This doesn't seem to work though. What am i doing wrong and how do i fix it ? I am new to javascript.
I think you forgot to add your one marker at initialize() function. Other than that your code seems to work fine.
var map;
var marker;
var coords;
function initialize() {
var latlng = new google.maps.LatLng(19.074448,72.872314);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
// add a marker on map
placeMarker(latlng);
};
function placeMarker(location) {
if (marker) {
marker.setMap(null);
marker = null;
placeMarker(location);
} else {
marker = new google.maps.Marker({
position: location,
map: map
});
document.getElementById("id_lat").value = marker.getPosition().toUrlValue();
// worked for me for <input type="text" value="Submit" id="id_lat" style="display:none"/> element
alert(document.getElementById("id_lat").value);
}
};