Google Map API not showing up - google-maps-api-3

I'm including a Google Map API in my site where it shows several markers with an info popup. I've input all my values into my marker variable but the map itself is not showing up at all. I've included all the javascript files. I can't seem to figure out what is wrong. Any help would be greatly appreciated. Here is the script for the markers:
<script type="text/javascript">
$(function(){
$('#test1').gmap3({
map:{
options:{
center:[34.8400335,-115.967051],
zoom: 7
}
},
marker:{
values:[
{latLng:[48.8620722, 2.352047],data:"info"},
{latLng:[34.1301, -117.286],data:"Client: Hi-Grade Materials, Project: San Bernardino Mine, Surveyed for Desert Tortoise Species"},
{latLng:[34.8958, -117.016],data:"Client: City of Barstow, Project: South Borrow Area, Surveyed for Desert Tortoise and Burrowing Owl"},
{latLng:[34, -117.3],data:"Client: R.A.M. Architecture, Project: Hesperia Development, Surveyed for Burrowing Owls"},
{latLng:[33.6778, -117.215],data:"Client: Brookfield Residential, Project: Audie Murphy Ranch, Surveyed for Burrowing Owls"},
{latLng:[33.5555, -117.203],data:"Client: Pacific Coast Land Consultants, Project: Westpark Promenade, Surveyed for various sensitive species"},
{latLng:[34.5221, -117.325],data:"Client: Civic Rogers LLC, Project: Civic Rogers Development, Surveyed for Mojave Ground Squirrel, Desert Tortoise and Burrowing Owl"},
{latLng:[37.5194, -122.039],data:"Client: Bielectric USA, Project: Navajo Solar Development, Surveyed for Mojave Ground Squirrel"},
{latLng:[34.134, -118.332],data:"Client: Sunlight Partners, Project: Arrache 4006, Surveyed for Desert Tortoise and Burrowing Owls"},
{latLng:[33.6885, -117.188],data:"Client: Golden Eagle Properties, Project: Villa Siena, Surveyed for various sensitive species"},
{latLng:[34.1197, -117.536],data:"Client: Winchester Associates, Project: Moreno Development, Surveyed for Burrowing Owl species"},
{latLng:[38.3991, -122.84],data:"Client: Dyna Solar, Project: MA Solar Site, Surveyed for Burrowing Owls"},
{address:"10253 6th Avenue, Hesperia, CA", data:"Client: UEG, Mojave Square Project, Surveyed for Burrowing Owl Species"},
{address:"", data:"", options:{icon: "http://maps.google.com/mapfiles/marker_green.png"}}
],
options:{
draggable: false
},
events:{
mouseover: function(marker, event, context){
var map = $(this).gmap3("get"),
infowindow = $(this).gmap3({get:{name:"infowindow"}});
if (infowindow){
infowindow.open(map, marker);
infowindow.setContent(context.data);
} else {
$(this).gmap3({
infowindow:{
anchor:marker,
options:{content: context.data}
}
});
}
},
mouseout: function(){
var infowindow = $(this).gmap3({get:{name:"infowindow"}});
if (infowindow){
infowindow.close();
}
}
}
}
});
});
</script>

If you don't set the size of the <div> manually, the Google Map will render in a div that won't be visible. A highly irritating error to hunt down.
Try setting the size of the div:
<div id="yourID" style="width:400px; height:400px;"></div>
and include whatever ID you have the script set to operate with. That may be why #geocodezip got proper results with the code - as you are, you just can't see it.

gmap3 is not a google maps api function, is a function or Gmap3 'wrapper' api. See http://gmap3.net/en/ for reference. Be sure you include a reference to scripts for this api
Excuse me my poor english level.

Related

Tradingview widget add price line

