90
rated 0 times
[
93]
[
3]
/ answers: 1 / hits: 16246
/ 10 Years ago, fri, march 28, 2014, 12:00:00
When I am adding custom marker icon for leaflet js the marker icon isn't position correctly.
Here is a fiddle when I am using custom marker http://jsfiddle.net/amrana83/7k5Jr/
Here is code when I am using custom marker
<style>
html, body, #map {
height: 500px;
width: 800px;
margin: 0px;
padding: 0px
}
.leaflet-map-pane {
z-index: 2 !important;
}
.leaflet-google-layer {
z-index: 1 !important;
}
</style>
<link rel=stylesheet href=http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css />
<script src=http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js></script>
<script src=https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false></script>
<script src=http://code.jquery.com/jquery-latest.js></script>
<script src=http://matchingnotes.com/javascripts/leaflet-google.js></script>
<body>
<div id=map></div>
<script>
var map = new L.Map('map', {center: new L.LatLng(51.5, -0.09), zoom: 4});
var googleLayer = new L.Google('ROADMAP');
map.addLayer(googleLayer);
var greenIcon = new L.Icon({iconUrl: 'http://technobd.rvillage.com/application/modules/Rvillage/externals/images/all_members.png'});
L.marker([51.5, -0.09], {icon: greenIcon}).bindPopup(I am a green leaf.).addTo(map);//using custom marker
L.marker([60.5, -0.09], {}).bindPopup(I am a green leaf.).addTo(map);
</script>
</body>
Here is a fiddle when I ain't using custom marker http://jsfiddle.net/amrana83/8skPU/1/
Here is code when I ain't using custom marker
<style>
html, body, #map {
height: 500px;
width: 800px;
margin: 0px;
padding: 0px
}
.leaflet-map-pane {
z-index: 2 !important;
}
.leaflet-google-layer {
z-index: 1 !important;
}
</style>
<link rel=stylesheet href=http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css />
<script src=http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js></script>
<script src=https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false></script>
<script src=http://code.jquery.com/jquery-latest.js></script>
<script src=http://matchingnotes.com/javascripts/leaflet-google.js></script>
<body>
<div id=map></div>
<script>
var map = new L.Map('map', {center: new L.LatLng(51.5, -0.09), zoom: 4});
var googleLayer = new L.Google('ROADMAP');
map.addLayer(googleLayer);
L.marker([51.5, -0.09], {}).bindPopup(I am a green leaf.).addTo(map);//not using custom marker
L.marker([60.5, -0.09], {}).bindPopup(I am a green leaf.).addTo(map);
</script>
</body>
More From » leaflet
