We Keep Coding

Leaflet - toggling GeoJSON layers without plug-ins

I know how to add a layer with markers, which I can toggle on/off and how to add GeoJSON layer to my map.
But I can't mix these functions.
I need to create a toggling layer from GeoJSON (polyline layer).
Is it possible to get what I need without any external plug-ins or scripts?

GeoJSON Layers and Markers can be used together without problem.
To be able to toggle your layers, you need to catch some sort of click event from something you can click on, for example a button.
From my research what I found is if you need a custom button, it is not so quick to implement yourself, so you might need to use one of the available plugins.
If you still do not want to build a button or use a plugin, you could for example set a click event on the map itself, which toggles the GeoJSON layer on and off.
I took the GeoJSON example from the leaflet website and changed it so it toggles the GeoJSON layer on and off:
var geoLayer = L.geoJson([
// ...
]);
map.on('click', function() {
if(map.hasLayer(geoLayer)) {
map.removeLayer(geoLayer);
} else {
map.addLayer(geoLayer);
}
});
Hope that helps..
Edit:
I changed the example to use the layer control of leaflet.js
which is much better...
var baseLayers = {
"Markers": markerLayer,
"GeoJSON": geoLayer
};
L.control.layers(baseLayers).addTo(map);
Didn't know about this ;)
If you want checkboxes instead of radiobuttons, use this instead
L.control.layers(null, baseLayers).addTo(map);
http://codepen.io/anon/pen/qEaEBg

How to change google maps Drawing Manager toolbar tooltip?

I have a situation with google map drawing manager. I want to change the drawing manager toolbar default tooltip. When we move mouse over the drawing manager tool bar(moving mouse over marker,circle)we see that tooltip "Add a Marker", "Draw a circle" . I want to change the toolbar tooltip as " Add New Location " , " Draw a Area" . I use google map API version3. Is it possible to change it?
Thanks in advance

