It is working fine if i hard code markers lat long where as when it is built using function, it does not plot. In below code, only two markers are coming up where as it should be 3.
I have tried with complete vue browser script, as a static marker objects it is working fine but not with dynamic markers
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<div id="root">
<gmap-map ref="mymap" :center="startLocation" :zoom="14" style="width: 100%; height: 300px">
<gmap-info-window :options="infoOptions" :position="infoPosition" :opened="infoOpened" #closeclick="infoOpened=false">
{{infoContent}}
</gmap-info-window>
<gmap-marker v-for="(item, key) in coordinates" :key="key" :position="getPosition(item)" :clickable="true" #click="toggleInfo(item, key)" />
</gmap-map>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<script src="vue-google-maps.js"></script>
<script>
var jsondata = {
0: {
full_name: 'Erich Kunze',
lat: '20.31',
lng: '83.89'
},
1: {
full_name: 'Delmer Olson',
lat: '20.32',
lng: '83.89'
}
}
$(function () {
testdata();
;//= testdata();
Vue.use(VueGoogleMaps, {
load: {
key: 'AIzaSyBzlLYISGjL_ovJwAehh6ydhB56fCCpPQw'
},
});
new Vue({
el: '#root',
data: {
startLocation: {
lat: 20.3157,
lng: 83.8854
},
coordinates: jsondata,
<!-- { -->
<!-- 0: { -->
<!-- full_name: 'Erich Kunze', -->
<!-- lat: '20.31', -->
<!-- lng: '83.89' -->
<!-- }, -->
<!-- 1: { -->
<!-- full_name: 'Delmer Olson', -->
<!-- lat: '20.32', -->
<!-- lng: '83.89' -->
<!-- } -->
<!-- }, -->
infoPosition: null,
infoContent: null,
infoOpened: false,
infoCurrentKey: null,
infoOptions: {
pixelOffset: {
width: 0,
height: -35
}
},
},
methods: {
getPosition: function(marker) {
return {
lat: parseFloat(marker.lat),
lng: parseFloat(marker.lng)
}
},
toggleInfo: function(marker, key) {
this.infoPosition = this.getPosition(marker);
this.infoContent = marker.full_name;
if (this.infoCurrentKey == key) {
this.infoOpened = !this.infoOpened;
} else {
this.infoOpened = true;
this.infoCurrentKey = key;
}
}
}
});
});
function testdata(){
alert('chk');
jsondata[2] = {
full_name : 'chk',
lat:20.33,
lng:83.89
}
console.log(jsondata);
}
</script>
</html>
It should plot all the markers two static and one dynamic.
There is no problem with the code, Now the same code is working fine, it shows all the markers.It is working like a charm.
Thanks
Related
I'm facing an unknown issue only when I'm swiping between last (swiper-slide) to first (swiper-slide) and same as first to last, but when I do just a half swipe, then the RedialBar looks good.
I set the loop: true. I have 3 Slides. Inside all Slide, i have a very simple APEX RadialBar/Circle Chart's. Everything works nice. But when I slide 1 to 2 Good. 2 to 3 Good. But when I slide 3 to 1 then the RadialBar series does not render. And same problem when I slide 1 to 3. So if I just do a half slide (just a little swipe), then the RadialBar render perfectly.
$(document).ready(function () {
//initialize swiper when document ready
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'horizontal',
loop: true,
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
effect: 'slide'
})
mySwiper.on('slideChange', function () {
console.log('slide changed');
});
});
// Apex Chart
let options = {
series: [50],
chart: {
height: 200,
type: 'radialBar',
},
plotOptions: {
radialBar: {
hollow: {
size: '70%',
}
},
},
stroke: {
lineCap: 'round'
},
labels: ['Country'],
};
let chart = new ApexCharts(
document.querySelector("#demo-chart-1"),options
);
let chart2 = new ApexCharts(
document.querySelector("#demo-chart-2"),options
);
let chart3 = new ApexCharts(
document.querySelector("#demo-chart-3"),options
);
chart.render();
chart2.render();
chart3.render();
body {
background-color: #a3d5d3;
}
.india,
.canada,
.japan {
height: 100;
border: 1px solid green;
display: grid;
place-items: center;
}
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<link href="https://unpkg.com/swiper/css/swiper.min.css" rel="stylesheet"/>
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- Slide 1-->
<div class="swiper-slide">
<section class="india">
<p class="gas-header">INDIA</p>
<div id="demo-chart-1"></div>
</section>
</div>
<!-- Slide 2-->
<div class="swiper-slide">
<section class="canada">
<p class="gas-header">CANADA</p>
<div id="demo-chart-2"></div>
</section>
</div>
<!-- Slide 3-->
<div class="swiper-slide">
<section class="japan">
<p class="gas-header">JAPAN</p>
<div id="demo-chart-3"></div>
</section>
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
I am using angularjs and having a simple accordion with expand and collapse,Every thing is working fine but here when I expand the div it should expand slowly and similarly when I collapse again it should collapse slowly.Here I am using isopen for expand in angularjs.Anyone can help me,Below is my code,https://plnkr.co/edit/nCdGzZYPSTYsMPYf8K9o?p=preview
HTML
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js'></script>
<script src="js/index.js"></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css'>
<body ng-app="app">
<h1>Dynamic accordion: nested lists with html markup</h1>
<div ng-controller="AccordionDemoCtrl">
<div>
<div ng-repeat="group in groups track by $index">
<div class="parents" ng-click="open($index)"><i ng-class="{'glyphicon-minus': group.isOpen, 'glyphicon-plus': !group.isOpen}"></i> {{ group.title }}
</div>
<div class="childs" ng-show="group.isOpen">ddddd</div>
</div>
</div>
</div>
</body>
index.js
var app=angular.module('app', ['ui.bootstrap','ngSanitize','angular.filter']);
app.controller('AccordionDemoCtrl', function ($scope) {
$scope.oneAtATime = true;
$scope.open = function (index) {
$scope.groups[index].isOpen = !$scope.groups[index].isOpen;
$scope.closeOthers(index);
}
$scope.closeOthers = function (index) {
for(var i = 0; i < $scope.groups.length; i++) {
if (i !== index)
$scope.groups[i].isOpen = false;
}
}
$scope.groups = [
{
title: 'title 1',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a']
},
{
title: 'title 2',
list: ['item1b',
'<b>item2b </b> blah ',
'item3b']
},
{
title: 'title 3',
},
{
title: 'title 4',
},
{
title: 'title 5',
}
];
$scope.groups[0].isOpen = true;
});
You can use css max-height and add transition to make collapse and expand slowly
.childs {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-out;
}
.childs.showChild {
max-height: 1000px;
}
<ul class="childs" ng-class="{'showChild': group.isOpen}">
<li ng-repeat="item in group.list">
<span ng-bind-html="item"></span>
</li>
</ul>
See the demo
https://plnkr.co/edit/Gm7oe8l3ZBXyWTe3Okm4?p=preview
Google Map not loading.
only blank div is displaying
here my code snippet
<div id="map-container" class="col-md-9 col-sm-12">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
function init_map() {
var var_location = new google.maps.LatLng(35.710107,73.039610);
var var_mapoptions = { center: var_location, zoom:17 };
var var_marker = new google.maps.Marker({ position: var_location, map: var_map, title:"Test"});
var var_map = new google.maps.Map(document.getElementById("map-container"), var_mapoptions);
var_marker.setMap(var_map);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
</div>
i think my logic is right. can anyone help me to figure it out what the problem is.
Thnx in advance. . . !
<div class="col-md-9 col-sm-12">
<div id="map-container" style="width: 100%; height:400px;"></div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
function init_map() {
var var_location = new google.maps.LatLng(35.710107,73.039610);
var var_mapoptions = { center: var_location, zoom:17 };
var var_marker = new google.maps.Marker({ position: var_location, map: var_map, title:"Test"});
var var_map = new google.maps.Map(document.getElementById("map-container"), var_mapoptions);
var_marker.setMap(var_map);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
</div>
You need to create another div for the map container and add the width & height for this.
First of all, you need an API Key, which you don't seem to have.
then basically just follow the google maps api tutorial, like you seem to have sorta been doing.
<style>
#map {
height: 400px;
width: 400px;
}
</style>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
(https://developers.google.com/maps/documentation/javascript/examples/map-simple)
I am trying to use the google maps API to load a map and autocomplete a form. However when I try and initialise I can't do it.
I can do this:
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
And the map works. Places API doesn't. I tried adding &libraries=... to the end but that didn't work. If I add:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">
</script>
This is my whole page:
<html>
<head>
<link rel="stylesheet "type="text/css" href="control_panel.css">
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%; }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDqSTkzPn8PpJBY3Pclu-TTjmGDLzqKMD4&libraries=places&callback=initMap">
</script>
</head>
<body>
<div id="headerBar">
<ul class="item">Opening Page</ul>
<ul class="item">Make a booking</ul>
<ul class="item">Heat Map</ul>
<ul class="item">Blah</ul>
<ul class="item">Blah</ul>
</div>
<div>
<div id="locationField">
<input id="autocomplete" placeholder="Enter your address"
onFocus="geolocate()" type="text"></input>
</div>
</div>
<div id="map">
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
</div>
<script type="text/javascript">
// Bias the autocomplete object to the user's geographical location, // [START region_geolocation]
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}
// [END region_geolocation]
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** #type {!HTMLInputElement} */(document.getElementById('autocomplete')),
{types: ['geocode']});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);
}
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
}
</script>
</body>
</html>
</script>
</body>
</html>
However the autocomplete form doesn't work
You are not calling the initAutocomplete function. Simplest fix is to call it at the end of initMap.
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
initAutocomplete();
}
proof of concept fiddle
code snippet:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
initAutocomplete();
}
// Bias the autocomplete object to the user's geographical location, // [START region_geolocation]
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}
// [END region_geolocation]
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** #type {!HTMLInputElement} */
(document.getElementById('autocomplete')), {
types: ['geocode']
});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);
}
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap" async defer></script>
<div id="headerBar">
<ul class="item">Opening Page</ul>
<ul class="item">Make a booking</ul>
<ul class="item">Heat Map</ul>
<ul class="item">Blah</ul>
<ul class="item">Blah</ul>
</div>
<div>
<div id="locationField">
<input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" />
</div>
</div>
<div id="map">
I need help to understand the jsplumb.connect concept. I am trying to create endpoints from xml file and trying to connect the endpoints. But i am able to generate the endpoint but not the connections.
XML file
<?xml version="1.0" encoding="utf-8" ?>
<apps>
<source nodeStyle="Dot" nodeRadius="15">#66CCFF</source>
<target nodeStyle="Dot" nodeRadius="15">#66CCFF</target>
</apps>
html file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/jquery.jsPlumb-1.3.16-all-min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var i=0;
var nodeName, nodeVal,nodeStyle,nodeRadius;
$.get('data1.xml', function(d){
$(d).find('apps').each(function(){
jsPlumb.Defaults.EndpointStyles = [{ fillStyle:"none" }, { fillStyle:"none" }];
while($(this).children()[i].nodeName!=null)
{
nodeName = $(this).children()[i].nodeName;
nodeVal = $(this).find($(this).children()[i].nodeName).text();
nodeStyle = $(this).find($(this).children()[i].nodeName).attr('nodeStyle');
nodeRadius = $(this).find($(this).children()[i].nodeName).attr('nodeRadius');
var nodeName = jsPlumb.addEndpoint( nodeName, {
overlays: [["Label", { label: nodeName, id: "label"+nodeName}]],
paintStyle: { fillStyle: nodeVal},
endpoint: [nodeStyle , { radius: nodeRadius }]
});
i++;
}
jsPlumb.bind("ready", function () {
jsPlumb.connect({
source: source, target: target, paintStyle: { lineWidth: 10, strokeStyle: '#66CCFF' },
endpoint: ["Dot", { radius: 15}], anchor: "BottomCenter",
connector: "Straight",
detachable: false,
overlays: [
["Label", {
fillStyle: "rgba(100,100,100,80)",
color: "white",
font: "12px sans-serif",
borderStyle: "black",
borderWidth: 2
}],
["Arrow", { location: 0.5}]
]
})
});
});
});
});
</script>
</head>
<body>
<div id="source" style="position: absolute; left: 100px; top: 250px;">
</div>
<div id="target" style="position: absolute; left: 600px; top: 250px;">
</div>
</body>
</html>
This can be accomplished programatically by first setting the uuid parameter of each endpoint like so:
jsPlumb.addEndpoint("0",{uuid:"ep0_0", isSource:true, isTarget:true});
jsPlumb.addEndpoint("1",{uuid:"ep1_0", isSource:true, isTarget:true});
And then connecting them as such
jsPlumb.connect({ uuids:["ep0_0","ep1_0"] });
//With more options looks like...
//jsPlumb.connect({ uuids:["ep0_0", "ep1_0"], endpoint: endpoint, anchors: flat_to_flat_anchors, overlays:overlays });
The html:
<div id="0" class="window"></div>
<div id="1" class="window"></div>
Bare bone js:
jsPlumb.addEndpoint("0",{uuid:"ep1"});
jsPlumb.addEndpoint("1",{uuid:"ep2"});
jsPlumb.connect({ uuids:["ep1","ep2"] });