i want to use mouse drag in angularjs to change style of html element.i use this module to inject mouse drag in angular.Now how change li element style with mouse drag? in fact my sample code is a time line so when a user mouse drag on this time line years change.
/**!
* AngularJS mouse drag directive
* #author Ozan Tunca <ozan#ozantunca.org>
* #version 0.1.0
*/
(function() {
var ngMousedrag = angular.module('ngMouseDrag', []);
ngMousedrag.directive('ngMousedrag', ['$document', function ngMousedrag($document) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var endTypes = 'touchend mouseup'
, moveTypes = 'touchmove mousemove'
, startTypes = 'touchstart mousedown'
, startX, startY;
element.bind(startTypes, function startDrag(e) {
e.preventDefault();
startX = e.pageX;
startY = e.pageY;
$document.bind(moveTypes, function (e) {
e.dragX = e.pageX - startX;
e.dragY = e.pageY - startY;
e.startX = startX;
e.startY = startY;
scope.$event = e;
scope.$eval(attrs.ngMousedrag);
});
$document.bind(endTypes, function () {
$document.unbind(moveTypes);
});
});
}
};
}]);
})();
#draggable {
width: 200px;
height: 200px;
position: absolute;
background: red;
cursor: move;
top: 0;
left: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Angular Mousedrag Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div id="wrapper" ng-controller="Slider">
<div ng-init="years=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79]">
<ol id="draggable" ng-mousedrag="onMouseDrag($event);">
<li ng-repeat="y in years">{{y}}
</li>
</ol>
</div>
</div>
</div>
<script type="text/javascript">
(function() {
angular.module('myApp', ['ngMouseDrag'])
.controller('Slider', function($scope, $compile) {
$scope.dragY = 0;
$scope.onMouseDrag = function($event) {
var draggableObject = document.getElementById('draggable');
draggableObject.style.top = $event.pageY + 'px';
$scope.dragY = $event.pageY;
$scope.$digest();
}
});
angular.bootstrap(document, ['myApp']);
})();
</script>
</body>
</html>
Related
How to make Zooming effect like these, when hovering the image Sample Image
$(document).ready(function(){
var native_width = 0;
var native_height = 0;
//Now the mousemove function
$(".magnify").mousemove(function(e){
//When the user hovers on the image, the script will first calculate
//the native dimensions if they don't exist. Only after the native dimensions
//are available, the script will show the zoomed version.
if(!native_width && !native_height)
{
//This will create a new image object with the same image as that in .small
//We cannot directly get the dimensions from .small because of the
//width specified to 200px in the html. To get the actual dimensions we have
//created this image object.
var image_object = new Image();
image_object.src = $(".small").attr("src");
//This code is wrapped in the .load function which is important.
//width and height of the object would return 0 if accessed before
//the image gets loaded.
native_width = image_object.width;
native_height = image_object.height;
}
else
{
//x/y coordinates of the mouse
//This is the position of .magnify with respect to the document.
var magnify_offset = $(this).offset();
//We will deduct the positions of .magnify from the mouse positions with
//respect to the document to get the mouse positions with respect to the
//container(.magnify)
var mx = e.pageX - magnify_offset.left;
var my = e.pageY - magnify_offset.top;
//Finally the code to fade out the glass if the mouse is outside the container
if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
{
$(".large").fadeIn(100);
}
else
{
$(".large").fadeOut(100);
}
if($(".large").is(":visible"))
{
//The background position of .large will be changed according to the position
//of the mouse over the .small image. So we will get the ratio of the pixel
//under the mouse pointer with respect to the image and use that to position the
//large image inside the magnifying glass
var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width()/2)*-1;
var ry = Math.round(my/$(".small").height()*native_height - $(".large").height()/2)*-1;
var bgp = rx + "px " + ry + "px";
//Time to move the magnifying glass with the mouse
var px = mx - $(".large").width()/2;
var py = my - $(".large").height()/2;
//Now the glass moves with the mouse
//The logic is to deduct half of the glass's width and height from the
//mouse coordinates to place it with its center at the mouse coordinates
//If you hover on the image now, you should see the magnifying glass in action
$(".large").css({left: px, top: py, backgroundPosition: bgp});
}
}
})
})
/*Some CSS*/
* {margin: 0; padding: 0;}
.magnify {width: 200px; margin: 50px auto; position: relative;}
/*Lets create the magnifying glass*/
.large {
width: 175px; height: 175px;
position: absolute;
border-radius: 100%;
/*Multiple box shadows to achieve the glass effect*/
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
0 0 7px 7px rgba(0, 0, 0, 0.25),
inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
/*Lets load up the large image first*/
background: url('http://thecodeplayer.com/uploads/media/iphone.jpg') no-repeat;
/*hide the glass by default*/
display: none;
}
/*To solve overlap bug at the edges during magnification*/
.small { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Lets make a simple image magnifier -->
<div class="magnify">
<!-- This is the magnifying glass which will contain the original/large version -->
<div class="large"></div>
<!-- This is the small image -->
<img class="small" src="http://thecodeplayer.com/uploads/media/iphone.jpg" width="200"/>
</div>
<!-- Lets load up prefixfree to handle CSS3 vendor prefixes -->
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>
<!-- You can download it from http://leaverou.github.com/prefixfree/ -->
<!-- Time for jquery action -->
<script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js" type="text/javascript"></script>
Try this one
(function ($) {
$(document).ready(function() {
$('.xzoom, .xzoom-gallery').xzoom({zoomWidth: 400, title: true, tint: '#333', Xoffset: 15});
$('.xzoom2, .xzoom-gallery2').xzoom({position: '#xzoom2-id', tint: '#ffa200'});
$('.xzoom3, .xzoom-gallery3').xzoom({position: 'lens', lensShape: 'circle', sourceClass: 'xzoom-hidden'});
$('.xzoom4, .xzoom-gallery4').xzoom({tint: '#006699', Xoffset: 15});
$('.xzoom5, .xzoom-gallery5').xzoom({tint: '#006699', Xoffset: 15});
//Integration with hammer.js
var isTouchSupported = 'ontouchstart' in window;
if (isTouchSupported) {
//If touch device
$('.xzoom, .xzoom2, .xzoom3, .xzoom4, .xzoom5').each(function(){
var xzoom = $(this).data('xzoom');
xzoom.eventunbind();
});
$('.xzoom, .xzoom2, .xzoom3').each(function() {
var xzoom = $(this).data('xzoom');
$(this).hammer().on("tap", function(event) {
event.pageX = event.gesture.center.pageX;
event.pageY = event.gesture.center.pageY;
var s = 1, ls;
xzoom.eventmove = function(element) {
element.hammer().on('drag', function(event) {
event.pageX = event.gesture.center.pageX;
event.pageY = event.gesture.center.pageY;
xzoom.movezoom(event);
event.gesture.preventDefault();
});
}
xzoom.eventleave = function(element) {
element.hammer().on('tap', function(event) {
xzoom.closezoom();
});
}
xzoom.openzoom(event);
});
});
$('.xzoom4').each(function() {
var xzoom = $(this).data('xzoom');
$(this).hammer().on("tap", function(event) {
event.pageX = event.gesture.center.pageX;
event.pageY = event.gesture.center.pageY;
var s = 1, ls;
xzoom.eventmove = function(element) {
element.hammer().on('drag', function(event) {
event.pageX = event.gesture.center.pageX;
event.pageY = event.gesture.center.pageY;
xzoom.movezoom(event);
event.gesture.preventDefault();
});
}
var counter = 0;
xzoom.eventclick = function(element) {
element.hammer().on('tap', function() {
counter++;
if (counter == 1) setTimeout(openfancy,300);
event.gesture.preventDefault();
});
}
function openfancy() {
if (counter == 2) {
xzoom.closezoom();
$.fancybox.open(xzoom.gallery().cgallery);
} else {
xzoom.closezoom();
}
counter = 0;
}
xzoom.openzoom(event);
});
});
$('.xzoom5').each(function() {
var xzoom = $(this).data('xzoom');
$(this).hammer().on("tap", function(event) {
event.pageX = event.gesture.center.pageX;
event.pageY = event.gesture.center.pageY;
var s = 1, ls;
xzoom.eventmove = function(element) {
element.hammer().on('drag', function(event) {
event.pageX = event.gesture.center.pageX;
event.pageY = event.gesture.center.pageY;
xzoom.movezoom(event);
event.gesture.preventDefault();
});
}
var counter = 0;
xzoom.eventclick = function(element) {
element.hammer().on('tap', function() {
counter++;
if (counter == 1) setTimeout(openmagnific,300);
event.gesture.preventDefault();
});
}
function openmagnific() {
if (counter == 2) {
xzoom.closezoom();
var gallery = xzoom.gallery().cgallery;
var i, images = new Array();
for (i in gallery) {
images[i] = {src: gallery[i]};
}
$.magnificPopup.open({items: images, type:'image', gallery: {enabled: true}});
} else {
xzoom.closezoom();
}
counter = 0;
}
xzoom.openzoom(event);
});
});
} else {
//If not touch device
//Integration with fancybox plugin
$('#xzoom-fancy').bind('click', function(event) {
var xzoom = $(this).data('xzoom');
xzoom.closezoom();
$.fancybox.open(xzoom.gallery().cgallery, {padding: 0, helpers: {overlay: {locked: false}}});
event.preventDefault();
});
//Integration with magnific popup plugin
$('#xzoom-magnific').bind('click', function(event) {
var xzoom = $(this).data('xzoom');
xzoom.closezoom();
var gallery = xzoom.gallery().cgallery;
var i, images = new Array();
for (i in gallery) {
images[i] = {src: gallery[i]};
}
$.magnificPopup.open({items: images, type:'image', gallery: {enabled: true}});
event.preventDefault();
});
}
});
})(jQuery);
<link href="https://unpkg.com/xzoom#1.0.7/dist/xzoom.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://unpkg.com/xzoom#1.0.7/dist/xzoom.min.js"></script>
<script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js"></script>
<body>
<div class="container">
<!-- default start -->
<section id="default" class="padding-top0">
<div class="row">
<div class="large-12 column"><h3>Product Zooming</h3></div>
<hr>
<div class="large-5 column">
<div class="xzoom-container">
<img class="xzoom" id="xzoom-default" src="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/preview/01_b_car.jpg" xoriginal="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/original/01_b_car.jpg" />
<div class="xzoom-thumbs">
<img class="xzoom-gallery" width="80" src="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/thumbs/01_b_car.jpg" xpreview="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/preview/01_b_car.jpg" title="The description goes here">
<img class="xzoom-gallery" width="80" src="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/preview/02_o_car.jpg" title="The description goes here">
<img class="xzoom-gallery" width="80" src="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/preview/03_r_car.jpg" title="The description goes here">
<img class="xzoom-gallery" width="80" src="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/preview/04_g_car.jpg" title="The description goes here">
</div>
</div>
</div>
<div class="large-7 column"></div>
</div>
</section>
<!-- default end -->
</div>
</body>
Hi i have created this script to hide a text after 6 seconds, But I want that the text must reappear and disappear again back to the infinite every 6 seconds how I can create this kind of HTML script?
<h1 style="text-align: left;" id="xhide">Hello World</h1>
<script type="text/javascript">
function hide(id) {
d= document.getElementById(id)
d.setAttribute('style','display:none;')
}
setTimeout(function () {
hide('xhide')
}, 6000);
</script>
You can try updated code as per your need:
<h1 style="text-align: left;" id="xhide">Hello World</h1>
<script type="text/javascript">
var flag=true;
function hide(id) {
d= document.getElementById(id);
d.setAttribute('style','display:none;');
}
function show(id) {
d= document.getElementById(id)
d.setAttribute('style','display:block;')
}
setInterval(function() {
if(flag) {
show('xhide');
flag=false;
} else {
hide('xhide');
flag=true;
}
}, 6000);
</script>
try this blink element
<script type="text/javascript">
function blink() {
var blinks = document.getElementsByTagName('blink');
for (var i = blinks.length - 1; i >= 0; i--) {
var s = blinks[i];
s.style.visibility = (s.style.visibility === 'visible') ? 'hidden' : 'visible';
}
window.setTimeout(blink, 6000);
}
if (document.addEventListener) document.addEventListener("DOMContentLoaded", blink, false);
else if (window.addEventListener) window.addEventListener("load", blink, false);
else if (window.attachEvent) window.attachEvent("onload", blink);
else window.onload = blink;
</script>
<blink>Text to blink here</blink>
The following code will hide the text and re-display it with 6 second intervals in between.
var textshown = false;
$(document).ready(function() {
setInterval(function(){
if(textshown == false) {
$('#xhide').show();
textshown = true;
} else {
$('#xhide').hide();
textshown = false;
}
}, 6000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 style=" text-align: left; " id="xhide">Hello World</h1>
You can do this by using toggle function on classList
function hide(elementId) {
document.getElementById(elementId).classList.toggle('hidden');
}
setInterval(hide, 6000, 'xhide');
.hidden {
display: none;
}
<h1 id="xhide">Hello World</h1>
I am working on a pdf viewer in angular and I want to display a div on top of a dynamic object. The div displays above the object in every browser but IE. To see this in action here is a plunker : http://plnkr.co/edit/MVzMvS4IwYPC8rEx5M4J?p=preview .
You'll see that it works fine in Chrome, and FireFox but not in IE. Any help would be nice. or even a point in the right direction.
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope,$sce) {
$scope.name = 'World';
$scope.documentSrc = "http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf";
$scope.frameSrc = $sce.trustAsHtml($scope.documentSrc);
$scope.frameCode = $sce.trustAsHtml('<object data="http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf" type="application/pdf"></object>');
$scope.display = false;
$scope.changeDoc = function(){
$scope.documentSrc = 'https://media.amazonwebservices.com/AWS_Web_Hosting_Best_Practices.pdf';
};
$scope.changeDocAgain = function (){
$scope.documentSrc = 'http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf';
};
$scope.displayDiv = function (){
if ( $scope.display == false){
$scope.display = true;
} else{
$scope.display = false;
}
}})
.directive('embedSrc', function () {
return {
restrict: 'A',
link: function(scope, element, attrs) {
scope.$watch(
function() {
return attrs.embedSrc;
},
function() {
element.attr('src', attrs.embedSrc);
}
);
}
};
})
.directive('dynamicObject', function($parse) {
return {
restrict: 'E',
link: function(scope, element, attrs) {
scope.$watch(function() {
return $parse(attrs.data)(scope);
}, function(newValue) {
element.html('<object data="' + newValue + '" type="application/pdf"></object>');
});
}
};
});
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="changeDoc()">Change Doc</button>
<button ng-click="changeDocAgain()">Change Again Doc</button>
<br/><br/>
<button ng-click="displayDiv()" class="mp-float-left mp-more_options_button">
Search Options
</button>
<div ng-if="display" class="displayDiv">displayMe!</div>
<br/>
<dynamic-object data="documentSrc"></dynamic-object>
style.css
.displayDiv{
position: absolute;
background: red;
width: 280px !important;
z-index: 1000;
padding:10px 10px 0px !important;
height: 50px;
}
.pdfView{
height: 710px;
width :100%;
z-index : 50;
}
Above is the demo code used in plunker as an example. The below code is what i have in my project.
.directive('objectReloadable', function ($rootScope) {
var link = function (scope, element, attrs) {
var currentElement = element;
var watchFunction = function () {
return scope.searchCriteriaService.documentSrc;
};
var updateHTML = function (newValue) {
scope.searchCriteriaService.documentSrc = newValue;
var html = '';
if (attrs.datatype == 'pdf') {
html = '<iframe type="application/pdf" src="' + newValue + '" class="mp-document-size" ></iframe>';
} else if (attrs.datatype == 'html') {
html = '<object data="' + newValue + '" type="text/html" class="mp-document-size"></object>';
} else {
html = '<img src="' + newValue + '" width="100%" style="overflow:scroll"/>'
}
var replacementElement = angular.element(html);
currentElement.replaceWith(replacementElement);
currentElement = replacementElement;
};
scope.$watch(watchFunction, function (newValue, oldValue) {
if (newValue !== oldValue) {
updateHTML(newValue);
}
});
if (scope.searchCriteriaService.documentSrc) {
updateHTML(scope.searchCriteriaService.documentSrc);
}
};
return {
restrict: 'E',
scope: false,
link: link
};
})
The following is the smallest working app.js I could make. It uses an iframe and Google Docs viewer to work, found here and here.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope,$sce) {
$scope.name = 'World';
$scope.iframeSrc = "http://docs.google.com/gview?url=http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf&embedded=true";
$scope.display = false;
$scope.changeDoc = function(){
$scope.iframeSrc = 'http://docs.google.com/gview?url=https://media.amazonwebservices.com/AWS_Web_Hosting_Best_Practices.pdf&embedded=true';
};
$scope.changeDocAgain = function (){
$scope.iframeSrc = 'http://docs.google.com/gview?url=http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf&embedded=true';
};
$scope.displayDiv = function (){
if ( $scope.display == false){
$scope.display = true;
} else{
$scope.display = false;
}
}
})
.directive('iframeSrc', function () {
return {
restrict: 'A',
link: function(scope, element, attrs) {
scope.$watch(
function() {
return attrs.iframeSrc;
},
function() {
element.attr('src', attrs.iframeSrc);
}
);
}
};
})
.directive('dynamicObject', function($parse) {
return {
restrict: 'E',
link: function(scope, element, attrs) {
scope.$watch(function() {
return $parse(attrs.data)(scope);
}, function(newValue) {
element.html('<iframe src="' + newValue + '" type="application/pdf"></iframe>');
});
}
};
});
.displayDiv{
position: absolute;
background: red;
width: 280px !important;
z-index: 1000;
padding:10px 10px 0px !important;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>AngularJS Plunker</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="changeDoc()">Change Doc</button>
<button ng-click="changeDocAgain()">Change Again Doc</button>
<br/><br/>
<button ng-click="displayDiv()" class="mp-float-left mp-more_options_button">
Search Options
</button>
<div ng-if="display" class="displayDiv">displayMe!</div>
<br/>
<dynamic-object data="iframeSrc"></dynamic-object>
</body>
</html>
I'm placing description on a text area by retrieving database using jsp, like follows;
<textarea readonly=""><%= item.getContent() %></textarea>
so I want to show the whole content of textarea in page without scroll bar, how can I do it?
You can refer to following link
http://jsfiddle.net/TDAcr/
<head>
<title>autoresizing textarea</title>
<style type="text/css">
textarea {
border: 0 none white;
overflow-y: auto;
padding: 0;
outline: none;
background-color: #D0D0D0;
resize: none;
}
</style>
<script type="text/javascript">
var observe;
if (window.attachEvent) {
observe = function (element, event, handler) {
element.attachEvent('on'+event, handler);
};
}
else {
observe = function (element, event, handler) {
element.addEventListener(event, handler, false);
};
}
function init (maxH) {
var text = document.getElementById('text');
var maxHeight=maxH;
var oldHeight= text.scrollHeight;
var newHeight;
function resize () {
text.style.height = 'auto';
newHeight= text.scrollHeight;
if(newHeight>oldHeight && newHeight>maxHeight )
{
text.style.height=oldHeight+'px';
}
else{
text.style.height = newHeight+'px';
oldHeight= text.scrollHeight;
}
}
/* 0-timeout to get the already changed text */
function delayedResize () {
window.setTimeout(resize, 0);
}
observe(text, 'change', resize);
observe(text, 'cut', delayedResize);
observe(text, 'paste', delayedResize);
observe(text, 'drop', delayedResize);
observe(text, 'keydown', delayedResize);
text.focus();
text.select();
resize();
}
</script>
</head>
<body onload="init(200);">
<textarea rows="1" style="height:1em;" id="text"></textarea>
</body>
</html>
I have this code, I'm trying to toggle some kml layers. The problem is that when I click the marker it isn't showing the infowindow.
Maybe someone can show me my error.
Here is the CODE:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=IzaSyAvj6XNNPO8YPFbkVR8KcTl5LK1ByRHG1E&sensor=false">
</script>
<script type="text/javascript">
var map;
// lets define some vars to make things easier later
var kml = {
a: {
name: "Productores",
url: "https://maps.google.hn/maps/ms?authuser=0&vps=2&hl=es&ie=UTF8&msa=0&output=kml&msid=200984447026903306654.0004c934a224eca7c3ad4"
}
// keep adding more if you like
};
// initialize our goo
function initializeMap() {
var options = {
center: new google.maps.LatLng(13.324182,-87.080071),
zoom: 8,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById("map_canvas"), options);
createTogglers();
};
google.maps.event.addDomListener(window, 'load', initializeMap);
// the important function... kml[id].xxxxx refers back to the top
function toggleKML(checked, id) {
if (checked) {
var layer = new google.maps.KmlLayer(kml[id].url, {
preserveViewport: true,
suppressInfoWindows: true
});
// store kml as obj
kml[id].obj = layer;
kml[id].obj.setMap(map);
}
else {
kml[id].obj.setMap(null);
delete kml[id].obj;
}
};
// create the controls dynamically because it's easier, really
function createTogglers() {
var html = "<form><ul>";
for (var prop in kml) {
html += "<li id=\"selector-" + prop + "\"><input type='checkbox' id='" + prop + "'" +
" onclick='highlight(this,\"selector-" + prop + "\"); toggleKML(this.checked, this.id)' \/>" +
kml[prop].name + "<\/li>";
}
html += "<li class='control'><a href='#' onclick='removeAll();return false;'>" +
"Remove all layers<\/a><\/li>" +
"<\/ul><\/form>";
document.getElementById("toggle_box").innerHTML = html;
};
function removeAll() {
for (var prop in kml) {
if (kml[prop].obj) {
kml[prop].obj.setMap(null);
delete kml[prop].obj;
}
}
};
// Append Class on Select
function highlight(box, listitem) {
var selected = 'selected';
var normal = 'normal';
document.getElementById(listitem).className = (box.checked ? selected: normal);
};
</script>
<style type="text/css">
.selected { font-weight: bold; }
</style>
</head>
<body>
<div id="map_canvas" style="width: 50%; height: 200px;"></div>
<div id="toggle_box" style="position: absolute; top: 200px; right: 1000px; padding: 20px; background: #fff; z-index: 5; "></div>
</body>
</html>
The "suppressInfoWindows:true" in the KmlLayerOptions in the KmlLayer constructor causes the infowindows to be suppressed.