I literally just copy and paste the example code from the API documentation (link: https://developer.here.com/cn/documentation/maps/hls-chn/topics/quick-start.html)
and I put in my own app_id and app_code into the appropriate lines (for obvious reasons I cannot disclose my api key and code; sorry).
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<script src="https://js.hereapi.cn/v3/3.0/mapsjs-core.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.hereapi.cn/v3/3.0/mapsjs-service.js"
type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div style="width: 640px; height: 480px" id="mapContainer"></div>
<script>
// Initialize the platform object:
var platform = new H.service.Platform({
'app_id': '{YOUR_APP_ID}',
'app_code': '{YOUR_APP_CODE}'
});
// Obtain the default map types from the platform object
var maptypes = platform.createDefaultLayers();
// Instantiate (and display) a map object:
var map = new H.Map(
document.getElementById('mapContainer'),
maptypes.normal.map,
{
zoom: 10,
center: { lng: 13.4, lat: 52.51 }
});
</script>
</body>
</html>
However, the browser reported the following errors: screenshot of errors in console:
This is what the webpage looks like: the map does not display
The errors are confusing because the code snippet was not written by me, but directly copied from HERE Map's developer documentation. Your help is much appreciated. Thank you.
If you are using freemium plan then probably you should follow this documentation-
https://developer.here.com/documentation/maps/3.1.17.0/dev_guide/topics/get-started.html
and the below code-
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div style="width: 640px; height: 480px" id="mapContainer"></div>
<script>
// Initialize the platform object:
var platform = new H.service.Platform({
'apikey': 'Your_api_key'
});
// Obtain the default map types from the platform object
var maptypes = platform.createDefaultLayers();
// Instantiate (and display) a map object:
var map = new H.Map(
document.getElementById('mapContainer'),
maptypes.vector.normal.map,
{
zoom: 10,
center: { lng: 13.4, lat: 52.51 }
});
</script>
</body>
</html>
Morning !
I have my google maps setup to open an info window on the map however i want the info window to open in the article 'infowin' , does anyone know how i can get the information with is popping up fine on the map to populate in the side bar , can find a working version here
http://www.connectteesvalley.com/busdeparturessidetesting.asp
thank you
<!DOCTYPE html>
<html>
<head>
<!--Force IE standards mode-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1" />
<!--HTML5 IE enabling script-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<link rel="stylesheet" type="text/css" href="styles/desktopcore.css" />
<link rel="stylesheet" type="text/css" href="styles/desktopbus.css" />
<![endif]-->
<!--<link rel="stylesheet" type="text/css" media="(min-width: 551px) and (max-width: 870px)" href="styles/tabletbus.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<!--http://www.google.com/webfonts#ChoosePlace:select Example of Web Font Link-->
<!--<link rel="stylesheet" type="text/css" href="styles/mobilecore.css" media="(min-device-width: 0px) and (max-device-width: 764px)"/>
<link rel="stylesheet" type="text/css" href="styles/mobilebus.css" media="(min-device-width: 0px) and (max-device-width: 764px)"/> -->
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 481px)" href="styles/desktopcore.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 481px)" href="styles/desktopbus.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="styles/mobilecore.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="styles/mobilebus.css" />
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'>
<!--Jquery core-->
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="gmap_funcs.js"></script>
<script type="text/javascript" src="gmap_funcsv3.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false®ion=GB"></script>
<script type="text/javascript" src="gmap_jscoord-1.1.1.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
<!--//
var userQry = '<%=Request("stopname")%>';
var rtSearchType = ""
function initPg(){
<%if LCase(Request("auto")) = "1" then%>
if (userQry.length <= 3){
getStopsGoByRoute(userQry);
} else {
getStopsGoByTxt(userQry);
document.getElementById('stoptxtquery').value = '<%=Request("stopname")%>';
}
<%end if%>
showMap();
}
var mapOpened = false;
var map;
var currMarker;
var geoCoder;
var startPt;
function showMap() {
var mapObj = document.getElementById('map-canvas');
mapObj.style.display = 'block';
document.getElementById('rt-results').style.display = 'none';
geoCoder = new google.maps.Geocoder();
startPt = new google.maps.LatLng(54.57019583004256,-1.3190460205078125);
var myOptions = {
zoom: 10,
center: startPt,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
};
map = new google.maps.Map(mapObj, myOptions);
google.maps.event.addListener(map, 'click', function(res){
en = LatLonWGS842OS_func(res.latLng.lat(), res.latLng.lng());
getStopsGoByCoord(parseInt(en.easting), parseInt(en.northing));
/*infowindow = new google.maps.InfoWindow({
content:"<div class='infowin'><div class='inner'><h3>aaaa</h3></div></div>",
position:startPt,
pixelOffset:new google.maps.Size(0,33)
});
infowindow.open(map)
infowindow.setContent("OOOO<br />aaaddad")*/
});
}
function resetMap(){
map.setCenter(startPt);
map.setZoom(10);
gmapDeleteOverlays();
deleteMarkers();
if (infowindow != undefined){
infowindow.close();
}
document.getElementById('foundstops').style.display="none";
}
function getStopsGoByTxt(qry){
document.getElementById('rt-results').style.display = 'none';
document.getElementById('fbloader').style.display="inline";
sendXmlHttpRequestGet("datanew/nextbuses/findstops.asp?stype=bytxt&qry="+qry,function(res){
//alert(res)
eval("stopsJson="+res);
rtSearchType = "text";
foundStops();
},"");
}
function getStopsGoByCoord(e,n){
document.getElementById('rt-results').style.display = 'none';
var ll = OS2LatLonWGS84_func(e, n);
ll = new google.maps.LatLng(ll.lat, ll.lng);
currMarker = gmapAddMarker({position: ll,title:'',map:map, icon:'images/arrow.png'});
document.getElementById('fbloader').style.display="inline";
sendXmlHttpRequestGet("datanew/nextbuses/findstops.asp?stype=bycoords&e="+e+"&n="+n,function(res){
//alert(res)
eval("stopsJson="+res);
rtSearchType = "map";
foundStops();
},"");
}
function gmapGeoCode(qry) {
geoCodeAddr(geoCoder,{'address':qry+", UK", 'region':"UK"}, gmapGeoCodeResults)
}
function gmapGeoCodeResults(res) {
en = LatLonWGS842OS_func(res.lat(), res.lng());
getStopsGoByCoord(en.easting,en.northing);
}
function selectAddress(addr,e,n){
getStopsGoByCoord(e,n);
document.getElementById('stoptxtquery').value = addr;
}
var stopsJson;
var stopMarkers = [];
function foundStops(){
document.getElementById('rt-results').innerHTML = "";
document.getElementById('rt-results').style.display = 'block';
document.getElementById('fbloader').style.display="none";
var selObj = document.getElementById('foundstops');
var ll;
selObj.style.display="block";
selObj.length = 0;
appendToSelectObj(selObj, " --- Select a stop --- ", "");
gmapDeleteOverlays();
deleteMarkers();
stopMarkers = [];
stopsTotal = 0;
if (stopsJson.stops.length < 1){
gmapGeoCode(document.getElementById("stoptxtquery").value);
}
var bounds = new google.maps.LatLngBounds();
for (i=0;i<stopsJson.stops.length;i++){
if (stopsJson.stops[i].town != ""){
stopsJson.stops[i].town = ", "+stopsJson.stops[i].town;
}
//stopsJson.stops[i].name = stopsJson.stops[i].name+", "+stopsJson.stops[i].dir+stopsJson.stops[i].town+" ("+stopsJson.stops[i].sms+")";
appendToSelectObj(selObj,stopsJson.stops[i].name , i);
ll = OS2LatLonWGS84_func(stopsJson.stops[i].e, stopsJson.stops[i].n);
ll = new google.maps.LatLng(ll.lat, ll.lng);
bounds.extend(ll);
map.fitBounds(bounds);
if (browserIE) {
marker = gmapAddMarker({position: ll, map:map, title:stopsJson.stops[i].name});
} else {
marker = gmapAddMarker({position: ll, map:map, title:stopsJson.stops[i].name, icon:'images/new/marker-bus.png'});
}
marker.atco = stopsJson.stops[i].atco;
marker.i = i;
stopMarkers.push(marker);
google.maps.event.addListener(marker, 'click', function(res){
selectStop(this.i, this.title)
});
stopsTotal++;
}
if (selObj.length > 1){
jqueryOrderSelectOpts("foundstops");
selObj[0].text = "--- Select a stop ("+stopsTotal+" stops found) ---"
if (stopsTotal <= 2){
selObj.selectedIndex = 1;
selectStop(stopMarkers[0].i, stopMarkers[0].title)
}
}
if (stopsTotal <= 0){
selObj.style.display="none";
document.getElementById('rt-results').innerHTML = '<div class="warning">No stop was found please select refine your search or select a point on the map</div>';
}
if (map.getZoom() > 15){
map.setZoom(15);
}
}
function deleteMarkers(){
for (i=0;i<stopMarkers.length;i++){
stopMarkers[i].setMap(null);
}
stopMarkers = [];
}
var infowindow;
var selectedI;
function selectStop(indexI, stopName){
selectedI = indexI
//alert(indexI+" ----- "+stopName+"\n"+stopsJson.stops[indexI].name)
var stopName = stopsJson.stops[indexI].name;
var smsCode = stopsJson.stops[indexI].sms;
$('#foundstops').val(indexI);
var mkr = null;
for (i=0;i<stopMarkers.length;i++){
if (stopMarkers[i].i == indexI){
mkr = stopMarkers[i]
}
}
if (infowindow != undefined){
infowindow.close();
}
infowindow = new google.maps.InfoWindow({
content: "<div class='infowin'><div class='inner'><h3>"+stopName+" </h3><div id='infowin-rtloader' class='realtimeresults'><img src='images/ajax-loader-facebook.gif' /> loading...</div></div></div>",
pixelOffset:new google.maps.Size(0,33)
});
if (mkr != null){
infowindow.open(map,mkr);
getNextBuses(stopsJson.stops[indexI].name, stopsJson.stops[indexI].atco, "", "", "infowin-rtresults", "infowin-rtloader", true);
}
}
var nextbusesNum = 5;
function searchKeyPress(e, func, params){
// look for window.event in case event isn't passed in
if (window.event) { e = window.event; }
if (e.keyCode == 13){
func(params);
return false; // disables submitting form, must have "return searchKeyPress" on the keypress event in textbox
}
}
//-->
</script>
<script type="text/javascript">
<!--//
// Hover navigation images for page:
var navImgHoverArr = ['images/button__myjourney.jpg','images/button__bus.jpg','images/button__rail.jpg','images/button__walk.jpg','images/button__cycle.jpg','images/button__air.jpg','images/button__drive.jpg','images/button__taxi.jpg'];
//-->
</script>
<title>Connect Tees Valley - Live Bus Information</title>
<!--Google Analytics Tracking Snippet - 15 November 2012-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-11278574-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body onload="initNav();initPg()" class="realtime">
<section id="allContent">
<header id="topHeader">
<div id="headerContent">
<div id="connectLogo"></div>
<h1>Tees Valley Live Bus Information</h1>
<div id="connectModeLogo"></div>
</div>
</header>
<div id="modeBand"></div>
<section id="mainSection">
<h2>To get departure information from any bus stop in the Tees Valley area<br />please either search for a stop by text search or select a point on the map.</h2>
<article id="busLive">
<input type="text" name="stoptxtquery" id="stoptxtquery" style="width:auto" class="txtgray" onkeyup="searchKeyPress(event, getStopsGoByTxt, document.getElementById('stoptxtquery').value)" value="Stop name, street name, postcode or SMS code" onclick="javascript:if (this.value == 'Stop name, street name, postcode or SMS code'){this.value=''}" />
<input type="submit" id="realSearch" aclass="but" value="Search" align="absmiddle" onclick="getStopsGoByTxt(document.getElementById('stoptxtquery').value)" />
reset
<!--//<label> or </label>
<input type="button" class="but" value="Show map" onclick="showMap()" />//-->
<img src="images/ajax-loader-facebook.gif" id="fbloader" style="display:none" />
<select name="foundstops" id="foundstops" style="display:none" onchange="selectStop(this.value, $('#foundstops option:selected').text())"></select>
<div id="map-canvas" ></div>
<div id="rt-results"></div>
</article>
<article id="infowin">
</article>
</section>
<!--Close Main Section-->
<!--Document Footer-->
<div id="modeBand"></div>
<section id="journeyPlanner">
<form id="jpform" method="post" action="http://www.connectteesvalley.com/jplanner1.asp">
<h2>Connect Journey Planner</h2>
<input type="text" id="jpFrom" name="addrfrom" placeholder="I'm leaving from..." tabindex="1"/>
<input type="text" id="jpTo" name="addrto" placeholder="I'm travelling to..." tabindex="2"/>
<input type="submit" id="jpGo" value="Go" tabindex="3"/>
<br class="clearboth" />
</form>
</section>
<section id="homeSection">
<nav id="mainNavigation">
<ul>
<li id="busButton">Bus</li>
<li id="trainButton">Train</li>
<li id="walkButton">Walk</li>
<li id="cycleButton">Cycle</li>
<li id="driveButton">Drive</li>
<li id="flyButton">Fly</li>
<li id="taxiButton">Taxi</li>
</ul>
</nav>
</section>
<section id="socialSection">
<div id="youtubeLogo"></div>
<div id="twitterLogo"></div>
<div id="facebookLogo"></div>
<h3>Let's journey together</h3>
</section>
<div class="homeBand"></div>
</section>
</body>
</html>
You cannot open an infowindow inside an <article>-element, but you can easily copy the content from the infoWindow to that element.
var article = document.getElementById('infowin'); // <-- get <article id="infowin">
article.innerHTML=infoWindow.getContent();
Sorry to say, I gave up to find the logic in the 347 lines of code in the question. So I dont know exactly where in the code you want it to happend.
You may could take advantage of the content_changed event to track when the content for the infoWindow is changed.
google.maps.event.addListener(infoWindow, 'content_changed', function() {
var article = document.getElementById('infowin');
article.innerHTML=infoWindow.getContent();
});
So whenever the content of the infowindow changes, <article> is updated.
One ad unit just stopped to work and after trying to generate new code it is still not working. When I use google console it is just showing warning Ad unit failed to fetch. Other 3 ads are working normally. They are inserted before I started to work on this project.
New ad code is generated like
header
<script type='text/javascript'>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
var gads = document.createElement('script');
gads.async = true;
gads.type = 'text/javascript';
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') +
'//www.googletagservices.com/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>
<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.defineSlot('/6000854/R300x250_L', [300, 250], 'div-gpt-ad-1367703773182-0').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
body
<!-- R300x250_L -->
<div id='div-gpt-ad-1367703773182-0' style='width:300px; height:250px;'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1367703773182-0'); });
</script>
</div>
Old code is generated like
header
<script type='text/javascript' src='http://partner.googleadservices.com/gampad/google_service.js'></script>
<script type='text/javascript'>
GS_googleAddAdSenseService("ca-pub-2838961657718357");
GS_googleEnableAllServices();
</script>
<script type='text/javascript'>
GA_googleAddSlot("ca-pub-2838961657718357", "Top728x90");
GA_googleAddSlot("ca-pub-2838961657718357", "Right300x250");
GA_googleAddSlot("ca-pub-2838961657718357", "Right300x250Bottom");
</script>
<script type='text/javascript'>
GA_googleFetchAds();
</script>
body
<!-- Right300x250Bottom -->
<script type='text/javascript'>
GA_googleFillSlot("Right300x250Bottom");
</script>
Is there maybe conflict because of diferent tags or code
NOTE: I am just wordpress front end developer, I don't have access to google DFP services and I am not generating tags or code
EDIT: Based on this discussion it looks like using the old GAM tags with GPT tags may now be an issue (just recently) http://productforums.google.com/forum/#!topic/dfp/snK7znwUMBE
I think you should convert the GAM tags to to GPT tags and use just the DFP GPT tags if possible to stop this happening... its most probably a conflict between the two scripts and depending on the order they get loaded the GPT tags may not work...
ORIGINAL:
I just tried your code and two ads showed as expected. So there does not appear to be any conflicts using both scripts at the same time.
Potentially you have been refreshing the page so many times that there are no ads that will be displaying for you through DFP anymore because of rate limits? That is just a wild guess though. If I refresh the page a lot I do get the failed to fetch message every now and then in the console so I think it is probably just a rate limit and something that a normal user will not have a problem with.
This is the code that I am using, two 300x250 ads show on the page so everything is working correctly.
<html>
<head>
<title>DFP TEST</title>
<script type='text/javascript'>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
var gads = document.createElement('script');
gads.async = true;
gads.type = 'text/javascript';
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') +
'//www.googletagservices.com/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>
<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.defineSlot('/6000854/R300x250_L', [300, 250], 'div-gpt-ad-1367703773182-0').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
<script type='text/javascript' src='http://partner.googleadservices.com/gampad/google_service.js'></script>
<script type='text/javascript'>
GS_googleAddAdSenseService("ca-pub-2838961657718357");
GS_googleEnableAllServices();
</script>
<script type='text/javascript'>
GA_googleAddSlot("ca-pub-2838961657718357", "Top728x90");
GA_googleAddSlot("ca-pub-2838961657718357", "Right300x250");
GA_googleAddSlot("ca-pub-2838961657718357", "Right300x250Bottom");
</script>
<script type='text/javascript'>
GA_googleFetchAds();
</script>
</head>
<body>
<!-- R300x250_L -->
<div id='div-gpt-ad-1367703773182-0' style='width:300px; height:250px;'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1367703773182-0'); });
</script>
</div>
<!-- Right300x250Bottom -->
<script type='text/javascript'>
GA_googleFillSlot("Right300x250Bottom");
</script>
</body>
</html>
Tried several methods but still unable to get Google Ad to render. The intention is to responsively place ads based on window width. But I'm unable to place even a single ad.
Here's the most reliable method I can think of:
/* templates.html */
<head>
<script type="text/javascript">
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
</script>
<script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script>
</head>
<body>
<div class="container">
{{> page}}
</div>
</body>
<template name="page">
<div class="page_ad"></div>
</template>
/* client.js */
Template.page.rendered = function(){
googletag.cmd.push(function() {
googletag.defineSlot('LEADERBOARD', [728, 90], 'AD-CODE-ID').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
$('.page_ad').html("<div id='AD-CODE-ID' style='width:728px; height:90px;'>");
googletag.cmd.push(function() { googletag.display('AD-CODE-ID')});
};
Thanks for your consideration.
Here is how I do it. You can read more about it in this blog post.
Template.MyAds.rendered = function() {
$.getScript("//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js", function() {
var ads, adsbygoogle;
ads = '<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-72414***074839" data-ad-slot="4009***57" data-ad-format="auto"></ins>';
$('.leaderboard').html(ads);
return (adsbygoogle = window.adsbygoogle || []).push({});
});
};
Check out the iframe solution here; Meteor JS: use external script
Check out the information about that method being against TOS; http://productforums.google.com/forum/#!category-topic/adsense/adsense-basics-and-policies/JP6vrWxFMVg
I am currently creating a page that is accessed via the custom url functionality.
I am trying to delete all components in a multivalue field. I get a Cannot delete a value as an error when deleting the last one.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" language="javascript" src="/WebUI/Core/Controls/Popup/PopupInit.js"></script>
<script type="text/javascript" language="javascript">
function removeAllValues() {
var fields = window.dialogArguments.getFields();
if (fields != null) {
for (var i = 0; i < fields.length; i++) {
window.dialogArguments.container.deleteField(fields[i]);
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" onclick="removeAllValues();" value="Delete All" />
</div>
</form>
</body>
</html>
Is there any documentation other than two brief pages on the LiveContent site?
You could also change your function a little bit to delete all fields except the last one and then set the last fields value to nothing:
function removeAllValues() {
var fields = window.dialogArguments.getFields();
if (fields != null) {
var lastFieldIndex = fields.length - 1;
for (var i = 0; i < lastFieldIndex; i++) {
window.dialogArguments.container.deleteField(fields[i]);
}
fields[lastFieldIndex].setValues([]);
}
}