Develop Reference

how to add marker on click event in leaflet.js

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
});

How to optimize loading multiple Google API maps on one page

I am bringing in 100 maps to post on the same page, with some markers on each page, and average of 5 markers per map. However when loading the page it takes close to a minute before the google maps load. Here is the code that I have now, I am just not sure of how to get the maps to loader quicker.
window.onload = function () {
initialize();
}
var coords = [
{lat: 40.88589, lng: -73.892110, zoom: 10}
];
var maps = [];
var markers = [
MARKER DATA IN HERE
];
var counter=100;
function initialize() {
for(var i = 0, length = counter; i < length; i++)
{
var point = coords;
var latlng = new google.maps.LatLng(point.lat, point.lng);
maps[i] = new google.maps.Map(document.getElementById('map-canvas' + (i + 1)), {
zoom: point.zoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow();
for (var j = 0; j < markers.length; j++) {
var data = markers[j];
if(data.Rank==(i+1)){
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: maps[i],
title: data.officer
});
//Attach click event to the marker.
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
//Wrap the content inside an HTML DIV in order to set height and width of InfoWindow.
infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + data.officer + "</div>");
infoWindow.open(maps[i], marker);
});
})(marker, data);
}
}
}
}

If initializing ~100 JavaScript maps is too inefficient / slow, I would try starting with the Static Maps API [1] and loading static images which show the markers but aren't dynamic to give the appearance of your page loading quickly.
Asynchronously, perhaps when you detect the user is getting ready to interact with one of these maps, you could replace the static map with a dynamic JavaScript map.
You could even get more clever and only load the maps which are visible to the user. If you only see the top 20 maps at a time and the user has to scroll to see the rest, perhaps it only makes sense to load the first ~40 maps so there's content when the user scrolls but you don't waste your time loading 100 maps right off the bat.
[1] https://developers.google.com/maps/documentation/static-maps/intro

Google Maps Not Centering and Zooming On Markers

All of my markers are coming from an AJAX call and are accurately placed on the map. However, the initial view is fully zoomed out, along the equator, in North America.
I know the solution lays somewhere with bounds.extend and map.fitBounds but apparently I'm doing it wrong.
I've always had an issue with this, so hopefully someone can help elevate this thorn in my side:
var map;
var markers = [];
var home_marker;
function initialize() {
// Display a map on the page
if ( document.contains(document.getElementById("map_canvas")) ) {
bounds = new google.maps.LatLngBounds();
map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 12,
center: new google.maps.LatLng(48.4222, -123.3657)
});
// a new Info Window is created
infoWindow = new google.maps.InfoWindow();
// Event that closes the InfoWindow with a click on the map
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});
// Add Home Marker
home_marker = new google.maps.Marker({
position: new google.maps.LatLng(user_address_lat, user_address_lng),
map: map,
icon: '/images/map-icon-your-home.png'
});
}
}
function displayMarkers( properties ) {
// this variable sets the map bounds and zoom level according to markers position
var bounds = new google.maps.LatLngBounds();
// For loop that runs through the info on markersData making it possible to createMarker function to create the markers
for (var i = 0; i < properties.length; i++){
var latlng = new google.maps.LatLng(properties[i]['latitude'], properties[i]['longitude']);
var price_current = properties[i]['price_current'];
var bedrooms = properties[i]['bedrooms'];
var total_baths = properties[i]['total_baths'];
var listing_id = properties[i]['listing_id'];
createMarker( latlng, price_current, bedrooms, total_baths, matrix_unique_ID );
// Marker’s Lat. and Lng. values are added to bounds variable
bounds.extend(latlng);
}
// Finally the bounds variable is used to set the map bounds
// with API’s fitBounds() function
map.fitBounds(bounds);
}
function createMarker( latlng, price, bedrooms, bathrooms, matrix_id ) {
var formatted_price = accounting.formatMoney(price, '$', 0);
var marker = new google.maps.Marker({
map: map,
position: latlng,
icon: '/images/map-icon.png'
});
google.maps.event.addListener(marker, 'click', function() {
// Variable to define the HTML content to be inserted in the infowindow
var iwContent = '<div class="row"><div class="small-12 columns"><img src="http://www.mywebsite.com/properties/'+listing_id+'/image-'+matrix_id+'-1.jpg"></div></div>' +
'<div class="row"><div class="small-12 columns"><p class="price-current text-center">'+formatted_price+'</p></div></div><hr>' +
'<div class="row"><div class="small-6 columns"><p class="bedrooms"><span class="fw-semi-bold">Beds:</span> '+bedrooms+'</p></div>' +
'<div class="small-6 columns"><p class="total-baths"><span class="fw-semi-bold">Baths:</span> '+bathrooms+'</p></div></div>';
// including content to the infowindow
infoWindow.setContent(iwContent);
// opening the infowindow in the current map and at the current marker location
infoWindow.open(map, marker);
});
}
// Sets the map on all markers in the array.
function setMapOnAll(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setMapOnAll(null);
}
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
clearMarkers();
markers = [];
}

Make a new Part to your script or make a new one, and code it specificly to change zoom in camera ammount and, add ui button for it.

update only markers in Google Maps

When Google Map load, it cost several seconds to load all submaps, each time i want to change a marker i need to load all map again and again, it is possible to load map once and update markers dynamic?
function initialize(markers) {
console.log(markers);
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(40.4378271,-3.6795367)
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var j=0;
for (var i=0;i<((markers.length)-3);i=i+3){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i],markers[i+1]),
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='+j+'|FE6256|000000',
title: markers[i+2]
});
j++;
}
}
google.maps.event.addDomListener(window, 'load', initialize(markers()));

You must store the Map-instance somewhere where it's accessible inside initialize, then you'll be able to re-use the Map on further calls and must only remove previous markers and draw the new markers.
Sample(stores the Map as property of the map-div):
function initialize(markers) {
var node = document.getElementById('map-canvas'),
j = 0,
marker;
//create a single Map-instance and store it as property of the map-container
if (!node.map) {
//create a MVCObject, used for binding of the markers map-property
node.mvc = new google.maps.MVCObject();
//the map
node.map = new google.maps.Map(node, {
zoom: 2,
center: new google.maps.LatLng(40.4378271, -3.6795367)
});
}
//this will remove previous markers
node.mvc.set('map', null);
node.mvc.set('map', node.map);
for (var i = 0; i < ((markers.length) - 3); i = i + 3) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i], markers[i + 1]),
map: node.map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' +
j + '|FE6256|000000',
title: markers[i + 2]
});
//bind the markers map-property
marker.bindTo('map', node.mvc, 'map', true);
google.maps.event.addListener(marker, 'map_changed', function () {
//remove the binding when map has been set to null
if (!this.getMap()) {
this.unbind('map');
}
});
j++;
}
}
Demo: http://jsfiddle.net/doktormolle/ns7j3sx0/

Multiple markers with infowindow

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.