alt tag on Google Map polygon

Hi All,
I would love to add a mouse over tooltip or alt tag on moreover these polygon shapes.
Any ideas how to implement into my existing code?
http://beaconhilldesign.co.nz/~mkrfa/test.html
Cheers,
N
LVL 5
Neil_BradleyWeb UX/UI DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
Check out the Google maps plugin Infobox. It can be used for labeling Google maps.

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html
0
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
Thanks tommyBoy.
not a lot of info on integrating InfoBox into a mouserover event on a polygon..
N
0
Tom BeckCommented:
Attach the display of the infobox to the event of your choice; 'click' or 'mouseover'. Here's an example:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
	
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
 <script type="text/javascript" src="scripts/infobox_packed.js"></script>
<script type="text/javascript"> 

  function initialize() {

  var myLatlng = new google.maps.LatLng(49.261, -123.138);
  var mapOptions = {
    zoom: 16,
    center: myLatlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);
	 
  var goldStar = {
  	path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
  	fillColor: "yellow",
  	fillOpacity: 0.8,
  	scale: 1,
  	strokeColor: "gold",
  	strokeWeight: 2
  };
  
  var marker1 = new google.maps.Marker({
      position: new google.maps.LatLng(49.26365813608, -123.1362942551117),
      map: map,
      icon: goldStar
  });
  
  //Create infobox
  var boxText = document.createElement("div");
        boxText.style.cssText =	"border: 1px solid black; margin-top: 8px; background: #def; padding: 5px; border-radius: 10px"
			;
        boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";
                
        var myOptions = {
                 content: boxText
                ,disableAutoPan: false
                ,maxWidth: 0
                ,pixelOffset: new google.maps.Size(-180, 0)
                ,zIndex: null
                ,boxStyle: { 
                  opacity: 0.75
                  ,width: "280px"
                 }
                ,closeBoxURL: ""
                ,infoBoxClearance: new google.maps.Size(1, 1)
                ,isHidden: false
                ,pane: "floatPane"
                ,enableEventPropagation: false
        };

        var ib = new InfoBox(myOptions);
		
  google.maps.event.addListener(marker1, 'mouseover', function() {
    ib.open(map, this);
  });
  google.maps.event.addListener(marker1, 'mouseout', function() {
	ib.close();
  });
 
}
	google.maps.event.addDomListener(window, 'load', initialize);
	

</script>
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>
</head>

<body>
<div id="map_canvas"></div>
</body>
</html>

Open in new window

0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
I have found script here that seems to work great and is very lightweight http://jsfiddle.net/tcfwH/
I have tried (with my limited java knowledge) to modify the script to work with my code however I'm not quite there http://mkrfa.com/test.html
Cheers,
Neil
0
Tom BeckCommented:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]>    <html class="no-js gt-IE8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--><head>
	<title>Fire Danger Levels | MKRFA</title>

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<link rel="stylesheet" href="cms/uploads/css/style.css">
        
    <!-- map script-->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/src/markerwithlabel_packed.js"></script>
     <style>
	      html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
  .labels {
     color: red;
     background-color: white;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 10px;
     font-weight: bold;
     text-align: center;
     width: 65px;     
     border: 2px solid black;
     white-space: nowrap;
   }
	 </style>

<script type="text/javascript">
var map;
var infoWindow;
function initialize() {
var myLatLng = new google.maps.LatLng(-41.51886, 173.95752);
var myOptions = {
zoom: 8,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};

var riskMap, riskMap2;
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);

