I'm trying to load a dijit calendar on click of dijit icon button with specific dates disabled,
for this I tried two ways
first one:
loading calendar in js function
getting error as trying to register "id==mycal" but that id is already registered ."
<button data-dojo-type="dijit.form.Button" data-dojo-attach-event="onClick:oncldriconclick" data-dojo-props="iconClass:' dijitIconTable', showLabel: false" type="button"></button>
<div id="mycal" data-dojo-attach-event="onclick: _onDayClick" ></div>
oncldriconclick : function() {
disable_before_days = 2;
var calendar = new Calendar({
value: new Date(),
isDisabledDate:function(date, localString){
return dojoDate.difference(date, new Date(), "day") > disable_before_days
|| locale.isWeekend(date)
|| date > new Date() ;
}
}, "mycal");
},
onDayClick:function(evt){
alert(evt);
},
Second method: loading calendar in postcreate of js function with var calendar = registry.byId("mycal"); if I load with below html and passing isdisableDate arguemnts in postcreate function , the disable dates are not applying on startup but they are applying only after the selection of some date I need this to be applied on startup of calendar
<button data-dojo-type="dijit.form.Button" data-dojo-attach-event="onClick:oncldriconclick" data-dojo-props="iconClass:' dijitIconTable', showLabel: false" type="button"></button>
<div id="mycal" class="mycal" data-dojo-attach-point="mycal" data-dojo-type="dijit.Calendar" data-dojo-attach-event="onChange: _onDayClick" ></div>
postCreate: function(){
disable_before_days = 2;
var calendar = registry.byId("mycal");
console.log(locale );
calendar.isDisabledDate = function(date, localString){
return dojoDate.difference(date, new Date(), "day") > disable_before_days || locale.isWeekend(date) || date > new Date() ;
}
},
how can I get disabled dates on calendar startup with these any one of the methods.
the error is because you are creating a widget ( new ) with id mycal that was already instantiated ( defined in dojo registry ) ,
all you need is put the instantiation in postCreate and in the button just toggle display using the "dojo/dom-style" class :
calendar:null,
postCreate: function(){
calendar = new Calendar({
value: new Date(),
isDisabledDate:function(date, localString){
return dojoDate.difference(date, new Date(), "day") > disable_before_days
|| locale.isWeekend(date)
|| date > new Date() ;
}
}, "mycal");
},
then your button will have only show or hide calendar ,
oncldriconclick : function() {
if(domStyle.get(this.calendar.domNode,"display") === "none")
domStyle.set(this.calendar.domNode,"display","table");
else
domStyle.set(this.calendar.domNode,"display","none");
}
add also css to hide calendar on startup
#mycal {
display:none;
}
require(["dojo/parser",
"dijit/form/Button",
"dijit/Calendar",
"dojo/dom-style",
"dijit/registry",
"dojo/date",
"dojo/date/locale",
"dojo/ready",
"dojo/domReady!"
], function(parser, Button, Calendar,domStyle, registry, dojoDate, locale, ready){
disable_before_days = 52;
ready(function(){
var button = registry.byId("btn");
button.on("click",function(e){
if(domStyle.get(calendar.domNode,"display") === "none")
domStyle.set(calendar.domNode,"display","table");
else
domStyle.set(calendar.domNode,"display","none");
});
var calendar = new Calendar({
value: new Date(),
isDisabledDate:function(date, localString){
return dojoDate.difference(date, new Date(), "day") > disable_before_days
|| locale.isWeekend(date)
|| date > new Date() ;
}
}, "mycal");
});
});
html,
body {
height: 100%;
padding: 0;
margin: 0;
font-family: Lucida Sans, Lucida Grande, Arial !important;
font-size: 13px !important;
background: white;
color: #333;
}
#mycal .dijitCalendarDisabledDate {
background-color: #333;
text-decoration: none;
}
#mycal .dijitCalendarContainer {
margin: 25px auto;
}
#mycal {
display:none;
}
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/calendar/themes/claro/Calendar.css" rel="stylesheet" />
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet" />
<script type="text/javascript">
dojoConfig = {
isDebug: true,
async: true,
parseOnLoad: true
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<body class="claro">
<div id="btn" data-dojo-type="dijit/form/Button">Show / Hide</div><br />
<div id="mycal" style="display:none"></div>
</body>
Related
I am new to Arcgis maps and using ArcGIS Javascript 4.2 library. Currently the features are showing up on the map and I am trying to go to feature and open it's popup programmatically. below is my code to query the features which is working fine.
var query = layer.createQuery();
query.where = "key= " + dataItem.key+ "";
query.returnGeometry = true;
query.returnCentroid = true;
query.returnQueryGeometry = true;
layer.queryFeatures(query).then(function (results) {
//I am getting the feature results here.
//trying to navigate to feature and open popup
});
Note: I tried using the following code from documentation which is working fine but I don't have the center as the features are polylines in my case.
view.goTo({center: [-126, 49]})
First, View goTo method has several options, including just using a geometry wich I think would be a better option for your case, zoom to a polyline.
Second to open the popup you just need to use the open method and you can pass there the features to show.
Check this example I put for you, has both suggestions,
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS API for JavaScript Hello World App</title>
<style>
html,
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#selectDiv {
height: 30px;
width: 100%;
margin: 5px;
}
#cableNameSelect {
height: 30px;
width: 300px;
}
#cableGoToButton {
height: 30px;
width: 100px;
}
#viewDiv {
height: 500px;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/main.css">
</head>
<body>
<div id="selectDiv">
<select id="cableNameSelect"></select>
<button id="cableGoToButton">GO TO</button>
</div>
<div id="viewDiv">
</div>
<script src="https://js.arcgis.com/4.15/"></script>
<script>
require([
'esri/Map',
'esri/views/MapView',
'esri/layers/FeatureLayer'
], function (Map, MapView, FeatureLayer) {
const cableNameSelect = document.getElementById("cableNameSelect");
const cableGoToButton = document.getElementById("cableGoToButton");
const map = new Map({
basemap: 'hybrid'
});
const view = new MapView({
container: 'viewDiv',
map: map,
zoom: 10,
center: {
latitude: 47.4452,
longitude: -121.4234
}
});
view.popup.set("dockOptions", {
buttonEnabled: false,
position: "top-right"
});
const layer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/cables/FeatureServer/0",
popupTemplate: {
title: "{NAME}",
outFields: ["*"],
content: [{
type: 'fields',
fieldInfos: [
{
fieldName: "length"
},
{
fieldName: "owners"
},
{
fieldName: "rfs"
}
]
}],
}
});
map.add(layer);
layer.queryFeatures({
where: "1=1",
outFields: ["Name"],
returnGeometry: false
}).then(function(results) {
for(const graphic of results.features) {
cableNameSelect.appendChild(new Option(graphic.attributes.Name, graphic.attributes.Name));
}
});
cableGoToButton.onclick = function() {
if (!cableNameSelect.value) {
return;
}
cableGoToButton.disabled = true;
layer.queryFeatures({
where: `Name='${cableNameSelect.value}'`,
outFields: ["*"],
returnGeometry: true
}).then(function (results) {
cableGoToButton.disabled = false;
if (!results.features) {
return;
}
view.goTo(results.features[0].geometry);
view.popup.open({
features: [results.features[0]]
})
})
};
});
</script>
</body>
</html>
In Laravel 5.8 / vuejs 2.6 / vuex / mysql app I need to add stripe elements from https://stripe.com/docs/stripe-js,
http://prntscr.com/phflkd
and for this in resources/views/index.blade.php I added line:
#include('footer')
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('js/waves.min.js') }}"></script>
<script src="{{ asset('js/jquery.slimscroll.min.js') }}"></script>
<script src="{{ asset('js/powerange.js') }}"></script>
<script src="{{ asset('js/appInit.js') }}"></script>
<script src="{{ asset('js/app.js') }}{{ "?dt=".time() }}"></script>
<script src="https://js.stripe.com/v3/"></script>
</html>
and in my vue form I init stripe in initStripe() method, which is called in mount event :
<template>
<div class="page-content col-md-offset-2">
<div class="sign-up container-fluid justify-content-center" style="max-width: 460px;">
<hr>
<hr>
<form action="/charge" method="post" id="payment-form">
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element">
<!-- A Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
</div>
<button>Submit Payment</button>
</form>
<button type="button"
class="btn btn-outline-pink btn-round waves-effect waves-light cancel-btn mr-5" #click.prevent="cancelSelectedSubscription()">
<i :class="getHeaderIcon('cancel')"></i> Cancel
</button>
</div>
</div>
</template>
<script>
import {bus} from '../../../../app';
import appMixin from '../../../../appMixin';
import Vue from 'vue';
export default {
data: function () {
return {
is_page_loaded: false,
}
},
name: 'selectedSubscription',
created() {
if ( typeof this.currentLoggedUser.id != 'number' ) {
this.showPopupMessage("Access", 'Your session is expired !', 'error');
this.$store.commit('logout');
}
this.message = '';
}, // created) {
mounted() {
this.is_page_loaded = true
this.setAppTitle("Selected Subscription", 'Selected Subscription Details', bus);
this.initStripe();
}, // mounted() {
mixins: [appMixin],
methods: {
cancelSelectedSubscription() {
this.$router.push({path: '/personal-details'});
},
initStripe()
{
console.log("Stripe -1::")
// Create a Stripe client.
var stripe = Stripe('pk_test_NNNN');
console.log("Stripe -2::")
// Create an instance of Elements.
var elements = stripe.elements();
console.log("Stripe -3::")
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: '#32325d',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element.
var card = elements.create('card', {style: style});
console.log("Stripe -4::")
// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', function (event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
console.log("Stripe -5::")
// Handle form submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function (event) {
event.preventDefault();
stripe.createToken(card).then(function (result) {
if (result.error) {
// Inform the user if there was an error.
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server.
this.stripeTokenHandler(result.token);
}
});
});
}, // initStripe() {
// Submit the form with the token ID.
stripeTokenHandler(token) {
// Insert the token ID into the form so it gets submitted to the server
var form = document.getElementById('payment-form');
alert( "stripeTokenHandler form::"+var_dump(form) )
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
// Submit the form
form.submit();
},
}, // methods: {
computed: {
currentLoggedUser() {
return this.$store.getters.currentLoggedUser;
},
...
} //computed: {
}
</script>
<style lang="css">
/**
* The CSS shown here will not be introduced in the Quickstart guide, but shows
* how you can use CSS to style your Element's container.
*/
.StripeElement {
box-sizing: border-box;
height: 40px;
padding: 10px 12px;
border: 1px solid transparent;
border-radius: 4px;
background-color: white;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}
.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
border-color: #fa755a;
}
.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}
</style>
As result in browser's console I see console messages, “Credit or debit card” label and
uncolored “Submit Payment” button : https://imgur.com/a/TRWc23I
If to click on “Submit Payment” button I see :https://imgur.com/a/CdBSfMC
Is way I added Stripe to my vue form invalid? Which is valid way?
I suppose that I do not have to insert any additive elements/code in this block :
<div id="card-element">
<!-- A Stripe Element will be inserted here. -->
</div>
and they must be uploaded automatically on my form upload ?
and which method have I to use as in my app I save my data with axios?
I made all correctly, it was styles issue.
I replaced css from the example with lines :
#card-element {
line-height: 1.5rem;
margin: 10px;
padding: 10px;
}
.__PrivateStripeElement {
min-width: 300px !important;
min-height: 40px !important;
color: $text_color;
}
and my form was ready for payment!
I'm looking for a way of getting QTip to concurrently display tooltips for each node in a Cytoscape.js graph, such that they are always displayed and anchored to the nodes in the graph without the user having to click or mouseover the node.
I got close with the code below:
$(document).ready(function(){
cy.nodes().qtip({
content: function(){ return 'Station: ' + this.id() +
'</br> Next Train: ' + this.data('nextTrain') +
'</br> Connections: ' + this.degree();
},
hide: false,
show: {
when: false,
ready: true
}
})
})
The above code displays tooltips on $(document).ready, but they are all located at one node in the Cytoscape graph and they disappear when I zoom in or pan at all.
The goal is to have tooltips anchored to each node in my graph such that when I zoom in and pan around they remain fixed to that node. I'm not sure if there is an easier way to do this just using Cytoscape (i.e., multi-feature labelling).
I'm using Qtip2, jQuery-2.0.3 and the most recent release of cytoscape.js
Any help is much appreciated.
EDIT: If you want to create these elements automatically, use a function and a loop to iterate over cy.nodes():
var makeTippy = function (nodeTemp, node) {
return tippy(node.popperRef(), {
html: (function () {
let div = document.createElement('div');
// do things in div
return div;
})(),
trigger: 'manual',
arrow: true,
placement: 'right',
hideOnClick: false,
multiple: true,
sticky: true
}).tooltips[0];
};
var nodes = cy.nodes();
for (var i = 0; i < nodes.length; i++) {
var tippy = makeTippy(nodes[i]);
tippy.show();
}
If you want a sticky qTip, I would instead recommend the cytoscape extension for popper.js and specificly the tippy version (sticky divs):
document.addEventListener('DOMContentLoaded', function() {
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
style: [{
selector: 'node',
style: {
'content': 'data(id)'
}
},
{
selector: 'edge',
style: {
'curve-style': 'bezier',
'target-arrow-shape': 'triangle'
}
}
],
elements: {
nodes: [{
data: {
id: 'a'
}
},
{
data: {
id: 'b'
}
}
],
edges: [{
data: {
source: 'a',
target: 'b'
}
}]
},
layout: {
name: 'grid'
}
});
var a = cy.getElementById('a');
var b = cy.getElementById('b');
var makeTippy = function(node, text) {
return tippy(node.popperRef(), {
html: (function() {
var div = document.createElement('div');
div.innerHTML = text;
return div;
})(),
trigger: 'manual',
arrow: true,
placement: 'bottom',
hideOnClick: false,
multiple: true,
sticky: true
}).tooltips[0];
};
var tippyA = makeTippy(a, 'foo');
tippyA.show();
var tippyB = makeTippy(b, 'bar');
tippyB.show();
});
body {
font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
font-size: 14px
}
#cy {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 1;
}
h1 {
opacity: 0.5;
font-size: 1em;
font-weight: bold;
}
/* makes sticky faster; disable if you want animated tippies */
.tippy-popper {
transition: none !important;
}
<!DOCTYPE>
<html>
<head>
<title>Tippy > qTip</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/popper.js"></script>
<script src="cytoscape-popper.js"></script>
<script src="https://unpkg.com/tippy.js#2.0.9/dist/tippy.all.js"></script>
<link rel="stylesheet" href="https://unpkg.com/tippy.js#2.0.9/dist/tippy.css" />
<script src="https://cdn.jsdelivr.net/npm/cytoscape-popper#1.0.2/cytoscape-popper.js"></script>
</head>
<body>
<h1>cytoscape-popper tippy demo</h1>
<div id="cy"></div>
</body>
</html>
I think popper is just easier to handle when having the divs 'stick around'
I've built a slider using css, javascript and html. I have a bit of javascript which controls the width and height of the div which contains the slider, as well as the slide speed. However, I want to make the width of the slider 100% of the screen, no matter what size screen. It is currently defined in pixels, but whenever i define it as % it simply disappears. Any ideas or suggestions?
Here is the code
<script type="text/javascript">
$(function() {
$('#one').ContentSlider({
width:1600,
heigth:400,
speed : 800,
easing : 'easeInOutBack'
});
});
</script>
HTML CODE
<title> </title>
<body>
<div id="one" class="contentslider">
<div class="cs_wrapper">
<div class="cs_slider">
<div class="cs_article">
Insert Images Here
</div><!-- End cs_article -->
</div><!-- End cs_slider -->
</div><!-- End cs_wrapper -->
</div><!-- End contentslider -->
<!-- Site JavaScript -->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="ContentSlider.js"></script>
<script type="text/javascript" src="ContentSlider.js"></script>
<script type="text/javascript">
$(function() {
$('#one').ContentSlider({
width:1600,
heigth:600,
speed : 800,
easing : 'easeInOutBack'
});
});
</script>
<script src="ContentSlider.js" type="text/javascript"></script>
<script src="ContentSlider.js" type="text/javascript"></script>
</body>
CSS CODE
body {
font:80%/1.25em arial, sans-serif;
letter-spacing:.1em;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
width:100%;
height:100%
}
h1, h2, p, pre {
display:block;
width:99%;
}
.contentslider {
padding:10px; /* This acts as a border for the content slider */
background:#333; /* This is the color of said border */
}
.contentslider {
position:relative;
display:block;
width:100%;
height:100%;
margin:0 auto;
overflow:hidden
}
.cs_wrapper {
position:relative;
display:block;
width:100%;
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
.cs_slider {
position:absolute;
width:10000px;
height:100%;
margin:0;
padding:0;
}
JAVASCRIPT CODE
(function($) {
$.fn.ContentSlider = function(options)
{
var defaults = {
leftBtn : 'cs_leftImg.jpg',
rightBtn : 'cs_rightImg.jpg',
width : '900px',
height : '400px',
speed : 400,
easing : 'easeOutQuad',
textResize : false,
IE_h2 : '26px',
IE_p : '11px'
}
var defaultWidth = defaults.width;
var o = $.extend(defaults, options);
var w = parseInt(o.width);
var n = this.children('.cs_wrapper').children('.cs_slider').children('.cs_article').length;
var x = -1*w*n+w; // Minimum left value
var p = parseInt(o.width)/parseInt(defaultWidth);
var thisInstance = this.attr('id');
var inuse = false; // Prevents colliding animations
function moveSlider(d, b)
{
var l = parseInt(b.siblings('.cs_wrapper').children('.cs_slider').css('left'));
if(isNaN(l)) {
var l = 0;
}
var m = (d=='left') ? l-w : l+w;
if(m<=0&&m>=x) {
b
.siblings('.cs_wrapper')
.children('.cs_slider')
.animate({ 'left':m+'px' }, o.speed, o.easing, function() {
inuse=false;
});
if(b.attr('class')=='cs_leftBtn') {
var thisBtn = $('#'+thisInstance+' .cs_leftBtn');
var otherBtn = $('#'+thisInstance+' .cs_rightBtn');
} else {
var thisBtn = $('#'+thisInstance+' .cs_rightBtn');
var otherBtn = $('#'+thisInstance+' .cs_leftBtn');
}
if(m==0||m==x) {
thisBtn.animate({ 'opacity':'0' }, o.speed, o.easing, function() { thisBtn.hide(); });
}
if(otherBtn.css('opacity')=='0') {
otherBtn.show().animate({ 'opacity':'1' }, { duration:o.speed, easing:o.easing });
}
}
}
function vCenterBtns(b)
{
// Safari and IE don't seem to like the CSS used to vertically center
// the buttons, so we'll force it with this function
var mid = parseInt(o.height)/2;
b
.find('.cs_leftBtn img').css({ 'top':mid+'px', 'padding':0 }).end()
.find('.cs_rightBtn img').css({ 'top':mid+'px', 'padding':0 });
}
return this.each(function() {
$(this)
// Set the width and height of the div to the defined size
.css({
width:o.width,
height:o.height
})
// Add the buttons to move left and right
.prepend('<img src="'+o.leftBtn+'" />')
.append('<img src="'+o.rightBtn+'" />')
// Dig down to the article div elements
.find('.cs_article')
// Set the width and height of the div to the defined size
.css({
width:o.width,
height:o.height
})
.end()
.find('.cs_leftBtn')
.css('opacity','0')
.hide()
.end()
.find('.cs_rightBtn')
.hide()
.animate({ 'width':'show' });
if(o.textResize===true) {
var h2FontSize = $(this).find('h2').css('font-size');
var pFontSize = $(this).find('p').css('font-size');
$.each(jQuery.browser, function(i) {
if($.browser.msie) {
h2FontSize = o.IE_h2;
pFontSize = o.IE_p;
}
});
$(this).find('h2').css({ 'font-size' : parseFloat(h2FontSize)*p+'px', 'margin-left' : '66%' });
$(this).find('p').css({ 'font-size' : parseFloat(pFontSize)*p+'px', 'margin-left' : '66%' });
$(this).find('.readmore').css({ 'font-size' : parseFloat(pFontSize)*p+'px', 'margin-left' : '66%' });
}
var leftBtn = $(this).children('.cs_leftBtn');
leftBtn.bind('click', function() {
if(inuse===false) {
inuse = true;
moveSlider('right', leftBtn);
}
return false;
});
var rightBtn = $(this).children('.cs_rightBtn');
rightBtn.bind('click', function() {
if(inuse===false) {
inuse=true;
moveSlider('left', rightBtn);
}
return false;
});
vCenterBtns($(this));
});
}
})(jQuery)
You could change width to $(this).parent().innerWidth(), but that will only work on init, if the user resizes it will not change. This is because the plugin only sets a size on init
Might be a better idea to search for a fullwidth slider, these often fix some issues which arrise with fullwidths and resizing
I have the following code of a map using api google, I have tested the code in several html editor and its work perfectly, but when i upload in my web page doesn’t work. The map appears all zoomed in some random point in the ocean. I create an article in Joomla 1.5.20, paste the code. Its shows right in the preview but not in the web page. I disable filtering and use none editor and still won’t work. Thanks for the help.
<!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=AIzaSyBInlv7FuwtKGhzBP0oISDoB2Iu79HNrPU&sensor=false">
</script>
<script type="text/javascript">
var map;
// lets define some vars to make things easier later
var kml = {
a: {
name: "Productor",
url: "https://maps.google.hn/maps/ms?authuser=0&vps=2&hl=es&ie=UTF8&msa=0&output=kml&msid=200984447026903306654.0004c934a224eca7c3ad4"
},
b: {
name: "A&S",
url: "https://maps.google.hn/maps/ms?ie=UTF8&authuser=0&msa=0&output=kml&msid=200984447026903306654.0004c94bac74cf2304c71"
}
// keep adding more if ye like
};
// initialize our goo
function initializeMap() {
var options = {
center: new google.maps.LatLng(13.324182,-87.080071),
zoom: 9,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById("map_canvas"), options);
var ctaLayer = new google.maps.KmlLayer('https://maps.google.hn/maps/ms?authuser=0&vps=5&hl=es&ie=UTF8&oe=UTF8&msa=0&output=kml&msid=200984447026903306654.0004c94bc3bce6f638aa1');
ctaLayer.setMap(map);
var ctaLayer = new google.maps.KmlLayer('https://maps.google.hn/maps/ms?authuser=0&vps=2&ie=UTF8&msa=0&output=kml&msid=200984447026903306654.0004c94ec7e838242b67d');
ctaLayer.setMap(map);
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
});
google.maps.event.addListener(layer, 'click', function(kmlEvent) {
var text = kmlEvent.featureData.description;
showInContentWindow(text);
});
function showInContentWindow(text) {
var sidediv = document.getElementById('content_window');
sidediv.innerHTML = text;
}
// 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;'>" +
"Limpiar el Mapa<\/a><\/li>" +
"<\/ul><\/form>";
document.getElementById("toggle_box").innerHTML = html;
};
// easy way to remove all objects
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: 80%; height: 400px; float:left"></div>
<div id="toggle_box" style="position: absolute; top: 100px; right: 640px; padding: 10px; background: #fff; z-index: 5; "></div>
<div id="content_window" style="width:10%; height:10%; float:left"></div>
</body>
</html>
The problem was solve using dropbox to host the KML files insted google maps.