I need some advise to change a marker cursor. I have this code:
marker = new google.maps.Marker( {map: g_map_obj,
clickable: true,
draggable: true,
position: e.latLng,
visible: true,
title: "hola",
cursor: g_static_files +"eraser.cur",
icon: g_static_files + 'castle.png'} );
... but this doesn't work.
Probably a problem with the .cur file type. Try using a .png instead.
Related
We are using google utility script to have a custom icon with information below it.
var marker5 = new MarkerWithLabel({position: point,
map: map,
draggable: false,
raiseOnDrag: false,
labelContent: infor,
labelAnchor: new google.maps.Point(20, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75},
icon: {
url: entImage,
size: new google.maps.Size(30, 30),
origin: new google.maps.Point(20, 0)
},
marker: MarkerWithLabel
});
The issue when we size the icon using new google.maps.Size(30, 30) it could not show up the full icon just partial of it. How ensure that when we resize it covers the whole image.
I have managed to solve this problem via a simple way and for the benefit of the rest just create one image icon like this
var pIcon = new google.maps.MarkerImage('logo.png',
null,
null,
null,
new google.maps.Size(30, 30));
Thereafter just apply into the rest of the codes.
marker = new google.maps.Marker({
icon: image,
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
flat: true,
optimized: false,
map: map,
visible: true,
customInfo: locations[i][0]
});
I have the above to build my Marker in my Google Map but when the marker is clicked, the map zooms to the location and I'd like to make the marker non clickable.
I have tried the following with no success
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(17);
map.setCenter(this.getPosition());
marker.MarkerOptions ({
clickable: false
});
});
Read the documentation - the name of the method you are looking for is called setOptions
marker.setOptions({clickable:false});
I found it and its actually quite a simple way of doing it.
marker.setClickable (true);
I have the following code to add a marker to my map:
var marker = new google.maps.Marker({
icon: '/pin.png',
map: map,
position: latlng,
draggable: false,
title: trip_name,
animation: google.maps.Animation.DROP
});
Everything works fine except the icon pops up for a split second before running the animation. Has anyone else encountered this problem?
I was experiencing this same behavior and I found that further defining the custom icon helped fix this issue.
var image = {
url: 'images/map_marker.png',
// This marker is 20 pixels wide by 30 pixels tall.
size: new google.maps.Size(20, 30),
// The origin for this image is 0,0.
origin: new google.maps.Point(0,0),
// The anchor for this image is the base of the image at 0,30.
anchor: new google.maps.Point(10, 30)
};
var marker = new google.maps.Marker({
icon: image,
map: map,
position: latlng,
draggable: false,
title: trip_name,
animation: google.maps.Animation.DROP
});
When I add more Markers to Google Map with different icon types like:
...
var marker = new google.maps.Marker({
position: markerLatLng,
map: map,
icon: "http://www.test.com/marker.png",
zIndex: 10
});
...
and
...
var resultIcon = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: "black",
strokeColor: "black",
strokeWeight: 1,
};
var marker = new google.maps.Marker({
position: markerLatLng,
map: map,
icon: resultIcon,
zIndex: 5
});
...
Than the zIndex doesn't work and the Symbol marker appears on the top.
Am I wrong with my code or how can I make the zIndex working?
You have to both specify a zIndex and add
optimized: false
to every marker constructor, eg.
var marker = new google.maps.Marker({
position: markerLatLng,
map: map,
icon: resultIcon,
optimized: false,
zIndex: 5
})
This seems to be an issue with the new canvas based rendering of the markers.
Edit:
This really solves the issue.
One thing to mention though is that every marker has to have the "optimized: false" attribute. As long as one marker does not have it, it will not work.
Remove any of the "optimized: false" attributes from LeJared's fiddle and you will encounter the bug.
http://jsfiddle.net/BNWYq/1/
Setting zIndex of the circle to -99 seems to help: http://jsfiddle.net/rq4vs/2/
I've made a little fiddl:
http://jsfiddle.net/gSRmV/
Looks like a bug, that has to be fixed by google.
Adding optimized: false doesn't change anything.
Edit: Still looks like bug, but the two solutions from tborychowski and Codetoffel seem to work.
I want to display Markers on Google map with title displayed under them as shown in picture:
Now this I read was possible in v2 using ELabel but is deprecated in v3. Is there any possible way to show some text under icons of markers in Google Maps V3?
Since at least October 2016, the official API provides a way to add permanently visible labels that are longer than one letter. See this reply by a Google project member.
var m = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
label: 'Hello world',
});
By default, the result looks like:
Pretty unreadable. Fortunately the API also allows a MarkerLabel object instead of a plain string:
var m = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
label: {
color: 'white',
fontWeight: 'bold',
text: 'Hello world',
},
});
Snippet above yields the following result:
However, the original question asked if the label could be located below the marker. The MarkerLabel docs mention this is possible with a custom icon and labelOrigin property. If we want to use the default icon, one is available at GitHub. Let us add the icon object:
var m = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
label: {
color: 'white',
fontWeight: 'bold',
text: 'Hello world',
},
icon: {
labelOrigin: new google.maps.Point(11, 50),
url: 'default_marker.png',
size: new google.maps.Size(22, 40),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(11, 40),
},
});
This results:
Pretty good! However, this whole approach has a shortcoming that the box in the original question does not have: readability with each map type. If the map type is changed from the satellite to the default the resulting label is hard to read:
An easy but not perfect way to avoid the low contrast in the both types is to set color: 'gray':
However, the gray color fails near urban areas. A better option would be to apply text-shadow CSS property to draw black linings for the white text. However, I cannot find a way to apply the property to the labels because few DOM elements created by Google Maps define a class:
The best option I came up to is to detect changes in the map type and update label color for each marker:
map.addListener('maptypeid_changed', function () {
var typeToColor, type, color, k, label;
typeToColor = {
'terrain': 'black',
'roadmap': 'black',
'hybrid': 'white',
'satellite': 'white',
};
type = map.getMapTypeId();
color = typeToColor[type];
for (k in markers) {
if (markers.hasOwnProperty(k)) {
label = markers[k].getLabel();
label.color = color;
markers[k].setLabel(label);
}
}
});
However, even this would fail on snowy or cloudy satellite imagery. I think it is still good enough in most of the cases. Nevertheless, it is nice to have the ability to display visible labels with the official API, without any plugins :)
I found the solution in an other post which worked perfectly for me.
Add numbering label to google map marker
You can't! But there's another part of maps API you can use to have permanently displayed text attached to your markers (without requiring any third party component), it's called infoWindow. Have a look at this for sample code & see it in action: https://developers.google.com/maps/documentation/javascript/examples/event-closure
If you dare using third party code, then here's something that is closer from the look & feel you want: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html
I use the following:
MarkerWithLabel.js
( the image is just a flag.png file)
Using javascript in my X.html document
it looks something like this....
<style type="text/css">
.labels {
color: black;
background-color: white;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 0.8em;
font-weight: bold;
text-align: center;
width: 6em;
border: 1px solid black;
white-space: normal;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.9&sensor=true"></script>
<!--MarkerwithLabelClass - adjust the path!! -->
<script src="YourPathHere/markerwithlabel.js"></script>
<script type="text/javascript">
//insert standaard initializing of googlemaps here
//and other windows.onload function
window.onload = function Initialize() {
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function CreateMarker(lat, long, titel, label, image, anchorY, anchorX){
var latlng = new google.maps.LatLng(parseFloat(lat), parseFloat(long));//I use parseFloat cause my parameters are strings(coming from JSON-string)
var marker = new MarkerWithLabel({
zIndex: 1,
title: titel,
position: latlng,
draggable: false,
icon: image,
labelContent: label,
labelAnchor: new google.maps.Point(30, -2),
labelClass: "labels", // the CSS class for the label
labelStyle: { opacity: 0.80 }
});
return marker;
}
</script>
Read up on license info for google maps API here : https://www.google.com/intx/en_uk/work/mapsearth/products/mapsapi.html
You should be able to use the same principle as in this example. Instead of listening to the mouse events you should create a new custom control for each marker and then position it below the marker. Hope it works out.