// name unknown 
var zone1 = [
new google.maps.LatLng(-41.6410406987917, 173.655298119162),
new google.maps.LatLng(-41.6482827081576, 173.638217718801),
new google.maps.LatLng(-41.695198174185, 173.596714508198),
new google.maps.LatLng(-41.7259496803651, 173.581424807431),
new google.maps.LatLng(-41.7217783041334, 173.594702486944),
new google.maps.LatLng(-41.7621039825317, 173.566839715787),
new google.maps.LatLng(-41.7872193071698, 173.542150968868),
new google.maps.LatLng(-41.7994761477723, 173.507426911757),
new google.maps.LatLng(-41.8080197881287, 173.519453718661),
new google.maps.LatLng(-41.8199344301827, 173.518617724039),
new google.maps.LatLng(-41.8355132320786, 173.500837550075),
new google.maps.LatLng(-41.872133819076, 173.482866222678),
new google.maps.LatLng(-41.8788583825318, 173.439637322941),
new google.maps.LatLng(-41.8932102637662, 173.423791016376),
new google.maps.LatLng(-41.9037080998191, 173.419393938893),
new google.maps.LatLng(-41.9373240324199, 173.336652233813),
new google.maps.LatLng(-41.9301969528053, 173.329597615901),
new google.maps.LatLng(-41.9201536590905, 173.342944706756),
new google.maps.LatLng(-41.9130069125763, 173.342907801441),
new google.maps.LatLng(-41.9092171381667, 173.335234178041),
new google.maps.LatLng(-41.9149800838291, 173.318677964635),
new google.maps.LatLng(-41.9274044548268, 173.304701058517),
new google.maps.LatLng(-41.926062138952, 173.268328645879),
new google.maps.LatLng(-41.9118176438852, 173.245308551457),
new google.maps.LatLng(-41.9139924381132, 173.229751962932),
new google.maps.LatLng(-41.8990373323122, 173.233180651026),
new google.maps.LatLng(-41.895961732681, 173.235680081816),
new google.maps.LatLng(-41.8850187818163, 173.253154667273),
new google.maps.LatLng(-41.8796878644579, 173.253788899916),
new google.maps.LatLng(-41.8822481637778, 173.268344966147),
new google.maps.LatLng(-41.8786522823522, 173.275111550231),
new google.maps.LatLng(-41.8742546336939, 173.274479800343),
new google.maps.LatLng(-41.8732906807109, 173.294185499591),
new google.maps.LatLng(-41.8645453302648, 173.30015821722),
new google.maps.LatLng(-41.8526937978386, 173.324863616736),
new google.maps.LatLng(-41.8426452493465, 173.333525716382),
new google.maps.LatLng(-41.8411869139832, 173.329103083531),
new google.maps.LatLng(-41.8299146980954, 173.341070183345),
new google.maps.LatLng(-41.8216318830467, 173.346026315512),
new google.maps.LatLng(-41.8117602493715, 173.355731350365),
new google.maps.LatLng(-41.7989335823136, 173.361552901148),
new google.maps.LatLng(-41.7839437835857, 173.363512350063),
new google.maps.LatLng(-41.77638393273, 173.359490416568),
new google.maps.LatLng(-41.7721915493203, 173.37491816662),
new google.maps.LatLng(-41.7278774819674, 173.371295498547),
new google.maps.LatLng(-41.7126648989409, 173.399894782964),
new google.maps.LatLng(-41.7158585314688, 173.406099832761),
new google.maps.LatLng(-41.7029475161459, 173.406105332949),
new google.maps.LatLng(-41.7006154749453, 173.396414907813),
new google.maps.LatLng(-41.6950182034676, 173.418071903652),
new google.maps.LatLng(-41.6849406375909, 173.437712820713),
new google.maps.LatLng(-41.6610444276969, 173.456616656216),
new google.maps.LatLng(-41.6428315039764, 173.483170125579),
new google.maps.LatLng(-41.6413650660878, 173.492052293058),
new google.maps.LatLng(-41.6523079231347, 173.495945732232),
new google.maps.LatLng(-41.6532228897271, 173.504847120869),
new google.maps.LatLng(-41.6451118353034, 173.50732606858),
new google.maps.LatLng(-41.6407846951499, 173.516185627173),
new google.maps.LatLng(-41.6445021674297, 173.537177606554),
new google.maps.LatLng(-41.642078621125, 173.546050891916),
new google.maps.LatLng(-41.6286651358817, 173.561181858147),
new google.maps.LatLng(-41.6252587544493, 173.575759079571),
new google.maps.LatLng(-41.6060847684001, 173.598446788182),
new google.maps.LatLng(-41.6002946852839, 173.612359992904),
new google.maps.LatLng(-41.6158616566393, 173.641713029551),
new google.maps.LatLng(-41.6245412798529, 173.622746269031),
new google.maps.LatLng(-41.6316475360809, 173.630434926173),
new google.maps.LatLng(-41.6320442773524, 173.645046508288),
new google.maps.LatLng(-41.6410406987917, 173.655298119162)
];
riskMap = new google.maps.Polygon({
	path: zone1,
	strokeColor: "#15acbe",
	strokeOpacity: 1.0,
	strokeWeight: 3,
	fillColor: "#15acbe",
	fillOpacity: 0.5
});
riskMap.setMap(map);