How to create custom price line in the tradingview widget? Example; as in the picture below.
i used vue3js and electronjs.
My widget code;
window.tradingView = new window.TradingView.widget({
autosize: true,
symbol: 'BINANCE:' + this.symbolData.symbol,
interval: '15',
timezone: this.local,
theme: 'light',
style: '1',
locale: 'tr',
toolbar_bg: '#f1f3f6',
enable_publishing: false,
save_image: false,
container_id: this.id,
});
You can use the Trading View Online Configurator to conveniently configure the chart to your needs.
For example using the following configuration you get the price line with OHLC information (in Turkish AYDK)
EDIT (after comment): This response assumed the question is about the line with OHLC information. As pointed out by the author in the comment, this is not the case. If OP asked for the horizontal line within the chart, I am afraid this is not officially supported within the JS widget.
From FAQ on TradeView Widget:
I'd like to add a custom pine script to the widget.
It is not possible to add pine scripts to widgets at this time. > > You can publish an idea with your script and embed it.
There might be an unofficial (undocumented) way do it, but I would strongly suggest against relying on it. As always with undocumented features they might stop working at any time. If that is an acceptable risk there are some more ways in addition to SO to contact people that might know about such an option.
Settings
Code
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div id="tradingview_3a5dc"></div>
<div class="tradingview-widget-copyright">TradingView'den <span class="blue-text">SHIBUSDT Grafiği</span></div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"autosize": true,
"symbol": "BINANCE:SHIBUSDT",
"interval": "15",
"timezone": "Etc/UTC",
"theme": "light",
"style": "1",
"locale": "tr",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"save_image": false,
"container_id": "tradingview_3a5dc"
}
);
</script>
</div>
<!-- TradingView Widget END -->
Result

AMP analytics events for scroll

