2 つのマーカーと、各マーカーに固有のコンテンツを持つツールチップを作成できました。マーカーをドラッグできないようにしたいです。
draggable を false に変更しても機能しません。ツールチップが表示されなくなります。
リスナーをいじると、マーカーは静的になりますが、ツールチップはマップの左上隅に表示されます。
私はJavaScriptとGoogleマップが初めてです...最終プロジェクトに取り組んでおり、あなたの助けに感謝します。
これが私のスクリプトです：
var map ;
function initialize() {
function Tooltip(opts, marker) {
// Initialization
this.setValues(opts);
this.map_ = opts.map;
this.marker_ = marker;
var div = this.div_ = document.createElement("div");
// Class name of div element to style it via CSS
div.className = "tooltip";
this.markerDragging = false;
}
Tooltip.prototype = {
// Define draw method to keep OverlayView happy
draw: function() {},
visible_changed: function() {
var vis = this.get("visible");
this.div_.style.visibility = vis ? "visible" : "hidden";
},
getPos: function(e) {
var projection = this.getProjection();
// Position of mouse cursor
var pixel = projection.fromLatLngToDivPixel(e.latLng);
var div = this.div_;
// Adjust the tooltip's position
var gap = 15;
var posX = pixel.x + gap;
var posY = pixel.y + gap;
var menuwidth = div.offsetWidth;
// Right boundary of the map
var boundsNE = this.map_.getBounds().getNorthEast();
boundsNE.pixel = projection.fromLatLngToDivPixel(boundsNE);
if (menuwidth + posX > boundsNE.pixel.x) {
posX -= menuwidth + gap;
}
div.style.left = posX + "px";
div.style.top = posY + "px";
if (!this.markerDragging) {
this.set("visible", true);
}
},
addTip: function() {
var me = this;
var div = me.div_;
div.innerHTML = me.get("text").toString();
// Tooltip is initially hidden
me.set("visible", false);
// Append the tooltip's div to the floatPane
me.getPanes().floatPane.appendChild(this.div_);
// In IE this listener gets randomly lost after it's been cleared once.
// So keep it out of the listeners array.
google.maps.event.addListener(me.marker_, "dragend", function() {
me.markerDragging = false;
});
// Register listeners
me.listeners = [
// g.addListener(me.marker_, "dragend", function() {
// me.markerDragging = false; }),
google.maps.event.addListener(me.marker_, "position_changed", function() {
me.markerDragging = true;
me.set("visible", false);
}),
google.maps.event.addListener(me.map_, "mousemove", function(e) {
me.getPos(e);
})
];
},
removeTip: function() {
// Clear the listeners to stop events when not needed.
if (this.listeners) {
for (var i = 0, listener; listener = this.listeners[i]; i++) {
google.maps.event.removeListener(listener);
}
delete this.listeners;
}
// Remove the tooltip from the map pane.
var parent = this.div_.parentNode;
if (parent) parent.removeChild(this.div_);
}
};
function inherit(addTo, getFrom) {
var from = getFrom.prototype; // prototype object to get methods from
var to = addTo.prototype; // prototype object to add methods to
for (var prop in from) {
if (typeof to[prop] == "undefined") to[prop] = from[prop];
}
}
// Inherits from OverlayView from the Google Maps API
inherit(Tooltip, google.maps.OverlayView);
function createMarker(point, name) {
var image = { url: 'styles/styleImgs/marker_food.png'};
/** Set both draggable and optimized marker properties to false
* when using non draggable markers.
* Tooltip needs markers rendered in separate DOM elements.
*/
var marker = new google.maps.Marker({
position: point,
map: map,
draggable: true,
icon: image,
tooltip: name
});
var tooltip = new Tooltip({map: map}, marker);
tooltip.bindTo("text", marker, "tooltip");
google.maps.event.addListener(marker, "mouseover", function() {
// Add the tooltip not before hovering over a marker
tooltip.addTip();
});
google.maps.event.addListener(marker, "mouseout", function() {
// Remove the tooltip on every mouseout
tooltip.removeTip();
});
return marker;
}
var styles = [
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{ "visibility": "on" },
{ "color": "#ffffff" }
]
},{
"featureType": "water",
"elementType": "geometry.stroke",
"stylers": [
{ "weight": 2.8 },
{ "visibility": "on" },
{ "color": "#ffffff" },
{ "saturation": 17 }
]
},{
"featureType": "landscape.man_made",
"elementType": "geometry.fill",
"stylers": [
{ "color": "#caddd8" },
{ "visibility": "on" }
]
},{
"featureType": "landscape.natural",
"elementType": "geometry.fill",
"stylers": [
{ "visibility": "on" },
{ "color": "#caddd8" }
]
},{
"featureType": "administrative.province",
"elementType": "labels.text",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "road",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{ "visibility": "on" },
{ "color": "#00667c" }
]
},{
"featureType": "water",
"elementType": "labels.text.stroke",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative.country",
"elementType": "labels.text.fill",
"stylers": [
{ "visibility": "on" },
{ "color": "#00667c" }
]
},{
"featureType": "administrative",
"elementType": "labels.text.stroke",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
{ "color": "#00667c" },
{ "visibility": "on" }
]
},{
"featureType": "landscape",
"elementType": "labels.text.fill",
"stylers": [
{ "color": "#00667c" },
{ "visibility": "on" }
]
},{
"featureType": "landscape",
"elementType": "labels.text.stroke",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "poi",
"elementType": "geometry.fill",
"stylers": [
{ "visibility": "on" },
{ "color": "#caddd8" }
]
},{
"featureType": "poi",
"elementType": "labels.text.stroke",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative.province",
"elementType": "geometry.stroke",
"stylers": [
{ "visibility": "on" },
{ "color": "#d1d2d4" },
{ "weight": 0.3 }
]
},{
"featureType": "transit",
"elementType": "geometry.stroke",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative.country",
"elementType": "geometry.stroke",
"stylers": [
{ "visibility": "on" },
{ "weight": 0.6 },
{ "color": "#ffffff" }
]
},{
}
] ;
function buildMap() {
var point = new google.maps.LatLng(39.5, -102);
var point2 = new google.maps.LatLng(41.07, -89.5);
var mapOptions = {
center: new google.maps.LatLng(10 , 0),
disableDefaultUI: true,
zoom: 3,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.TOP_RIGHT,
},
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
var marker = createMarker(point, "<b>First****</b><br />This is the first draggable testmarker");
var marker2 = createMarker(point2, "<b>Second***</b><br />This is the second draggable testmarker");
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyAeyZfOHXuoEZ926ckF1GXn7MkotVpCPio&sensor=false";
document.body.appendChild(script);
}
window.onload = buildMap();
window.onload = loadScript;
} //end initialize