// Kaikoura South 
var zone2 = [
new google.maps.LatLng(-42.2876420993103, 173.681335950491),
new google.maps.LatLng(-42.3070509990589, 173.695175383337),
new google.maps.LatLng(-42.3102214398571, 173.719383005317),
new google.maps.LatLng(-42.326150963655, 173.742619183682),
new google.maps.LatLng(-42.3511381340351, 173.697876862753),
new google.maps.LatLng(-42.3751864725339, 173.683514729609),
new google.maps.LatLng(-42.3931900549405, 173.68110904324),
new google.maps.LatLng(-42.4074464246234, 173.685039150528),
new google.maps.LatLng(-42.4153497774817, 173.69398652518),
new google.maps.LatLng(-42.4119558404051, 173.703663504935),
new google.maps.LatLng(-42.4157629780081, 173.710028562841),
new google.maps.LatLng(-42.4188903938887, 173.70596718022),
new google.maps.LatLng(-42.4197485754211, 173.724602762208),
new google.maps.LatLng(-42.4245669841108, 173.725019168212),
new google.maps.LatLng(-42.4347391794354, 173.708719859793),
new google.maps.LatLng(-42.4380704251518, 173.691052361567),
new google.maps.LatLng(-42.4349503173988, 173.685696320847),
new google.maps.LatLng(-42.4304621389397, 173.678713550629),
new google.maps.LatLng(-42.4129526223053, 173.67164692303),
new google.maps.LatLng(-42.4146942580388, 173.642048073431),
new google.maps.LatLng(-42.4284449515187, 173.59446749306),
new google.maps.LatLng(-42.4477290461009, 173.583238591913),
new google.maps.LatLng(-42.4590575199346, 173.547907116747),
new google.maps.LatLng(-42.4786358381944, 173.528790089124),
new google.maps.LatLng(-42.4841274926846, 173.530328537951),
new google.maps.LatLng(-42.4981595700402, 173.519274979921),
new google.maps.LatLng(-42.505958394227, 173.508958748756),
new google.maps.LatLng(-42.5455770001515, 173.50074449481),
new google.maps.LatLng(-42.5507682283164, 173.5052099897),
new google.maps.LatLng(-42.5540958460775, 173.517642738324),
new google.maps.LatLng(-42.5650685069873, 173.509260979118),
new google.maps.LatLng(-42.5654305703482, 173.501010703762),
new google.maps.LatLng(-42.5555631307024, 173.490186470474),
new google.maps.LatLng(-42.5551416654282, 173.483412409866),
new google.maps.LatLng(-42.5362063191546, 173.465393604909),
new google.maps.LatLng(-42.5424610484268, 173.458944683075),
new google.maps.LatLng(-42.5426847768813, 173.448947107067),
new google.maps.LatLng(-42.5391639454013, 173.435343617673),
new google.maps.LatLng(-42.5302233353503, 173.416073165925),
new google.maps.LatLng(-42.5280380799967, 173.404628800572),
new google.maps.LatLng(-42.5249100449447, 173.387535350321),
new google.maps.LatLng(-42.5094481113417, 173.381481372637),
new google.maps.LatLng(-42.5031430553832, 173.394676498767),
new google.maps.LatLng(-42.5088974852465, 173.398474992732),
new google.maps.LatLng(-42.5148105505529, 173.427740551218),
new google.maps.LatLng(-42.4886311692841, 173.429700583422),
new google.maps.LatLng(-42.4724578871493, 173.435028093759),
new google.maps.LatLng(-42.4700860463013, 173.440744496592),
new google.maps.LatLng(-42.4545239879741, 173.433903900293),
new google.maps.LatLng(-42.4490871424279, 173.42205140453),
new google.maps.LatLng(-42.4428038449269, 173.420479338984),
new google.maps.LatLng(-42.425110159503, 173.400468246184),
new google.maps.LatLng(-42.4192722315946, 173.411762419913),
new google.maps.LatLng(-42.4110984392261, 173.402878046858),
new google.maps.LatLng(-42.4152214153842, 173.386226672642),
new google.maps.LatLng(-42.4049226419114, 173.378709672628),
new google.maps.LatLng(-42.4014511161943, 173.385337816253),
new google.maps.LatLng(-42.3900114490911, 173.419570283339),
new google.maps.LatLng(-42.389916397377, 173.446772683234),
new google.maps.LatLng(-42.3827406824022, 173.449366982934),
new google.maps.LatLng(-42.3795145994478, 173.470529716212),
new google.maps.LatLng(-42.3780886476128, 173.489862200552),
new google.maps.LatLng(-42.3855064326581, 173.508370766829),
new google.maps.LatLng(-42.362820280393, 173.563328410987),
new google.maps.LatLng(-42.3709274324375, 173.582461816522),
new google.maps.LatLng(-42.3698126568457, 173.587558581093),
new google.maps.LatLng(-42.3671816822859, 173.588654966123),
new google.maps.LatLng(-42.3598522233595, 173.573902379259),
new google.maps.LatLng(-42.3502215822343, 173.568524149547),
new google.maps.LatLng(-42.3458658637934, 173.576212866346),
new google.maps.LatLng(-42.3432000972066, 173.587916849774),
new google.maps.LatLng(-42.3467311985112, 173.589407133372),
new google.maps.LatLng(-42.3385138000255, 173.618019467238),
new google.maps.LatLng(-42.3322020494763, 173.620107467143),
new google.maps.LatLng(-42.325205031503, 173.651508299396),
new google.maps.LatLng(-42.3145117971005, 173.656823616478),
new google.maps.LatLng(-42.3140140314001, 173.658320066642),
new google.maps.LatLng(-42.3105323819724, 173.666996732881),
new google.maps.LatLng(-42.3007306141662, 173.656532699747),
new google.maps.LatLng(-42.2944848001413, 173.670674466423),
new google.maps.LatLng(-42.2813754994494, 173.675376483884),
new google.maps.LatLng(-42.2743194387085, 173.672055963855),
new google.maps.LatLng(-42.2791438816155, 173.680345183391),
new google.maps.LatLng(-42.2876420993103, 173.681335950491)

];
riskMap2 = new google.maps.Polygon({
	path: zone2,
	strokeColor: "#f9380b",
	strokeOpacity: 1.0,
	strokeWeight: 3,
	fillColor: "#f9380b",
	fillOpacity: 0.5,
});
riskMap2.setMap(map);

