I know I can make a marker with a tooltip that shows "SOMETHING" like this:
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lon),
map: map,
draggable: true,
title:"SOMETHING",
icon: '/public/markers-map/male-2.png'
});
I want to do the same with a circle but title doesn't work.
new google.maps.Circle({
center: new google.maps.LatLng(lat,lon),
radius: 20,
strokeColor: "blue",
strokeOpacity: 1,
title:"SOMETHING",
strokeWeight: 1,
fillColor: "blue",
fillOpacity: 1,
map: map
});
It prints the circle but does not show the message "SOMETHING".
How can I do it? is there another property to get it?
Thanks in advance.
The tooltip is created via the native title-attribute of DOM-elements, but the API doesn't provide any method to access the DOMElement that contains the circle.
A possible workaround may be to use the title-attribute of the map-div instead(set it onmouseover and remove it onmouseout)
//circle is the google.maps.Circle-instance
google.maps.event.addListener(circle,'mouseover',function(){
this.getMap().getDiv().setAttribute('title',this.get('title'));});
google.maps.event.addListener(circle,'mouseout',function(){
this.getMap().getDiv().removeAttribute('title');});
You can also use InfoWindow instead of html title attribute, as the title may not show up always on mouse over. InfoWindow looks pretty good.
var infowindow = new google.maps.InfoWindow({});
var marker = new google.maps.Marker({
map: map
});
Then use same mouseover event mechanism to show the InfoWindow:
google.maps.event.addListener(circle, 'mouseover', function () {
if (typeof this.title !== "undefined") {
marker.setPosition(this.getCenter()); // get circle's center
infowindow.setContent("<b>" + this.title + "</b>"); // set content
infowindow.open(map, marker); // open at marker's location
marker.setVisible(false); // hide the marker
}
});
google.maps.event.addListener(circle, 'mouseout', function () {
infowindow.close();
});
Also we can add event listener direct on google.maps.Circle instance.
Code sample:
//circle is the google.maps.Circle-instance
circle.addListener('mouseover',function(){
this.getMap().getDiv().setAttribute('title',this.get('title'));
});
circle.addListener('mouseout',function(){
this.getMap().getDiv().removeAttribute('title');
});
Just wrote for alternative!
Related
I'm starter and sorry for my poor English.
Summery: I have two events:
google.maps.event.addListener(map, 'click', function(e)
and
google.maps.event.addListener(mpolygon, 'click', function(e)
But I want both of them together. Something like this:
google.maps.event.addListener(map, mpolygon 'click', function(e)
Explanation:
I have developed a very simple program to understand Google maps better.
This code uses geometry library. We have a polygon on the map. When we click on the map the program creates a green circle marker on the map. But when we click on the polygon it should creates a red circle marker on the polygon. My problem is that When I click on the map it creates a green circle on the map because we have "google.maps.event.addListener(map, 'click', function(e)" But for create red marker on the polygon we have to change "google.maps.event.addListener(map, 'click', function(e)" to "google.maps.event.addListener(bermudaTriangle, 'click', function(e)"
I want both of them. I mean when I click on the map or on the bermudaTriangle both of them works.
I need something like this:
"google.maps.event.addListener(map, bermudaTriangle, 'click', function(e)"
Here is my source that just have one event.addListener and we can just click on the map to create green marker but I want it to have two event.addListener for map and for polygon:
google.maps.event.addListener(map, 'click', function(e) {
var result;
if (google.maps.geometry.poly.containsLocation(e.latLng, bermudaTriangle)) {
result = 'red';
}
else
{
result = 'green';
}
var circle = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: result,
fillOpacity: .9,
strokeColor: 'white',
strokeWeight: .9,
scale: 10
};
new google.maps.Marker({
position: e.latLng,
map: map,
icon: circle
})
});
you have 2 options:
set the clickable-option of the bermudaTriangle to false . click-events on the polygon will no longer be captured and your current script will work as expected.
use only the listener for map and trigger a click on the map when you click on the bermudaTriangle:
google.maps.event.addListener(map, 'click', function(e,color) {
color=color||'green'
var circle = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: color,
fillOpacity: .9,
strokeColor: 'white',
strokeWeight: .9,
scale: 10
};
new google.maps.Marker({
position: e.latLng,
map: map,
icon: circle
})
});
google.maps.event.addListener(bermudaTriangle, 'click', function(e) {
google.maps.event.trigger(map,'click',e,'red')
});
As you see the listener for the map-click now has a 2nd argument color .
When you click on the map, this argument is undefined (and defaults to green). When you click on the bermudaTriangle the argument is red .
The 2nd solution should be preferable when you need to apply this for multiple polygons, because you don't need to check if the latLng intersects any polygon.
in the following code generated an undetermined number of markers, this works well.
for(i=0;i<idr.length;i++){
var LatLng = new google.maps.LatLng(lat[i], lng[i]);
m[i] = new google.maps.Marker({
position: LatLng,
icon: image,
map: map,
draggable: false,
val: idr[i]
});
}
I want to get the properties of the corresponding marker when the mouse passes over this
This does not apply for you should create a function for each marker and can not be that many
This function only access the first marker
google.maps.event.addListener(m[0], "click", function(e) {
var latitud = e.latLng.lat();
alert(latitud);
});
use this inside the callback to get access to the current marker(m[i] will not work there, because it will always refer to the last created marker)
google.maps.event.addListener(m[i], 'mouseover', function() {
alert(this.val)
});
for(i=0;i<idr.length;i++){
var LatLng = new google.maps.LatLng(lat[i], lng[i]);
m[i] = new google.maps.Marker({
position: LatLng,
icon: image,
map: map,
draggable: false,
val: idr[i]
});
google.maps.event.addListener(m[i], 'mouseover', function() {
//Do stuff
});
}
The above is how I would do it.
I created a map using Google Fusion Tables, and have uploaded the map into an HTML document, which I am tweaking to make subtle changes in the appearance of the map. I figured out how to insert a draggable pin/marker that displays a street view of its current location on click, but I can't figure out how to change the appearance of the marker. Here is the code I have for the interactive streetview marker.
//street view pin
var contentString = '<div id="content" style="width:500px;height:400px;"></div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Click Here for Street View',
draggable: true
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
var pano = null;
google.maps.event.addListener(infowindow, 'domready', function() {
if (pano != null) {
pano.unbind("position");
pano.setVisible(false); }
pano = new google.maps.StreetViewPanorama(document.getElementById("content"), {
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.ANDROID},
nableCloseButton: false,
addressControl: false,
linksControl: false
});
pano.bindTo("position", marker);
pano.setVisible(true);
});
google.maps.event.addListener(infowindow, 'closeclick', function() {
pano.unbind("position");
pano.setVisible(false);
pano = null;
});
I tried to tweak the lines 7-14, adding in a
icon: 'cross_hairs_highlight'
which is the style i want, but the icon disappears when I try to open the HTML document in a browser. There is still something there that I can still drag around and click on for StreetView, but it's invisible.
Any suggestions?
Your help is appreciated!!!
JH
The value of icon is expected to be a URL, not the name of a fusionTable-icon (these icon-names may only be used for markers rendered within a fusionTableLayer).
You'll find a list of these icons (inspect the image-properties to retrieve the URL) at http://kml4earth.appspot.com/icons.html , so you may use e.g.:
icon:'http://maps.google.com/mapfiles/kml/pal3/icon52.png'
When you want the marker to be centered at the given position, you must also specify the anchor:
icon:{
url: 'http://maps.google.com/mapfiles/kml/pal3/icon52.png',
anchor: new google.maps.Point(16,16)
}
I am using google maps api. I want to have two mouse events ready to trigger at one time. Below is a code snipit.
function initialize() {
var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3 }
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
// Add a listener for the click event
google.maps.event.addListener(map, 'click', addLatLng);
}
function addLatLng(event) {
var path = poly.getPath();
if(!draw)
{
path.push(event.latLng);
path.push(event.latLng);
draw = true;
// Add a new marker at the new plotted point on the polyline.
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map });
google.maps.event.addListener(map, 'mousemove', moveTrackLine);
}
else
{
path.push(event.latLng);
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map });
draw = false;
}
}
function moveTrackLine(event) {
var path = poly.getPath();
// replace the old point with a new one to update the track
path.pop();
path.push(event.latLng);
}
When I click on the map the first time I see a marker placed on the map. Then when the mouse is moved I see the polyline update and follow my curser correctly. Next if I click on the map I do not see a marker placed on the map nor do I ever go into the addLatLng function. Thanks in advance for your help and time.
-tim
set the clickable-option of the polyline to false.
The issue: As soon as the mousemove-event is applied to the map, you will not be able to click on the map anymore, because below the mouse-cursor is always the polyline.
When you set the clickable-option of the polyline to false, the polyline does not respond to mouse-events and the click-event will be passed to the map.
I made a few Polygons on a Google map. Now I want to add a mouseover (and mouseout) to the Polygons, so that when you hover over the Polygon, you get to see the name of the area. and when you mouseout the names goes away (like when you hover over buttons in your browser)
var map;
var infoWindow;
function initialize() {
var myLatLng = new google.maps.LatLng(50.88111111111, 3.889444444444);
var myOptions = {
zoom: 12,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var poly;
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var polyCoords = [
verwissel(3.869506,50.906449),
verwissel(3.869654,50.905664),
verwissel(3.869934,50.904131),
verwissel(3.870310,50.902717),
verwissel(3.870471,50.901559),
];
poly = new google.maps.Polygon({
paths: HerzeleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: "#FF0000",
fillOpacity: 0.35
});
google.maps.event.addListener(Poly, "mouseover", function(showtext("polyname"));
google.maps.event.addListener(Poly, "mouseover", function(do not show text anymore);
This is what I think it would look like, but I dont know how it works.
Here's an example: http://jsfiddle.net/tcfwH/304/
Not exactly the same as a browser tooltip, but the text can be styled. I'm using MarkerWithLabel. Each marker is used for the name of its polygon. To toggle multi-line boxes change white-space: nowrap in the CSS. There is also InfoBox as a working option but I find it much more complicated to use than MarkerWithLabel.
The event listeners move the MarkerWithLabel around according to the mouse position:
google.maps.event.addListener(poly, "mousemove", function(event) {
marker.setPosition(event.latLng);
marker.setVisible(true);
});
google.maps.event.addListener(poly, "mouseout", function(event) {
marker.setVisible(false);
});
I haven't tested this in a variety of browsers, but in Chrome it does the trick for me: Call the div containing the map "map_canvas". Also, so that each polygon has its own title, set the property 'sourceName' to the polygon's title.
perimeter.addListener('mouseover',function(){
var map_canvas = document.getElementById("map_canvas");
map_canvas.title = this.sourceName;
});
perimeter.addListener('mouseout',function(){
var map_canvas = document.getElementById("map_canvas");
map_canvas.removeAttribute('title');
});