I am trying to add analytics to my AMP page.while tra
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMP Analytics</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<style>
body {
opacity: 0
}
</style><noscript><style>body {opacity: 1}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-xxxxxxxx-x"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
},
"scrollPings": {
"on": "scroll",
"scrollSpec": {
"verticalBoundaries": [10, 20, 30, 40, 50, 60, 70, 80, 90]
},
"request": "event",
"vars": {
"eventId": "scroll"
}
},
"trackEvent": {
"selector": "#event-test",
"on": "click",
"request": "event",
"vars": {
"eventCategory": "${canonicalUrl}",
"eventAction": "click"
}
}
}
}
</script>
</amp-analytics>
<h1 id="header">AMP Page</h1>
<span id="event-test" class="box">
Click here to generate an event
</span>
<h2>
Page semi-protected Blog From Wikipedia, the free encyclopedia "Blogger" redirects here. For the Google service with same name, see Blogger (service). For other uses, see Blog (disambiguation). Not to be confused with .blog. Journalism Simons Perskaart
DOM.jpg News Writing style Ethics Objectivity News values Attribution Defamation Editorial independence Journalism school Index of journalism articles Areas Arts Business Data Entertainment Environment Fashion Medicine Politics Science Sports Technology
Trade Traffic Weather World Genres Advocacy Analytic Blogging Broadcast Citizen Civic Collaborative Comics-based Community Data Database Gonzo Immersion Investigative Literary Muckraking Narrative "New Journalism" Non-profit Online Opinion Peace Photojournalism
Scientific Sensor Underground Visual Watchdog Social impact Fake news Fourth Estate Fifth Estate Freedom of the press Infotainment Media bias Public relations Press service Propaganda model Yellow journalism News media Newspapers Magazines TV and
radio Internet News agencies Alternative media Roles Journalists (reporters) Columnist Blogger Editor Copy editor Meteorologist News presenter Photographer Pundit / commentator Newspaper nicu buculei 01.svg Journalism portal Category: Journalism v
t e A blog (a truncation of the expression "weblog")[1] is a discussion or informational website published on the World Wide Web consisting of discrete, often informal diary-style text entries ("posts"). Posts are typically displayed in reverse chronological
order, so that the most recent post appears first, at the top of the web page. Until 2009, blogs were usually the work of a single individual,[citation needed] occasionally of a small group, and often covered a single subject or topic. In the 2010s,
"multi-author blogs" (MABs) have developed, with posts written by large numbers of authors and sometimes professionally edited. MABs from newspapers, other media outlets, universities, think tanks, advocacy groups, and similar institutions account
for an increasing quantity of blog traffic. The rise of Twitter and other "microblogging" systems helps integrate MABs and single-author blogs into the news media. Blog can also be used as a verb, meaning to maintain or add content to a blog. This
page was last edited on 18 May 2017, at 21:34. Text is available under the Creative Commons Attribution-ShareAlike License; additional terms may apply. By using this site, you agree to the Terms of Use and Privacy Policy. Wikipedia® is a registered
trademark of the Wikimedia Foundation, Inc., a non-profit organization. Privacy policyAbout WikipediaDisclaimersContact WikipediaDevelopersCookie statementMobile viewWikimedia Foundation Powered by MediaWiki
</h2>
</body>
</html>
ckPageview and trackEvent generate events. scrollPings does not.
Has anybody tries this out?
** The reference code for scrollPing is from AMP by Example page.
Thanks in advance
< amp - analytics type = "googleanalytics" >
<script type = "application/json" > {
"vars": {
"account": "UA-XXXXXXXX-X"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
},
"scrollPings": {
"on": "scroll",
"scrollSpec": {
"verticalBoundaries": [10, 20, 30, 40, 50, 60, 70, 80, 90]
},
"request": "event",
"vars": {
"eventId": "scroll"
}
},
"trackEvent": {
"selector": "#event-test",
"on": "click",
"request": "event",
"vars": {
"eventCategory": "${canonicalUrl}",
"eventAction": "click"
}
}
}
}
</script>
</amp-analytics>
Working with another one of our developers we managed to figure this out, at least partially. There are some URL substitute variables and you need to use the one for verticalScrollBoundary to report a percentage (like you're doing for your test event there). Please note the percent sign after the '${verticalScrollBoundary}%' variable is OPTIONAL and added to be consistent in our analytics report with non-AMP scroll depth tracking.
This worked for us:
'scrollPings' => array(
'on' => 'scroll',
'request' => 'event',
'scrollSpec' => array(
'verticalBoundaries' => array( 0, 25, 50, 75, 100 )
),
'vars' => array(
'eventCategory' => 'AMP Scroll Depth',
'eventAction' => 'Scrolled',
'eventLabel' => '${verticalScrollBoundary}%',
),
),
Apologies, that's PHP syntax that gets translated into JSON b/c we're using the WordPress plugin. For JSON it would be (I believe):
"scrollPings": {
"on": "scroll",
"request": "event",
"scrollSpec": {
"verticalBoundaries": [0, 25, 50, 75, 100]
},
"vars": {
"eventCategory": "AMP Scroll Depth",
"eventAction": "Scrolled",
"eventLabel": "${verticalScrollBoundary}%"
},
}
The one thing we haven't figured out is that it seems to be logging a null value of either "(not set)" or "%" if you include a percent sign like I have at the end of the'${verticalScrollBoundary}%' variable. Please note that percent sign is OPTIONAL. If there's no percent sign we just get a (not set) value being logged which doesn't seem to equate to 0 (you'll notice I've added 0 in the array of possible values).

Trouble in showing Surfaces in Grid using famo.us and meteor

I am trying to show some surfaces in Grid using Meteor and Famo.us without any success. After I run the project locally, the browser shows a blank screen. For reference, I am looking at this example: https://famous-views.meteor.com/views/GridLayout
HTML
<template name="gridTemplate">
{{#GridLayout size='[undefined,undefined]' dimension='[3,3]'}}
{{#famousEach items}}
{{>ContainerSurface template='gridItem' }}
{{/famousEach}}
{{/GridLayout}}
</template>
<template name="gridItem">
{{#Surface size='[undefined,undefined]'}}
<img src="/img/thumbnail.png">
{{/Surface}}
</template>
Javascript
FView.ready(function(require) {
FView.registerView('GridLayout', famous.views.GridLayout);
});
var items = [{
name:"adfadf"
},
{
name:"adfadf"
},
{
name:"adfadf"
},
{
name:"adfadf"
}];
Template.gridTemplate.helpers({
items:function()
{
return items;
}
});
I was having the same error, and now found out that unfortunately the current famous-views for meteor has been deprecated in favor of a new version, which works with the newly released famo.us 0.5. and surfaces no longer work.
You can visit https://github.com/gadicc/meteor-famous-views to learn more about it, but help with the current famous-views will be difficult now, since all discussion is basically for the new version.
Let me know what you come up with, so far I'm testing it myself.

How could I embed a HighCharts interactive graph into a wordpress 3.5.1 page?

My name is Josh and I work for a community college newspaper. I've just recently found Highcharts and have been attempting to embed a interactive graph into a post for our website, rather unsuccessfully. Actually, it's been a complete failure.
I have already read over and attempted this post to no avail:
highcharts and wordpress
There's no one I know who I can take this problem to and even though I feel like I've tried every suggested solution, Unfortunately, I'm rather illiterate when it comes to html and code. Any help would be GREATLY appreciated.
I am working with Wordpress 3.5.1 Here is the point I am currently at:
I am running: Allow PHP in Posts and Pages Plugin & Interactive Javascript and CSS.
For the header option of the post I have:
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"> </script>
<script src="http://www.domain.com/wp-content/uploads/2013/03/highcharts1.js" type="text/javascript"></script>
In some of the websites (this one included), I've seen mention of uploading the Highcharts library onto your wordpress server. I've uploaded the highcharts.js file through the media library but I have a feeling that I am doing this incorrectly?
In the post itself I have placed:
[php]
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'State Funding of DSPS Services',
x: -20 //center
},
subtitle: {
text: 'Source:MPR Associates Report',
x: -20
},
xAxis: {
categories: ['2003-04', '2004-05', '2005-06', '2006-07', '2007-08',
'2008-09', '2009-10', '2010-11', '2011-2012', '2012-13']
},
yAxis: {
title: {
text: '$ Million'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +' Million';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'College Total Funding',
data: [77.8, 81.8, 86.2, 102.1, 109.3, 108.9, 64.9, 64.8, 64.6, 65.7]
}]
});
});
});
[/php]
<div id="container" style="width: 100%; height: 400px"></div>
The page comes up blank, as it has been for the past hundred attempts or so. I apologize if this is post in the wrong spot or undesired. Any advice or solutions are greatly appreciated.
Thank you,
J
In order to get a chart rendered, you need several things to be in place:
Include the highcharts.js - done
Include some javascript which defines and creates a chart - done
Give highcharts a place to put the chart - ?
I think you may be missing the last element. This is done by including a tag inside your post somewhere. The div can be named using the 'id' property as follows:
<div id='container'>mydiv</div>
You have already told highcharts that you want to 'renderTo' a place called 'container', so this should be all you need.
To add this in wordpress, go into the post editor and make sure you are in 'html' mode. In my version of wordpress, this is a tab just to the top right of the post editing pane with the options 'visual' and 'html'.
In html mode, just add my div code in the place where you want the chart to appear. Hopefully that will do the trick.
there could be several reasons for the chart not showing up.
1)The scripts (jquery and highcharts) need to be loaded onto your page and this is not immediately obvious in wordpress. There's a couple of ways - if you aren't a coder then the simplest is to go to the header.php of your theme. (Appearance->Editor) and look for the header.php file on the right hand side. In the head section you'll need to register the highcharts library...
wp_register_script('myHighchartsHandle','highcharts/js/highstock.js',array('jquery'),'1.0a');
wp_enqueue_script('myHighchartsHandle');
The path to the high stock/highcharts library will change depending on where it is on your server of course.
2) The code is javascript - your supplied code has php tags. I think you could edit that to have js tags in the square brackets and install the 'Allow javascript in posts and pages' plugin. Note that plugin needs you to prefix any square brackets in code with a backslash so you'll need to do that to get the data series formatted properly.
3) It does look like you have a div container outside of your code which is good. But as the other answer suggest you will need that and the id has to match the renderTo in the code.
4) If it doesn't work after these 3 steps then you could be falling foul of jQuery noConflict.Wordpress sets jquery in this mode by default.
Instead of $ in your js code you may have to replace with jQuery. The highcharts library is ok in the code you've used.
Happy to help more if required. I have since built much of this into a plugin which is much cleaner...

