Develop Reference

Adding labels to custom markers that look and feel like places

I'm adding custom markers to my map using the new google.maps.Marker() JavaScript API method to map a custom list of locations.
Is it possible to add labels to the markers as shown in this screenshot?
The Marker documentation seems to allow this, but the label that's rendered runs into/overlaps with other markers and labels (I think the property is meant to label the marker itself ('A', 'B', 'C', etc).)
Here's an example of what I mean by "Labels overlapping with other markers and labels":

As you are using custom markers, it is possible. Google's documentation says:
If you are using a label with a custom marker, you can position the
label with the labelOrigin property in the Icon object.
See this working jsbin based off of Google's example for demonstration and guidance. Relevant code below:
var image = {
// here's the labelOrigin
labelOrigin: new google.maps.Point(70, 10)
};
var marker = new google.maps.Marker({
// set the marker's icon to the above image
icon: image,
// set a label
label: {
color: "black",
text: "label text here"
}
});
Edit
To add a text outline to the label, see answer for related thread How to display a label next to a Marker for Google Maps? and this jsfiddle based off of it.
Hope this helps.

Leaflet.js with OneMap: Marker and Polygon Issue

I am using onemap leaflet library to use leaflet.js with onemap
I am able to plot Singapore map in a SAPUI5 flexbox control. However, marker and polygon are not visible on the map. There is no error while adding a polygon but it does not appear on map. I have used following code to add polygon:
var latlngs = [
[103.908057506263, 1.30981613450459],
[103.908215431086, 1.30910851741726],
[103.908429273653, 1.30850269384475],
[103.908535156551, 1.30825745789562]
];
var polygon = L.polygon(latlngs, {
color: 'red'
});
polygon.addTo(map);
While adding a marker, I am getting following error:
Couldn't autodetect L.Icon.Default.imagePath, set it manually.
I need to draw polygon and show some markers.
Please help.

You need to set the marker images default path using:
L.Icon.Default.imagePath = './images'
This will point to the correct folder for default markers.

Generate Random Popups from Marker Clusters on zoom out using Leaflet.js

I have been working on developing a web app using Leaflet.js and Jquery. I am a beginner with javascript too.
I have built a map with custom markers and used marker clustering feature of leaflet.js to cluster all my data points in circles.
I have used the bindPopup() method to add text popups for my markers. Here's the code which does the marker clustering and popup binding on mouseover. I am using lat-long coordinates from a GeoJson file which I had brought in using Jquery getJSON function.
Having got the data, I did this
var abc = L.geoJson(data,{
pointToLayer: function(feature,latlng){
var marker = L.marker(latlng,{icon: Icon});
marker.bindPopup(feature.properties.City + '<br/>' + feature.properties.Text);
marker.on('mouseover', function(e){
marker.openPopup();
});
return marker;
}
}).addTo(map);
var clusters = L.markerClusterGroup();
clusters.addLayer(abc);
map.addLayer(clusters);
});
What I am trying to achieve is to randomly generate some popups from within each cluster when I zoom out! How do I achieve that? Do I need to add a zoom out event handler inside the L.geoJson method?

How do I programatically change layers in Leaflet?

I don't want to the show the layers control on the map, but I want to put some buttons somewhere else to change between layers. Is this possible to change the layer programmatically?

Suppose you have a map:
var map = L.map('worldmap-map').setView([37.8, -96], 4);
To remove a layer, layer1:
map.removeLayer(layer1)
To remove a control layer, ctrlLayer,
map.removeControl(ctrlLayer)
Or you want to add a layer1 to map:
layer1.addTo(map)
For an example, there is a Leaflet example : http://leafletjs.com/examples/choropleth-example.html
You could use firebug or chrome dev tools to see its source.

From https://stackoverflow.com/a/33762133/4355695 : Just myTileLayer.addTo(map) does the job of changing background layer (without adding on top), if it is already part of the base layers. And you don't need to explicitly remove the previously selected background layer.

How to add custom street names on Google Maps?

So you want to add custom street names or other labels on your Google Map? For example on this location. After learning current (3.6) google map js API you have these possible options:
KmlLayer (not works now)
GroundOverlay (works!)
OverlayView (should work)
KmlLayer "...adds geographic markup to the map from a KML, KMZ or GeoRSS file that is hosted on a publicly accessible web server...”. We can try this latest feature to add path with label. And it will work in Google Earth. But if path is too short – Google Earth will not show us a label. Workaround for short path is just make it long by adding start and end points few times:
<coordinates>
55.043196,82.907145 55.043473,82.909902
55.043196,82.907145 55.043473,82.909902
55.043196,82.907145 55.043473,82.909902
55.043196,82.907145 55.043473,82.909902
</coordinates>
Then we already see our nice custom label in Google Earth, but in Google Map not. Most possible reason is that google earth's latest feature is too latest. Currently it’s a fail way, but may be later, google map's KML renderer will take that feature into account.
GroundOverlay is "... a rectangular image overlay on the map ...". All is much simple.
Create image:
Open your Google Earth (make sure your latitude/longitude settings are Mercator) and go to your location
Add one pixel white image on your area and make it 33% transparent
Go to properties / place tab of your image overlay and copy latitudes/longitudes from there
Make screenshot in Google Earth and paste it to your favorite graphic editor
Crop image to the borders of your white transparent area
Add layer, where you will add your custom labels and add them
Switch off your base layer and save the result as png, for example overlay.png
Add the resulting image to your google map as:
google.maps.event.addDomListener(window, 'load', function() {
var mapDiv = document.getElementById('map'),
opts = {mapTypeId: google.maps.MapTypeId.HYBRID},
map = new google.maps.Map(mapDiv, opts),
area = new google.maps.LatLngBounds(
new google.maps.LatLng(55.042297, 82.906337),
new google.maps.LatLng(55.043862, 82.910473)
),
overlay = new google.maps.GroundOverlay(
'overlay.png', area, {map: map, clickable: false}
);
map.fitBounds(area);
});
OverlayView you can try by yourself.
ps: Is this a correct format for article? Or may be it should be a community wiki?

I created a MapLabel utility library a while ago. While it doesn't have any rotation or text-on-path capabilities (I'd love to see you add it!), it does let you put text on a map.