I have a map with overlay images... all work fine, but whenever I turn one of the overlays on/off the entire map redraws (re-positioning the map and changing the zoom level). What needs to change in the code to maintain the map position and zoom.
<!DOCTYPE html>
<html>
<head>
<title>GISM</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<meta charset="utf-8">
<style>
html, body, #map_canvas {
margin: 0px;
padding: 0px;
height: 100%;
}
#panel {
position: absolute;
top: 25px;
left: 85%;
margin-left: -5px;
z-index: 5;
background-color: (255,255,255);
padding: 15px;
opacity: 0.64;
border: 1px solid #999;
overflow: auto;
overflow-x: hidden;
width: 233px;
}
#latlong {
opacity: 0.64;
position: absolute;
bottom: -199px;
left: 55555 margin-left: -60px;
z-index: 5;
background-color: transparent;
padding: 5px;
//border: 1px solid #999;
overflow: auto;
overflow-x: hidden;
height: 300px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript">
var layers = [];//from kmlonoff
var map = null;
var overlays = [];
var boundsArray = [];
////////////////////////////latlon marker begin//////////////////////////////////
var marker = null;
// popup window for pin, if in use
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150,50)
});
// A function to create the marker and set up the event window function
function createMarker(latlng, name, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
google.maps.event.trigger(marker, 'click');
return marker;
}
//////////////////////////////latlon marker end//////////////////////////////////
///////a function to change the button color called from html code onclick= below////// from http://jsfiddle.net/ku2Ye/10/////
function colorchange(id)
{
var background = document.getElementById(id).style.backgroundColor;
if(background === "rgb(211, 211, 211)")
{
document.getElementById(id).style.backgroundColor = "rgb(26,255,0)";
}
if(background === "rgb(26, 255, 0)")
{
document.getElementById(id).style.backgroundColor = "rgb(211,211,211)";
}
}
///colorchange function end////////////////////
SchipholOverlay.prototype = new google.maps.OverlayView();
function initialize()
{
// sets the location of the initial pin (not map or redraw location, just the crosshair)
var myLatlng = new google.maps.LatLng(33.926315,168.0);//from kmlonoff
var mapProp = { //set map properties
center:new google.maps.LatLng(22.309213, 175.762316),
minZoom: 3,
zoom: 4,// sets the initial zoom before any overlays are added
mapTypeId:google.maps.MapTypeId.SATELLITE
};
//create map variable with properties
map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
var image1 = 'images/sa.png'; //fromkmlonoff
var layersLatLng = new google.maps.LatLng(-41.356341319572,147.41842480153);//from kmlonoff
var swBound = new google.maps.LatLng(-50.19625231313214, -344.0500);
var neBound = new google.maps.LatLng(62.09090138143704, -136.00001614726723);
var swBound2 = new google.maps.LatLng(-9.99625231313214, -180.7500);
var neBound2 = new google.maps.LatLng(45.99090138143704, -75.56001614726723);
var swBound3 = new google.maps.LatLng(-45.0125231313214, -344.0500);
var neBound3 = new google.maps.LatLng(44.5090138143704, -66.00001614726723);
var swBound4 = new google.maps.LatLng(10.5125231313214, 114.7500);
var neBound4 = new google.maps.LatLng(34.3090138143704, 151.30001614726723);
var swBound5 = new google.maps.LatLng(1.20, 101.20);
var neBound5 = new google.maps.LatLng(42.0, 165.04);
var swBound6 = new google.maps.LatLng(-49.20, -325.20);
var neBound6 = new google.maps.LatLng(60.0, -109.8);
var swBound7 = new google.maps.LatLng(-67.0, 10.0);
var neBound7 = new google.maps.LatLng(67.0, -82.5);
var bounds = new google.maps.LatLngBounds(swBound, neBound);
var bounds2 = new google.maps.LatLngBounds(swBound2, neBound2);
var bounds3 = new google.maps.LatLngBounds(swBound3, neBound3);
var bounds4 = new google.maps.LatLngBounds(swBound4, neBound4);
var bounds5 = new google.maps.LatLngBounds(swBound5, neBound5);
var bounds6 = new google.maps.LatLngBounds(swBound6, neBound6);
var bounds7 = new google.maps.LatLngBounds(swBound7, neBound7);
boundsArray.push(bounds);
boundsArray.push(bounds2);
boundsArray.push(bounds3);
boundsArray.push(bounds4);
boundsArray.push(bounds5);
boundsArray.push(bounds6);
boundsArray.push(bounds7);
// Insert overlay image here
var srcImage = 'https://ohana.nmci.navy.mil/JTWC_ARCHIVE/2015/STREAMLINE_CHARTS/AORoverlay.png';//0
var srcImage1 = 'https://ohana.nmci.navy.mil/wx/products/${streamtimeWP}/aor/gfs/${streamtimeWP}.aor.gfs.hjd.000nm.png';//1
var srcImage2 = 'https://ohana.nmci.navy.mil/wx/products/${streamtimeWP}/aor/nvg/${streamtimeWP}.aor.nvg.hjd.000nm.png';//
var srcImage3 = 'https://ohana.nmci.navy.mil/JTWC_ARCHIVE/${YYYY}/STREAMLINE_CHARTS/SURFACE/SFC${streamtimeWP}.png';//3
var srcImage4 = 'https://ohana.nmci.navy.mil/JTWC_ARCHIVE/${YYYY}/STREAMLINE_CHARTS/SURFACE/SFCs${streamtimeWP}.png';//4
var srcImage5 = 'https://ohana.nmci.navy.mil/JTWC_ARCHIVE/${YYYY}/STREAMLINE_CHARTS/SURFACE/SFCa${streamtimeWP}.png';//5
var srcImage6 = 'https://ohana.nmci.navy.mil/JTWC_ARCHIVE/${YYYY}/STREAMLINE_CHARTS/EPAC/SURFACE/SFCs${streamtimeEP}.png';//6
var srcImage7 = 'https://ohana.nmci.navy.mil/JTWC_ARCHIVE/${YYYY}/STREAMLINE_CHARTS/EPAC/SURFACE/SFCa${streamtimeEP}.png';//7
var srcImage8 = 'https://ohana.nmci.navy.mil/JTWC_ARCHIVE/${YYYY}/STREAMLINE_CHARTS/UPPER_AIR/UA${streamtimeWP}.png';//8
var srcImage9 = 'https://ohana.nmci.navy.mil/wx/products/${streamtimeWP}/aor/gfs/${streamtimeWP}.aor.gfs.efa.000.png';//1
// var srcImage9 = 'https://ohana.nmci.navy.mil/JTWC_ARCHIVE/Models/gfs/${streamtimeWP}.aor.gfs.hjd.000nm.png';//1
var srcImage10 = 'https://ohana.nmci.navy.mil/wx/products/${streamtimeWP}/aor/nvg/${streamtimeWP}.aor.nvg.efa.000.png';//2
var srcImage11 = 'https://ohana.nmci.navy.mil/JTWC_ARCHIVE/${YYYY}/STREAMLINE_CHARTS/UPPER_AIR/UAs${streamtimeWP}.png';//9
var srcImage12 = 'https://ohana.nmci.navy.mil/JTWC_ARCHIVE/${YYYY}/STREAMLINE_CHARTS/UPPER_AIR/UAa${streamtimeWP}.png';//10
var srcImage13 = 'https://ohana.nmci.navy.mil/JTWC_ARCHIVE/${YYYY}/STREAMLINE_CHARTS/EPAC/UPPER_AIR/UAs${streamtimeEP}.png';//11
var srcImage14 = 'https://ohana.nmci.navy.mil/JTWC_ARCHIVE/${YYYY}/STREAMLINE_CHARTS/EPAC/UPPER_AIR/UAa${streamtimeEP}.png';//12
var srcImage15 = 'http://rammb.cira.colostate.edu/ramsdis/online/images/latest/himawari-8/tropics_band_03.gif';//13
var srcImage16 = 'http://rammb.cira.colostate.edu/ramsdis/online/images/latest/himawari-8/himawari-8_band_13_sector_06.gif';//14
//this determines the draw order//
overlays.push(new SchipholOverlay(bounds, srcImage, map));
overlays.push(new SchipholOverlay(bounds7, srcImage1, map));
overlays.push(new SchipholOverlay(bounds7, srcImage2, map));
overlays.push(new SchipholOverlay(bounds, srcImage3, map));
overlays.push(new SchipholOverlay(bounds, srcImage4, map));
overlays.push(new SchipholOverlay(bounds, srcImage5, map));
overlays.push(new SchipholOverlay(bounds2, srcImage6, map));
overlays.push(new SchipholOverlay(bounds2, srcImage7, map));
overlays.push(new SchipholOverlay(bounds, srcImage8, map));
overlays.push(new SchipholOverlay(bounds7, srcImage9, map));
overlays.push(new SchipholOverlay(bounds7, srcImage10, map));
overlays.push(new SchipholOverlay(bounds, srcImage11, map));
overlays.push(new SchipholOverlay(bounds, srcImage12, map));
overlays.push(new SchipholOverlay(bounds2, srcImage13, map));
overlays.push(new SchipholOverlay(bounds2, srcImage14, map));
overlays.push(new SchipholOverlay(bounds5, srcImage15, map));
overlays.push(new SchipholOverlay(bounds5, srcImage14, map));
// layers[1] = new google.maps.KmlLayer('http://kml-samples.googlecode.com/svn/trunk/kml/Region/GroundOverlay/usa-ca-sf.kml', {preserveViewport:true});
layers[1] = new google.maps.KmlLayer(' file:///C:/Users/james.darlow/Documents/NetBeansProjects/GISM/public_html/MTSAT_ir.kml', {preserveViewport:true});
layers[1].setMap(map);
layers[2] = new google.maps.KmlLayer('http://www.usno.navy.mil/NOOC/nmfc-ph/RSS/jtwc/warnings/wp2015.kmz', {preserveViewport:true});
layers[2].setMap(map);
// layers[3] = new google.maps.KmlLayer('https://www.nrlmry.navy.mil/tcdat/tc16/SHEM/08S.CORENTIN/kml/2016_SHEM_08S.main.kml', {preserveViewport:true});
// layers[3].setMap(map);
layers[4] = new google.maps.KmlLayer('https://ohana.nmci.navy.mil/sat/MTSAT_ir.kmz', {preserveViewport:true});
//layers[4] = new google.maps.KmlLayer('https://ohana.nmci.navy.mil/sat/MTSAT_ir.kmz', {preserveViewport:true});
layers[4].setMap(map);
bounds.extend(layersLatLng);
///// start kml TDO /////
var TDOKMZLayer = new google.maps.KmlLayer({
url: 'https://10.32.63.99/mediawiki-1.5.4/JTWC/Figures/StormData/JTWC_GOOGLE_EARTH.kmz',
suppressInfoWindows: true,
map: map
});
/////// start kml NRL TC /////
var WstormsLayer = new google.maps.KmlLayer({
url: 'http://www.nrlmry.navy.mil/tcdat/tc15/IO/93A.INVEST/kml/2015_IO_91A.main.kml',
suppressInfoWindows: true,
map: map
});
////// start latlon pin////////////
// establish the initial marker/pin
// var image = 'crosshair2.png';
// marker = new google.maps.Marker({
// position: myLatlng,
// map: map,
// title:"Property Loca",
//the below code is meant to adjust marker positions from https://developers.google.com/maps/documentation/javascript/examples/icon-complex
// This marker is 20 pixels wide by 32 pixels tall.
// size: new google.maps.Size(50, 50),
// 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 flagpole at 0,32.
// anchor: new google.maps.Point(25, 25),
// icon: image
// });
// establish the initial div form fields
formlat = document.getElementById("latbox").value = myLatlng.lat();
formlng = document.getElementById("lngbox").value = myLatlng.lng();
// close popup window
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// removing old markers/pins
google.maps.event.addListener(map, 'click', function(event) {
//call function to create marker
if (marker) {
marker.setMap(null);
marker = null;
}
// Information for popup window if you so chose to have one
/*
marker = createMarker(event.latLng, "name", "<b>Location</b><br>"+event.latLng);
*/
//var image = 'crosshair2.png';
var image = {
url: 'crosshair2.png',
size: new google.maps.Size(50, 50),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(25, 25)
};
// var myLatLng = event.latLng ;
/*
var marker = new google.maps.Marker({
by removing the 'var' subsquent pin placement removes the old pin icon
*/
marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
draggable:true,
title:"drag me",
zIndex: 9
});
/*
marker = new google.maps.Marker({
position: myLatLng,
center: myLatlng,
map: map,
icon: image,
title:"Property Loco",
size: new google.maps.Size(50, 50),
origin: new google.maps.Point(25, 25),
anchor: new google.maps.Point(25, 25)
});
*/
// populate the form fields with lat & lng
formlat = document.getElementById("latbox").value = event.latLng.lat();
formlng = document.getElementById("lngbox").value = event.latLng.lng();
});
}
/////end lat long marker/////////////////////////////////////////////
/////////////begin of kmlonoff function/////////////////
function toggleLayer(i) {
if(layers[i].getMap() === null) {
layers[i].setMap(map);
} else {
layers[i].setMap(null);
}
}
////end of kmlonoff function////////////////////
function SchipholOverlay(bounds, image, map) {
// Now initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
// We define a property to hold the image's
// div. We'll actually create this div
// upon receipt of the add() method so we'll
// leave it null for now.
this.div_ = null;
// Explicitly call setMap() on this overlay
this.setMap(map);
}
SchipholOverlay.prototype.onAdd = function() {
// Note: an overlay's receipt of onAdd() indicates that
// the map's panes are now available for attaching
// the overlay to the map via the DOM.
// Create the DIV and set some basic attributes.
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
div.style.visibility = 'hidden';// al aded this to hide the charts onload
// Create an IMG element and attach it to the DIV.
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
// img.style.position = 'absolute';
div.appendChild(img);
// Set the overlay's div_ property to this DIV
this.div_ = div;
// We add an overlay to a map via one of the map's panes.
// We'll add this overlay to the overlayLayer pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
}
SchipholOverlay.prototype.draw = function() {
// Size and position the overlay. We use a southwest and northeast
// position of the overlay to peg it to the correct position and size.
// We need to retrieve the projection from this overlay to do this.
var overlayProjection = this.getProjection();
// Retrieve the southwest and northeast coordinates of this overlay
// in latlngs and convert them to pixels coordinates.
// We'll use these coordinates to resize the DIV.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Resize the image's DIV to fit the indicated dimensions.
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
};
SchipholOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
//this.div_ = null;
};
SchipholOverlay.prototype.hide = function() {
if (this.div_) {
this.div_.style.visibility = "hidden";
}
};
SchipholOverlay.prototype.show = function() {
if (this.div_) {
this.div_.style.visibility = "visible";
}
};
SchipholOverlay.prototype.toggle = function() {
if (this.div_) {
if (this.div_.style.visibility === 'hidden') {
this.show();
} else {
this.hide();
}
}
}
//initialize the map
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id ="panel">
<IMG SRC="technodev3.png" ALT="some text" WIDTH=60 HEIGHT=60>
<h1>GISM</h1>
<h3>Low Levels</h3>
<input type="button" value="Overlay" id="Overlay" onclick="colorchange('Overlay');map.fitBounds(boundsArray[0]);overlays[0].toggle();" style="background:rgb(211,211,211);"/><br>
<input type="button" value="SFC GFS" id="SFC GFS" onclick="colorchange('SFC GFS');map.fitBounds(boundsArray[0]);overlays[1].toggle();" style="background:rgb(211,211,211);"/><br>
<input type="button" value="SFC NVG" id="SFC NVG" onclick="colorchange('SFC NVG');map.fitBounds(boundsArray[0]);overlays[2].toggle();" style="background:rgb(211,211,211);"/><br>
<input type="button" value="Chart" id="Chart" onclick="colorchange('Chart');map.fitBounds(boundsArray[0]);overlays[3].toggle();" style="background:rgb(211,211,211);"/><br>
<input type="button" value="Streamline" id="Streamline" onclick="colorchange('Streamline');map.fitBounds(boundsArray[0]);overlays[4].toggle();" style="background:rgb(211,211,211);"/><br>
<input type="button" value="Analysis" id="Analysis" onclick="colorchange('Analysis');map.fitBounds(boundsArray[0]);overlays[5].toggle();" style="background:rgb(211,211,211);"/><br>
<input type="button" value="EPAC Streamline" id="EPAC Streamline" onclick="colorchange('EPAC Streamline');map.fitBounds(boundsArray[0]);overlays[6].toggle();" style="background:rgb(211,211,211);"/><br>
<input type="button" value="EPAC Analysis" id="EPAC Analysis" onclick="colorchange('EPAC Analysis');map.fitBounds(boundsArray[7]);overlays[5].toggle();" style="background:rgb(211,211,211);"/><br>
<h3>Upper Levels</h3>
<input type="button" value="Chart" id="ULChart" onclick="colorchange('ULChart');map.fitBounds(boundsArray[0]);overlays[8].toggle();" style="background:rgb(211,211,211);"/><br>
<input type="button" value="UA GFS" id="UA GFS" onclick="colorchange('UA GFS');map.fitBounds(boundsArray[0]);overlays[9].toggle();" style="background:rgb(211,211,211);"/><br>
<input type="button" value="UA NVG" id="UA NVG" onclick="colorchange('UA NVG');map.fitBounds(boundsArray[0]);overlays[10].toggle();" style="background:rgb(211,211,211);"/><br>
<input type="button" value="Streamline" id="ULStreamline" onclick="colorchange('ULStreamline');map.fitBounds(boundsArray[0]);overlays[11].toggle();" style="background:rgb(211,211,211);"/><br>
<input type="button" value="Analysis" id="ULAnalysis" onclick="colorchange('ULAnalysis');map.fitBounds(boundsArray[0]);overlays[12].toggle();" style="background:rgb(211,211,211);"/><br>
<input type="button" value="EPAC Streamline" id="EPAC ULStreamline" onclick="colorchange('EPAC ULStreamline');map.fitBounds(boundsArray[0]);overlays[13].toggle();" style="background:rgb(211,211,211);"/><br>
<input type="button" value="EPAC Analysis" id="EPAC ULAnalysis" onclick="colorchange('EPAC ULAnalysis');map.fitBounds(boundsArray[0]);overlays[14].toggle();" style="background:rgb(211,211,211);"/><br>
<input type="button" value="Himawari VIS" id="Himawari VIS" onclick="colorchange('Himawari VIS');map.fitBounds(boundsArray[0]);overlays[15].toggle();" style="background:rgb(211,211,211);"/><br>
<input type="button" value="Himawari Band 13" id="Himawari Band 13" onclick="colorchange('Himawari Band 13');map.fitBounds(boundsArray[0]);overlays[16].toggle();" style="background:rgb(211,211,211);"/><br>
</div>
<div class="map" id="googleMap" style="width:100%;height:100%;"></div>
<div id="latlong">
<p>Latitude: <input size="5" type="text" id="latbox" name="lat" ></p>
<p>Longitude: <input size="5" type="text" id="lngbox" name="lng" ></p>
</div>
</body>
</html>
You need to remove the code that causes the map to recenter and zoom when the buttons are clicked. (i.e. map.fitBounds(boundsArray[0]);)
Related
I am trying to work out how to show custom data when a Google Maps markerclusterer marker is clicked but can't find this documented anywhere.
My markerclusterer code looks like this but my attempt at capturing the click event on a marker is not working:
var markerClusterer = null;
var map = null;
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
'chco=FFFFFF,008CFF,000000&ext=.png';
google.maps.event.addDomListener(window, 'load', initialize);
function refreshMap() {
if (markerClusterer) {
markerClusterer.clearMarkers();
}
var markers = [];
var markerImage = new google.maps.MarkerImage(imageUrl,
new google.maps.Size(24, 32));
/*
for (var i = 0; i < 1000; ++i) {
var latLng = new google.maps.LatLng(data.photos[i].latitude,
data.photos[i].longitude)
var marker = new google.maps.Marker({
position: latLng,
icon: markerImage
});
markers.push(marker);
}
*/
for (var i = 0; i < numItemsToShow; ++i) {
var latLng = new google.maps.LatLng(itemsToShow[i].lat, itemsToShow[i].long);
var marker = new google.maps.Marker({
position: latLng,
icon: markerImage
});
markers.push(marker);
}
var zoom = parseInt(document.getElementById('zoom').value, 10);
var size = parseInt(document.getElementById('size').value, 10);
var style = parseInt(document.getElementById('style').value, 10);
zoom = zoom == -1 ? null : zoom;
size = size == -1 ? null : size;
style = style == -1 ? null: style;
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: zoom,
gridSize: size,
styles: styles[style]
});
}
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(39.91, 116.38),
mapTypeId: google.maps.MapTypeId.ROADMAP,
//styles: [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"administrative.land_parcel","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"landscape.natural","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"on"},{"color":"#052366"},{"saturation":"-70"},{"lightness":"85"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"saturation":"-100"},{"lightness":"0"}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"simplified"},{"lightness":"-53"},{"weight":"1.00"},{"gamma":"0.98"}]},{"featureType":"poi","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"labels.icon","stylers":[{"visibility":"off"},{"lightness":"0"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"hue":"#3dff00"},{"saturation":"-100"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45},{"visibility":"on"}]},{"featureType":"road","elementType":"geometry","stylers":[{"saturation":"-18"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road.local","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#57677a"},{"visibility":"on"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"lightness":"40"}]}]
styles: [{"featureType":"water","stylers":[{"visibility":"on"},{"color":"#b5cbe4"}]},
{"featureType":"landscape","stylers":[{"color":"#efefef"}]},
{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#83a5b0"}]},
{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#bdcdd3"}]},
{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"}]},
{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#e3eed3"}]},
{"featureType":"administrative","stylers":[{"visibility":"on"},{"lightness":33}]},
{"featureType":"road"},
{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{},
{"featureType":"road","stylers":[{"lightness":20}]}]
});
var refresh = document.getElementById('refresh');
google.maps.event.addDomListener(refresh, 'click', refreshMap);
var clear = document.getElementById('clear');
google.maps.event.addDomListener(clear, 'click', clearClusters);
google.maps.event.addListener(markerClusterer, 'click', function () {
// do something with this marker ...
this.setTitle('I am clicked');
});
refreshMap();
}
function clearClusters(e) {
e.preventDefault();
e.stopPropagation();
markerClusterer.clearMarkers();
}
This works for me (it opens an infowindow when you mouseover the cluster icon, if you click on the cluster icon, the default behavior is to zoom to the cluster bounds, which makes it hard to see the change of the tooltip/title on the cluster icon):
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(markerClusterer, 'mouseover', function (cluster) {
// do something with this cluster ...
infoWindow.setContent("Mouseover<br>"+cluster.getCenter().toUrlValue());
infoWindow.setPosition(cluster.getCenter());
infoWindow.open(map);
});
I have searched, researched and searched some more.
I am desperately trying to make it so my map changes its zoom automatically with different browser sizes as it keeps the markers on the map viewable. Right now the best thing that works for me is:
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
And even that is flawed. When the map becomes smaller, say on a mobile device, the markers eventually leave visibility since the zoom does not change. I need the zoom to change. Seemingly, this is the solution(I've done a lot of research, mostly from Stack Overflow):
map.fitBounds(firstB,secondB);
firstB, and secondB are the latitude and longitude that my markers use for their position.
I've even tried:
bounds = new google.maps.LatLngBounds();
bounds.extend(marker);
bounds.extend(smarker);
map.fitBounds(bounds);
Currently this is what I have:
<script>
var geocoder;
var map;
function initialize() {
firstB = new google.maps.LatLng(38.9395799,-104.7168500999999);
secondB = new google.maps.LatLng(38.9382571,-104.71727069999997);
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(38.938987, -104.717286);
var mapOptions = {
zoom:18,
center:latlng,
disableDefaultUI:true
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map.fitBounds(firstB,secondB);
var styles=[
{
featureType:"road",
elementType:"labels",
stylers:[
{visibility:"off"}
]
}
];
map.setOptions({styles: styles});
var pinIcon = new google.maps.MarkerImage(
'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
null, /* size is determined at runtime */
null, /* origin is 0,0 */
null, /* anchor is bottom center of the scaled image */
new google.maps.Size(52, 52)
);
var marker = new google.maps.Marker({
position: firstB,
map: map,
title: 'AVS',
icon:pinIcon,
});
var firstB_contentString = '<div><p>Medical Office Building</p><p class="infoContent">6007 E Woodmen Rd.</p><p class="infoContent">Colorado Springs, CO 80923</p></p></div>';
var firstB_infowindow = new google.maps.InfoWindow({
content: firstB_contentString
});
google.maps.event.addListener(marker, 'click', function() {
firstB_infowindow.open(map,marker);
});
var smarker = new google.maps.Marker({
position: secondB,
map: map,
title: 'AVS',
icon:'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
});
var secondB_contentString = '<div><p>General Hospital</p><p class="infoContent">6001 E. Woodmen Rd.</p><p class="infoContent">Colorado Springs, CO 80923</p></div>';
var secondB_infowindow = new google.maps.InfoWindow({
content: secondB_contentString
});
google.maps.event.addListener(smarker, 'click', function() {
secondB_infowindow.open(map,smarker);
});
google.maps.event.addListener(map, 'mousedown', function() {
firstB_infowindow.close(map,marker);
secondB_infowindow.close(map,smarker);
});
google.maps.event.addListener(marker, 'mousedown', function() {
firstB_infowindow.close();
secondB_infowindow.close();
});
google.maps.event.addListener(smarker, 'mousedown', function() {
firstB_infowindow.close();
secondB_infowindow.close();
});
/*bounds = new google.maps.LatLngBounds();
bounds.extend(marker);
bounds.extend(smarker);
map.fitBounds(bounds);*/
}
google.maps.event.addDomListener(window, 'load', initialize);
/*google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});*/
</script>
Nothing works.
Fix your bounds, make that global and call map.fitBounds in the resize handler code:
var bounds = new google.maps.LatLngBounds();
function initialize() {
var firstB = new google.maps.LatLng(38.9395799,-104.7168500999999);
var secondB = new google.maps.LatLng(38.9382571,-104.71727069999997);
bounds.extend(firstB);
bounds.extend(secondB);
Then:
google.maps.event.addDomListener(window, "resize", function() {
google.maps.event.trigger(map, "resize");
map.fitBounds(bounds);
});
working fiddle
code snippet:
var geocoder;
var map;
var bounds = new google.maps.LatLngBounds();
function initialize() {
var firstB = new google.maps.LatLng(38.9395799,-104.7168500999999);
var secondB = new google.maps.LatLng(38.9382571,-104.71727069999997);
bounds.extend(firstB);
bounds.extend(secondB);
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(38.938987, -104.717286);
var mapOptions = {
zoom:18,
center:latlng,
disableDefaultUI:true
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map.fitBounds(bounds);
var styles=[
{
featureType:"road",
elementType:"labels",
stylers:[
{visibility:"off"}
]
}
];
map.setOptions({styles: styles});
var pinIcon = new google.maps.MarkerImage(
'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
null, /* size is determined at runtime */
null, /* origin is 0,0 */
null, /* anchor is bottom center of the scaled image */
new google.maps.Size(52, 52)
);
var marker = new google.maps.Marker({
position: firstB,
map: map,
title: 'AVS',
icon:pinIcon,
});
var firstB_contentString = '<div><p>Medical Office Building</p><p class="infoContent">6007 E Woodmen Rd.</p><p class="infoContent">Colorado Springs, CO 80923</p></p></div>';
var firstB_infowindow = new google.maps.InfoWindow({
content: firstB_contentString
});
google.maps.event.addListener(marker, 'click', function() {
firstB_infowindow.open(map,marker);
});
var smarker = new google.maps.Marker({
position: secondB,
map: map,
title: 'AVS',
icon:'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
});
var secondB_contentString = '<div><p>General Hospital</p><p class="infoContent">6001 E. Woodmen Rd.</p><p class="infoContent">Colorado Springs, CO 80923</p></div>';
var secondB_infowindow = new google.maps.InfoWindow({
content: secondB_contentString
});
google.maps.event.addListener(smarker, 'click', function() {
secondB_infowindow.open(map,smarker);
});
google.maps.event.addListener(map, 'mousedown', function() {
firstB_infowindow.close(map,marker);
secondB_infowindow.close(map,smarker);
});
google.maps.event.addListener(marker, 'mousedown', function() {
firstB_infowindow.close();
secondB_infowindow.close();
});
google.maps.event.addListener(smarker, 'mousedown', function() {
firstB_infowindow.close();
secondB_infowindow.close();
});
/*bounds = new google.maps.LatLngBounds();
bounds.extend(marker);
bounds.extend(smarker);
map.fitBounds(bounds);*/
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
google.maps.event.trigger(map, "resize");
map.fitBounds(bounds);
});
html, body, #map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>
How would you put a white frame behind a dynamically loaded marker icon, now, that the new Google Maps "VisualRefresh" doesn´t allow shadows anymore? 1
Open http://jsfiddle.net/FSffv/3/ with google.maps.visualRefresh = false; to see the white frame around the marker icon and google.maps.visualRefresh = true; to have it disappear.
var map;
var m_NormalImageSize = 15;
var m_NormalShadowSize = m_NormalImageSize+5;
var elevator;
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(47, 8),
mapTypeId: 'terrain'
};
// turn VisualRefresh on/off
google.maps.visualRefresh = false;
map = new google.maps.Map($('#map')[0], myOptions);
var img = new Image();
img.src = "http://t2.gstatic.com/images?q=tbn:ANd9GcQUnmYVY5sWfZtBlw_IELax3W8E7-jZcCXLd2HUZYtpk_AeuK4CRnJmMHj0";
var img_ratio = img.height / img.width;
if (isNaN(img_ratio))
img_ratio = 1;
var icon_size = new google.maps.Size(m_NormalImageSize, m_NormalImageSize * img_ratio);
var shadow_size = new google.maps.Size(m_NormalShadowSize, m_NormalShadowSize * img_ratio);
var image = new google.maps.MarkerImage(
"http://t2.gstatic.com/images?q=tbn:ANd9GcQUnmYVY5sWfZtBlw_IELax3W8E7-jZcCXLd2HUZYtpk_AeuK4CRnJmMHj0",
icon_size,
new google.maps.Point(0, 0),
new google.maps.Point(-3, m_NormalImageSize * img_ratio + 3 * img_ratio),
icon_size
);
// the frame around the marker icon as a shadow
var shadow = new google.maps.MarkerImage(
"http://alsotoday.com/jpg/placemarkbackground_white.png",
shadow_size,
new google.maps.Point(0, 0),
new google.maps.Point(0, m_NormalShadowSize * img_ratio),
shadow_size
);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(47, 8),
map: map,
icon: image,
shadow: shadow,
title: "hallo"
});
One way to do this would be to use a custom HTML overlay. Then you can style it any way you like.
Here's a working example using this code:
function ImageMarker( options ) {
this.setValues( options );
this.$inner = $('<div>').css({
position: 'relative',
left: '-50%', top: '-50%',
fontSize: '1px',
lineHeight: '1px',
border: '2px solid red',
padding: '2px',
backgroundColor: 'white',
cursor: 'default'
});
this.$div = $('<div>')
.append( this.$inner )
.css({
position: 'absolute',
display: 'none'
});
};
ImageMarker.prototype = new google.maps.OverlayView;
ImageMarker.prototype.onAdd = function() {
$( this.getPanes().overlayMouseTarget ).append( this.$div );
};
ImageMarker.prototype.onRemove = function() {
this.$div.remove();
};
ImageMarker.prototype.draw = function() {
var marker = this;
var projection = this.getProjection();
var position = projection.fromLatLngToDivPixel( this.get('position') );
this.$div.css({
left: position.x,
top: position.y,
display: 'block'
})
this.$inner
.html( '<img src="' + this.get('image') + '"/>' )
.click( function( event ) {
var events = marker.get('events');
events && events.click( event );
});
};
function initialize() {
var latLng = new google.maps.LatLng( 40.708762, -74.006731 );
var map = new google.maps.Map( $('#map_canvas')[0], {
zoom: 15,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new ImageMarker({
map: map,
position: latLng,
image: 'http://cdn.sstatic.net/stackoverflow/img/favicon.ico',
events: {
click: function( event ) {
alert( 'Clicked marker' );
}
}
});
};
$( initialize );
How about having one more image with borders and make a statement like below:
if (google.maps.visualRefresh) {
image = new google.maps.MarkerImage(
"http://s24.postimg.org/lfamj2ktd/image.png",
icon_size,
new google.maps.Point(0, 0),
new google.maps.Point(-3, m_NormalImageSize * img_ratio + 3 * img_ratio),
icon_size);
}
Check this JSFiddle.
I am trying to get google maps to load, then zoom into my marker, but I have something wrong with my javascript, as the scope of the map is not visible, despite it being defined globally.
Any ideas what I am doing wrong ?
Many thanks
Mark
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="js/jquery-1.10.1.min.js"></script>
<link href="css/default.css" rel="stylesheet">
<!--
Include the maps javascript with sensor=true because this code is using a
sensor (a GPS locator) to determine the user's location.
See: https://developers.google.com/apis/maps/documentation/javascript/basics#SpecifyingSensor
-->
<script src="https://maps.googleapis.com/maps/api/js?v=3.12&sensor=true"></script>
<script>
//START Global Variables
var geocoder;
var map;
var marker;
var initialZoomLevel = 7;
var endZoomLevel = 16;
var zoomTimeInterval_ms = 1000;
var mapIcon = {
url: "images/im_here.png",
// This marker is 130 pixels wide by 120 pixels tall
size: new google.maps.Size(130,120),
//scale image so it works with retina displays
scaledSize: new google.maps.Size(65,60),
// The origin for this image is 0,0.
origin: new google.maps.Point(0,0),
// The anchor point is be middle of the base
anchor: new google.maps.Point(32.5,60)
};
var mapIcon_shadow = {
url: "images/im_here_shadow.png",
// This shadow is 191 pixels wide by 120 pixels tall
size: new google.maps.Size(191,120),
//scale image so it works with retina displays
scaledSize: new google.maps.Size(95.5,60),
// The origin for this image is 0,0.
origin: new google.maps.Point(0,0),
// The anchor point is be middle of the base
anchor: new google.maps.Point(32.5,60)
};
//Enable the visual refresh
google.maps.visualRefresh = true;
//END Global Variables
/** Initialise function to render the map */
function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = {
zoom: initialZoomLevel,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
panControl: false,
streetViewControl: false,
zoomControl: false
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
// set home location
home = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
// the marker where you are
marker = new google.maps.Marker({
map: map,
position: pos,
icon: mapIcon,
shadow: mapIcon_shadow,
draggable: true
});
codeLatLng(pos);
map.panTo(pos);
google.maps.event.addListener(marker, 'dragend', function(a) {
//alert('LatLng is '+a.latLng.lat()+ " "+ a.latLng.lng());
codeLatLng(a.latLng);
});
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
// Create the DIV to hold the control and
// call the HomeControl() constructor passing
// in this DIV.
//var homeControlDiv = document.createElement('div');
//var homeControl = new HomeControl(homeControlDiv, map);
//homeControlDiv.index = 1;
//map.controls[google.maps.ControlPosition.TOP_CENTER].push(homeControlDiv);
smoothZoom(map, endZoomLevel, map.getZoom()); // call smoothZoom, parameters map, final zoomLevel, and starting zoom level
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
function codeLatLng(markerLatLang) {
//var latlng = new google.maps.LatLng(latLng.lat(), latLng.lng());
geocoder.geocode({'latLng': markerLatLang}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
name = results[0].formatted_address;
latlongStr = "LAT = ["+markerLatLang.lat()+"] LNG = ["+markerLatLang.lng()+"]";
//alert("name = "+name);
$('#address').html(name);
$('#latlong').html(latlongStr);
} else {
alert('No results found');
}
} else {
alert('Geocoder failed due to: ' + status);
}
});
}
/**
* The HomeControl adds a control to the map that simply
* returns the user to home. This constructor takes
* the control DIV as an argument.
* #constructor
*/
/** TODO need to rewite this as normal div, not on map **/
function HomeControl(controlDiv, map) {
// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map
controlDiv.style.padding = '5px';
// Set CSS for the control border
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '2px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to set the map to Start Location';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior
var controlText = document.createElement('div');
controlText.style.fontFamily = 'Helvetica,sans-serif';
controlText.style.fontSize = '16px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.style.zIndex = "100";
controlText.innerHTML = '<b>Reset Map</b>';
controlUI.appendChild(controlText);
// Setup the click event listeners: simply set the map back to home
google.maps.event.addDomListener(controlUI, 'click', function() {
marker.setPosition(home);
map.setCenter(home);
});
}
// the smooth zoom function
function smoothZoom (map, max, cnt) {
if (cnt >= max) {
return;
}
else {
z = google.maps.event.addListener(map, 'zoom_changed', function(event){
google.maps.event.removeListener(z);
self.smoothZoom(map, max, cnt + 1);
});
setTimeout(function(){map.setZoom(cnt)}, zoomTimeInterval_ms);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel">
<div id="latlong">No latlong Yet</div>
<div id="address">No Address Yet</div>
</div>
<div id="map-canvas"></div>
</body>
</html>
The fact that your map is defined globally isn't relevant if you don't wait until it is initialized before using it.
It is initialized by the initialize function which runs on the body onload event. You use it inline before that happens. This works for me:
function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = {
zoom: initialZoomLevel,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
panControl: false,
streetViewControl: false,
zoomControl: false
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
google.maps.event.addListenerOnce(map,"zoom_changed", function() {
smoothZoom(map, endZoomLevel, map.getZoom()); // call smoothZoom, parameters map, final zoomLevel, and starting zoom level
});
working example
seems the zoom_changed event doesn't fire when the map initializes, using the "idle" event seems to work:
working example with zoom on idle
I wonder whether someone may be able to help me please.
I've been working on a tooltip for markers that I place on a google map. I can get this to work showing the information that I would like the user to see, in this case the fields name and address, so the code line is title: name+address.
Could someone please tell me how I could put a space between these so the tooltip would read 'name address' rather than 'nameaddress'.
I've tried all sorts of things using e.g.title: name'_'+ address, title: name' '+address and I can't get it to work.
Any help would be greatly appreciated.
Many thanks
Chris
You can try this
name + ' ' + address
NB: you need a space in the quotes and a + on either side.
I use this function to initialize started values:
//Inicialize map values
function initialize() {
latCenterMap=41.50347;
lonCenterMap=-5.74638;
zommCeneterMap=14;
latPoint=41.50347;
lonPoint=-5.74638;
//Values default initialize
var latlng = new google.maps.LatLng(latCenterMap, lonCenterMap);
var mapOptions = {
zoom: zommCeneterMap,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas_'), mapOptions);
codePoint(map, lat, lon);
}
I used this function to set values point position into map
//Get position by Latitude and Longitude
function codePoint(map, lat, lon) {
var latlng = new google.maps.LatLng(parseFloat(lat), parseFloat(lon));
var title = "Your text";
var iconPoint = new google.maps.MarkerImage('images/pointBlue.png',
//Measure image
new google.maps.Size(25,25),
new google.maps.Point(0,0),
//Half measure image
new google.maps.Point(12.5,12.5)
);
marker = new google.maps.Marker({
position: latlng,
map: map,
icon: iconPoint,
tooltip: title
});
customTooltip(marker);
}
I use this function to create a tooltip to point position
//TOOLTIP
function customTooltip(marker){
// Constructor function
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);
}
},
// This is added to avoid using listener (Listener is not working when Map is quickly loaded with icons)
getPos2: function(latLng) {
var projection = this.getProjection();
// Position of mouse cursor
var pixel = projection.fromLatLngToDivPixel(latLng);
var div = this.div_;
// Adjust the tooltip's position
var gap = 5;
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 g = google.maps.event;
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.
g.addListener(me.marker_, "dragend", function() {
me.markerDragging = false; });
// Register listeners
me.listeners = [
// g.addListener(me.marker_, "dragend", function() {
// me.markerDragging = false; }),
g.addListener(me.marker_, "position_changed", function() {
me.markerDragging = true;
me.set("visible", false); }),
g.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);
var tooltip = new Tooltip({map: map}, marker);
tooltip.bindTo("text", marker, "tooltip");
google.maps.event.addListener(marker, 'mouseover', function() {
tooltip.addTip();
tooltip.getPos2(marker.getPosition());
});
google.maps.event.addListener(marker, 'mouseout', function() {
tooltip.removeTip();
});
}
I use this style to css file
//CSS
.tooltip {
position:absolute;
top:0;
left:0;
z-index: 300;
width: 11.5em;
padding: 5px;
font-size: 12pt;
font-family: klavika;
color: #fff;
background-color: #04A2CA;
border-radius: 10px;
box-shadow: 2px 2px 5px 0 rgba(50, 50, 50, 0.75);
}