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)
}
Related
When using the following code to add a Marker to an on page Google Map
var myMarker4 = new google.maps.Marker({ position: new google.maps.LatLng(53.53, -2.5), map: map, icon: '/_Content/images/light-pink-marker-map.png' });
Is there a way (call back?) for me to detect when the user has hovered over the marker so I can do something on the current page?
I have several markers, so I would need someway to uniquely identify each.
Isn't this what you're looking for?
var myMarker4 = new google.maps.Marker({ position: new google.maps.LatLng(53.53, -2.5), map: map, icon: '/_Content/images/light-pink-marker-map.png' });
google.maps.event.addListener(myMarker4, 'mouseover', function() {
doSomething...
});
By the way, here's the full list of events that a marker can handle:
'click'
'dblclick'
'mouseup'
'mousedown'
'mouseover'
'mouseout'
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!
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 want to pass related marker id by clicking marker on google map. I am using marker.getId() function to retrieve marker id. But the marker id is not passing along with url. How can i do this? Any Help?
function AddressMap(lat,lang,markerid)
{
var latLng = new google.maps.LatLng(lat,lang);
var marker = new google.maps.Marker({
'map': map,
position: latLng,
'latitude' :lat,
'longitude' :lang,
icon: image,
shadow: shadow,
id: markerid
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
window.location = "www.cickstart.com/" + marker.getId();
});
}
you can try directly to access the id:
google.maps.event.addListener(marker, 'click', function() {
window.location = "www.cickstart.com/" + marker.id;
});
the best way to do this is add a metadata to marker
var marker = new google.maps.Marker(markerOptions);
marker.metadata = {type: "point", id: 1};
if you have so many marker push the marker to array marker.
You can add any data that you want. and simply call it, set it or get it.
the sample like this one:
markers[0].metadata.id
I have scoured stackoverflow and other forums including the google maps v3 api docs for an answer but I cannot find how to change the event that fires the marker info window from click to mouseover in the files I am working with.
I am working with a demo from the google library that includes a fusion table layer.
You zoom into the clusters and see the small red circle markers for locations.
You have to click to reveal an info window. I wish to rollover to reveal the info window.
My demo is here:
http://www.pretravelvideo.com/gmap2/
The functions.js file does most of the work here:
http://www.pretravelvideo.com/gmap2/functions.js
Here's an example:
http://duncan99.wordpress.com/2011/10/08/google-maps-api-infowindows/
marker.addListener('mouseover', function() {
infowindow.open(map, this);
});
// assuming you also want to hide the infowindow when user mouses-out
marker.addListener('mouseout', function() {
infowindow.close();
});
var icon1 = "imageA.png";
var icon2 = "imageB.png";
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: icon1,
title: "some marker"
});
google.maps.event.addListener(marker, 'mouseover', function() {
marker.setIcon(icon2);
});
google.maps.event.addListener(marker, 'mouseout', function() {
marker.setIcon(icon1);
});
Thanks to duncan answer, I end up with this:
marker.addListener('mouseover', () => infoWindow.open(map, marker))
marker.addListener('mouseout', () => infoWindow.close())