Google マップを作成して座標を設定しました。マップが読み込まれると、ロケーション バブルの位置が常に中央に表示されます。少し右/下に移動(パディングを適用)したいと思います。どうやってするか?アイデアを示すために画像を添付しています。
function googlemap() {
// map styling
var styles = [
{
stylers: [
{ hue: "#000000" },
{ saturation: -100 },
{ lightness: 40 }
]
}, {
elementType: "geometry",
featureType: "road",
featureType: "city",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
// google map coordinates
var posY = 54.679687,
posX = 25.277824,
location = new google.maps.LatLng(posY, posX);
var mapOptions = {
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_TOP
},
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
draggable: true,
disableDoubleClickZoom: false,
scrollwheel: false,
styles: styles,
zoom: 5,
center: location,
mapTypeId: google.maps.MapTypeId.ROADMAP // ROADMAP; SATELLITE; HYBRID; TERRAIN;
};
overlay.prototype = new google.maps.OverlayView();
// create overlay marker
overlay.prototype.onAdd = function () {
blip = document.createElement('div'),
pulse = document.createElement('div');
blip.className = 'blip';
pulse.className = 'pulse';
// create tooltip
tooltip = document.createElement('span');
tooltip.className = 'tooltip';
tooltip.innerHTML = 'Headquarters'; // tooltip text
blip.appendChild(tooltip);
// append 'blip' marker
this.getPanes().overlayLayer.appendChild(blip).appendChild(pulse);
}
// update blip positioning when zoomed
overlay.prototype.draw = function () {
var overlayProjection = this.getProjection(),
bounds = new google.maps.LatLngBounds(location, location),
sw = overlayProjection.fromLatLngToDivPixel(bounds.getSouthWest()),
ne = overlayProjection.fromLatLngToDivPixel(bounds.getNorthEast());
blip.style.left = sw.x + 'px';
blip.style.top = ne.y + 'px';
};
var map = new google.maps.Map(document.getElementsByClassName('map')[0], mapOptions);
// explicitly call setMap on this overlay
function overlay(map) {
this.setMap(map);
}
// center map when window resizes
google.maps.event.addDomListener(window, 'resize', function () { map.setCenter(location) });
// center map when zoomed
google.maps.event.addListener(map, 'zoom_changed', function () { map.setCenter(location) });
// add overlay
overlay = new overlay(map);
}