jqGrid multiselect is very slow with large local data and jQueryUI 1.8, jQueryUI 1.7 is fine

I am using jqGrid in an ASP.NET page and injecting the datainto a script block on the page and then loading from there. For this one use case it is necessary that we have a large amount of data visible on the screen at once. which involves 300~500 records with 30 columns on each row. Paging for this case is not a good fit. The user needs to be able to scan the mass amount of data, select 40~60 rows and then move off to another screen.
I was unsure if this would be a good fit in the begging for jqGrid but in prototyping everything worked plenty fast enough. However moving to production it is painfully slow in the multi-select mode.
I have narrowed down the pain point to jQueryUI 1.8. If I revert just that back to jQueryUI 1.7 it is plenty fast enough.
example of jQueryUI 1.7 ~ 17.htm
example of jQueryUI 1.8 ~ 18.htm
note: the examples show the difference the most in FireFox and IE, Chrome seems ok
Both pages use the latest jqGrid 3.8 with all options selected.
loading jQuery and jQueryUI from the google CDN
<base href="http://ajax.googleapis.com/" />
<link href="/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css" type="text/css" />
<script src="/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
loading jqGrid JS / CSS from my server
<link type="text/css" href="http://mymx.biz/jqGrid/ui.jqgrid.css" />
<script src="http://mymx.biz/jqGrid/grid.locale-en.js" type="text/javascript"></script>
<script src="http://mymx.biz/jqGrid/jquery.jqGrid.min.js" type="text/javascript"></script>
and my large local dataset
<script src="http://mymx.biz/jqGrid/getGridData.js?v=1" type="text/javascript"></script>
example row from dataset
var gridData = [
{id:"1",aa:"aa1",bb:"bb1",cc:"cc1",dd:"dd1",ee:"ee1", ff:"ff1",
gg:"gg1", hh:"hh1", ii:"ii1", jj:"jj1", kk:"kk1", ll:"ll1", mm:"mm1", nn:"nn1"},
{...}
];
My basic jqGrid setup calls
$(function () {
var gridData = getGridData(); // pulls from getGridData.js
setupGrid(gridData);
});
function SelectRow(rowid) {
// I will be firing AJAX calls here in the future
console.log("rowid: " + rowid);
}
function setupGrid(gridData) {
$("#testGrid").jqGrid({
data: gridData,
height: 'auto',
rowNum: gridData.length,
multiselect: true,
datatype: 'local',
multiboxonly: false,
gridview: true, // not sure if this is needed since jqGrid 3.6
onSelectRow: function (rowid) { SelectRow(rowid); },
colNames: ['id', 'aa', 'bb', 'cc', 'dd', 'ee', 'ff',
'gg', 'hh', 'ii', 'jj', 'kk', 'll', 'mm', 'nn'],
colModel: [
{ name: 'id', width: 40 },
{ name: 'aa', width: 40 },
{ name: 'bb', width: 40 },
{ name: 'cc', width: 40 },
{ name: 'dd', width: 40 },
{ name: 'ee', width: 40 },
{ name: 'ff', width: 40 },
{ name: 'gg', width: 40 },
{ name: 'hh', width: 40 },
{ name: 'ii', width: 40 },
{ name: 'jj', width: 40 },
{ name: 'kk', width: 40 },
{ name: 'll', width: 40 },
{ name: 'mm', width: 40 },
{ name: 'nn', width: 40 }
],
caption: "Test Grid"
});
}
If anyone has some insight why the grid is so slow with jQueryUI 1.8 vs jQueryUI 1.7 would be much appreciated.
"Nice" to see someone with the same problem.
I opened your example and clicking on rows or checkbox performs badly with UI 1.8.
We (php project, data locally stored in a JSON-variable, locally processed (sorting, filtering), no paging, up to 1000 records at once) were faced with the same problem and did not find a solution yet. UI 1.7 performs nice in any browser, but with the change to 1.8 we noticed some heavy performance issues with only firefox (3.6, no lower version tested). IE6, our other supported browser works fine (at least this time :-)
I tried to find out the root of this problem and used firebug to profile the runtime of different functions called after the click. I know there is a different event handling by jquery for different browsers (normalization), but I do not knwow if this has any impact.
The result can be be found here:
profile.png
Maybe you see anything noticeable in this list.
As we also did not find any solution to this, we downgraded to UI 1.7.3 (which comes up with other but minor problems).
Kai
edit: Did you report this problem in the jqGrid forum? Most problems will be at least approached.
edit2: Ok, after some further investigations and some research I found a workaround. As described here (http://www.trirand.com/blog/?page_id=393/bugs/compatibility-bug-with-jquery-ui-1-8-4/), the problem can be (temporarily) solved by removing the following line from the UI's css:
.ui-widget :active { outline: none; }
I can confirm that there's no performance issue anymore after removing this line. As this rule has no effect to our style, the workaround becomes a fix for us... :-)
These are general observations I've made with regard to JQGrid and IE >= 7.
I've seen you example pages and many of these won't affect your specific situation.
IE doesn't handle large javascript well - keep your javascript small and it will load jqgrid faster.
Don't pass html elements when loading the grid, building them after the load improves initial load speed.
If you can - Use paging, this will improve load speed and interactive states.
You can load you whole grid data at once and still include paging - no need to call the server multiple times.
This will slow initial load, but improve paging speeds.
If you can, add this :<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> to the head of your html. It will run IE 8 in IE 7 mode, which I find works faster with JQGrid.
Event propagation in jquery, so adding an event listener to a parent with children will also activate that event on the children. When interacting with other DOM object, keep this in mind. Jquery .hover prevents propagation.
This is an important one - :hover in IE is slow and really really slow in IE 8!
Jquery theme roller - The Interaction states section uses :hover on a tags and when hovering inserts a background image, which when removed improves performance a lot I find. So for exmaple background: #5d5f69 url(/content/images/ui-bg_flat_75_5d5f69_40x100.png) 50% 50% repeat-x; should be background: #5d5f69; This improves interactive states.
Let me know you findings - I'm still looking for ways to improve my grid speed too.

Resources