var marker = new MarkerWithLabel({
      position: new google.maps.LatLng(0,0),
      draggable: false,
      raiseOnDrag: false,
      map: map,
      labelContent: "Zone 1",
      labelAnchor: new google.maps.Point(30, 20),
      labelClass: "labels", // the CSS class for the label
      labelStyle: {opacity: 1.0},
      icon: "http://placehold.it/1x1",
      visible: false
     });
	 
 google.maps.event.addListener(riskMap, "mousemove", function(event) {
        marker.setPosition(event.latLng);
        marker.setVisible(true);
      });
      google.maps.event.addListener(riskMap, "mouseout", function(event) {
        marker.setVisible(false);
      });

var marker2 = new MarkerWithLabel({
      position: new google.maps.LatLng(0,0),
      draggable: false,
      raiseOnDrag: false,
      map: map,
      labelContent: "Zone 2",
      labelAnchor: new google.maps.Point(30, 20),
      labelClass: "labels", // the CSS class for the label
      labelStyle: {opacity: 1.0},
      icon: "http://placehold.it/1x1",
      visible: false
     });
	 
 google.maps.event.addListener(riskMap2, "mousemove", function(event) {
        marker2.setPosition(event.latLng);
        marker2.setVisible(true);
      });
      google.maps.event.addListener(riskMap2, "mouseout", function(event) {
        marker2.setVisible(false);
      });



} 
</script>
   
	
   </head><body>
   <!-- end header-container-->
   <div id="map_canvas"></div>
   <script type="text/javascript">initialize();</script>
   </body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
Great job tommyBoy,
that has solved the problem perfectly.
Cheers,
Neil
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.