The nodes for the buttons are not accessible via the API, the best way would be to ommit the built-in controls and create your own instead.
Another approach(using jQuery, but it would be possible without a framework too):
$(map.getDiv()).one('mouseover','img[src="https://maps.gstatic.com/mapfiles/drawing.png"]',function(e){
$(e.delegateTarget).find('img[src="https://maps.gstatic.com/mapfiles/drawing.png"]').each(function(){
$(this).closest('div[title]').attr('title',function(){
switch(this.title){
case 'Add a marker':
return 'Add New Location';
break;
case 'Draw a circle':
return 'Draw an area';
break;
default:return this.title;
}
});
});
});
It observes the mouseover-event of the buttons(because you'll never know when the buttons available inside the document) and then modifies the title.
But this approach will only work when the API uses english as language. To achieve it regardless of the language you'll have to check the top-property of the button-image(this seems to be the only detail that may be used to determine the type of shape the button is used for)

For what ever were the reasons, I couldn't get the #Dr.Molle version to work. However adapting the this answer I was able to get it to work in my application.
For example I simply wanted to change the text of the `DrawingManager' drawRectangle method and the code below worked for me. The crucial thing with this modification to the DrawingManager tooltip is to make sure the document and map objects are full loaded before this code runs.
$(".gmnoprint").each(function(){
var newObj = $(this).find("[title='Draw a rectangle']");
newObj.attr('title', 'Draw a rectangle around the area to search');
});

switch locations in google map api 3

I have a Map with custom style and its working great,
I was wondering if I can somehow control the location of the map using some links in my page,
suppose I have 2 locations, I want to have
Location1
&
Location2
Then when I click on Location 1 map goes to that location , and same story for location 2, is it possible with jquery?
It would also be great if I can add a custom marker to each location too.
Thanks.

Yes, you can even do it without jquery, the panto method is what you want to use, https://developers.google.com/maps/documentation/javascript/reference#Map basically, just add a call to a predefined function into your anchor onclick event (or use a click handler in jquery to wire it up).
using jquery, you would need something like:
$("#location1").click(function(){
var pos = new google.maps.LatLng(-25.363882, 131.044922),
g_map.panTo(pos); //reference to globally defined google maps object
});
Here is a simple example from the google api documentation that can easily be retrofitted using the hints I have provided above:
https://google-developers.appspot.com/maps/documentation/javascript/examples/event-simple

if your instance of map is named "map", you can use:
Location1

Ruby on Rails - Gmap4Rails popup for a bigger map

I'm a rails beginner and am using rails 3.2.3.
In my app I'm using the awesome Google-Maps-for-Rails by apneadiving (it's just awesome)
Everything works wonderfully but I have got an issue and didn't find any answers here and there for what I want to do.
Basically I'm displaying a small map and wanted to have a button bellow it and when users clicked it, a bigger map would be displayed of that location.
(basically it would be the same map, only with a bigger size)
Something like this:
<input type="button" onclick="myFunction()" value="Show a bigger map" />
Bu my question is what to put inside that javascript function and how do I say a bigger map with #gmaps values should be displayed?
Create a new id with bigger With and Height in the gmaps css?
How to provide the JS the data from my #gmaps?
Any tips?
Sorry if this is a naive question, I'm still getting used to RoR and the Gmaps4Rails gem.
Thanks in advance for your time.
Regards

I'm not quite sure of what you want to do, but I'd say it's really easy to copy the parameters of one map to another.
Indeed, the whole code needed to create a map is visible in your html, simply reproduce the steps.
The gmaps_helper will do the job for your little map. Basically, it follows the following steps:
Gmaps.map = new Gmaps4RailsGoogle();
//mandatory
Gmaps.map.initialize();
// then some code depending on your options
Gmaps.map.markers = some_array;
Gmaps.map.create_markers();
Whenever you want to duplicate the map, you should simply follow the same steps:
Gmaps.bigmap = new Gmaps4RailsGoogle();
//mandatory to have the map created in the proper place
Gmaps.bigmap.map_options.id = the_id_of_your_html_div;
//still mandatory
Gmaps.bigmap.initialize();
//copy the specific parameters from the other map
Gmaps.bigmap.markers = Gmaps.map.markers;
Gmaps.bigmap.create_markers();

Google Maps JavaScript API: How to remove individual marker?

I'm using the Google Maps v3 library, with the Multi-Marker library which extends the functionality of Google Maps for super fast adding of map marker icons to a map.
I can't figure out how to remove a single, individual map marker using the multi-marker library linked above.
Does anyone have any ideas how I'd do this using the multi-marker library (and/or Google Maps)? I've tried contacting the lead developer of the project but am not getting a response.
Thanks for any help.
Also, linked is more information on this library
http://blog.redfin.com/devblog/2010/07/introducing_multimarker_the_fastest_way_to_add_many_hundreds_or_thousands_of_markers_on_google_maps.html
UPDATE:
I have linked example code of what I'm doing. I want to dynamically remove specific map marker icons (overlays) but am struggling on how to do that. Any advise would be very appreciated. Thanks
Live example:
http://multimarker.googlecode.com/svn/trunk/fast-marker-overlay/maps-v3/example/clickable.html

Normaly, using only the google maps api, to remove an overlay from the map you would need to call the setMap(null) method on the overlay.
As I can see, the Multi-Marker library uses an array to hold all the markers and creates an overlay to show on the map, an overlay that contains the markers. To remove one, it should work to remove the marker from the array (you need to know its position in the array) and redraw the overlay.
Edit:
You need something similar to function clearOverlays() { var i = overlays.length; while (i--) { var overlay = overlays[i]; if (overlay) overlay.setMap(null); delete overlays[i]; } }
But you'll need to know the position in the array of the marker you want to delete. The function will look like this:
function clearOneOverlay(var position) { var overlay = overlays[position]; if (overlay) overlay.setMap(null); delete overlays[position]; }

try this: remember which marker you click and then remove it later
consider following code(Google Maps v2)
var current_marker;
GEvent.addListener(marker, "click", function() {
current_marker = marker;
});
//remove later
current_marker.setMap(null);