Hi folks,
I am trying to add google map plugin without success.
I can see that the page loads the script fine but the map comes empty.
html code:
<div class="column large-10 large-offset-1 end" style="min-height:100px;">
<div id="googleMap" style="width:100%;height:300px;"> </div>
<br/><br/>
</div>
What am I missing here ?
thx in advance.
I think you have to call the Google maps code first and then put your “initialize” code in a separate script element.
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
function initialize() {var center = new google.maps.LatLng(...
</script>
Give that a try and see if it works.
There doesn’t seem to be anything wrong from what I can see. Could you copy and paste the entire controller and googleMap.html files? Then select the code and use the formatting button for code that looks like this: </>
sure, there it is.
Controller:
var portal = require('/lib/xp/portal'); // Import the portal functions
var thymeleaf = require('/lib/xp/thymeleaf'); // Import the Thymeleaf rendering function
var vetinst = require("vetinst/vetinst");
exports.get = function(req) {
var googleMap = portal.getComponent();
var coordinates = null; //59.668551, 10.766806
var mapType = "ROADMAP";
var zoom = 10;
var defaultMap = null;
if(googleMap.config){
if(googleMap.config.map !== undefined && googleMap.config.map) {
coordinates = googleMap.config.map;
}
if(googleMap.config.mapType !== undefined && googleMap.config.mapType) {
mapType = googleMap.config.mapType;
}
if(googleMap.config.mapZoom !== undefined && googleMap.config.mapZoom) {
zoom = (googleMap.config.mapZoom > 0 && googleMap.config.mapZoom < 16) ? googleMap.config.mapZoom : 10;
}
defaultMap = '<script src="http://maps.googleapis.com/maps/api/js"> ' +
'function initialize() {' +
'var center = new google.maps.LatLng(' + coordinates + '); ' +
'var mapProp = {center:center, zoom: ' + zoom + ', mapTypeId:google.maps.MapTypeId.' + mapType + ', scrollwheel: false };' +
'var map = new google.maps.Map(document.getElementById("map"),mapProp); ' +
'var marker = new google.maps.Marker({ position:center}); marker.setMap(map);' +
'} google.maps.event.addDomListener(window, "load", initialize);</script>';
}
var model = {
};
var view = resolve('googleMap.html'); // Specify the view file to use
return {
// Return the merged view and model in the response object
body: thymeleaf.render(view, model),
// Put the maps' javascript into the head of the document
pageContributions: {
headEnd: defaultMap
}
};
};
Html:
<div class="column large-10 large-offset-1 end">
<img class="googleMap" id="map" alt="" />
<br/><br/>
</div>
I also realized that there is another issue. When you access the server URL without previewing this error occurs:
TypeError: <script src="http://maps.googleapis.com/maps/api/js">
function initialize() {var center = new
google.maps.LatLng(59.668551,10.766806); var mapProp = {center:center,
zoom: 13, mapTypeId:google.maps.MapTypeId.ROADMAP, scrollwheel: false
};var map = new google.maps.Map(document.getElementById("map"),mapProp);
var marker = new google.maps.Marker({ position:center});
marker.setMap(map);} google.maps.event.addDomListener(window, "load",
initialize);</script> has no such function "push"
(com.enonic.xp.resource.ResourceProblemException)
If you preview the page in the admin console this error does not occur.
Thx.
Try:
defaultMap = '<script src="http://maps.googleapis.com/maps/api/js"></script> ' +
'<script>
'function initialize() {' +
'var center = new google.maps.LatLng(' + coordinates + '); ' +
'var mapProp = {center:center, zoom: ' + zoom + ', mapTypeId: google.maps.MapTypeId.' + mapType + ', scrollwheel: false };' +
'var map = new google.maps.Map(document.getElementById("map"), mapProp); ' +
'var marker = new google.maps.Marker({ position:center}); marker.setMap(map);' +
'} '+
'google.maps.event.addDomListener(window, "load", initialize);' +
'</script>';
}
Also, don’t put your google map in an <img /> tag - put it in a <div></div>.
The push error you’re receiving is because a different place in your application tries to add to the headEnd page contribution array - which is currently a string. If you this instead, the error will go away:
return {
// Put the maps' javascript into the head of the document
pageContributions: {
headEnd: [ defaultMap ]
}
};
hey selbekk,
The map works fine now after implementing your changes., however the push error still persists after adding:
return {
// Put the maps' javascript into the head of the document
pageContributions: {
headEnd: [ defaultMap ]
}
};Can you please post the entire stack trace?
Yeah, sure thing!
TypeError: <script
src="http://maps.googleapis.com/maps/api/js"></script><script>function
initMap() {var myLatlng = new google.maps.LatLng(59.668080,
10.766901);var mapOptions = {zoom:13,center:
myLatlng,mapTypeId:google.maps.MapTypeId.ROADMAP};var map = new
google.maps.Map(document.getElementById("map"),
mapOptions);}google.maps.event.addDomListener(window, "load",
initMap);</script> has no such function "push"
(com.enonic.xp.resource.ResourceProblemException)
In com.vetinst:/site/filters/ga-report.js at line 2624
snippet += '<!-- End Google Analytics -->';
res.pageContributions.headEnd.push(snippet);27
return res;
1com.enonic.xp.portal.impl.exception.ExceptionMapper.map(ExceptionMapper.java:27) 2com.enonic.xp.portal.impl.PortalServlet.handleError(PortalServlet.java:215) 3com.enonic.xp.portal.impl.PortalServlet.doHandle(PortalServlet.java:209) 4com.enonic.xp.portal.impl.PortalServlet.service(PortalServlet.java:76) 5javax.servlet.http.HttpServlet.service(HttpServlet.java:790) 6org.apache.felix.http.base.internal.handler.ServletHandler.handle(ServletHandler.java:85) 7org.apache.felix.http.base.internal.dispatch.InvocationChain.doFilter(InvocationChain.java:79) 8com.enonic.xp.web.impl.auth.BasicAuthFilter.doHandle(BasicAuthFilter.java:31) 9com.enonic.xp.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:31) 10com.enonic.xp.web.filter.BaseWebFilter.doFilter(BaseWebFilter.java:33) 11org.apache.felix.http.base.internal.handler.FilterHandler.handle(FilterHandler.java:135) 12org.apache.felix.http.base.internal.dispatch.InvocationChain.doFilter(InvocationChain.java:74) 13com.enonic.xp.web.impl.context.ContextFilter.lambda$doHandle$0(ContextFilter.java:34) 14com.enonic.xp.web.impl.context.ContextFilter$$Lambda$112/1490036076.call(Unknown Source) 15com.enonic.xp.context.ContextImpl.callWith(ContextImpl.java:101) 16com.enonic.xp.web.impl.context.ContextFilter.doHandle(ContextFilter.java:33) 17com.enonic.xp.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:31) 18com.enonic.xp.web.filter.BaseWebFilter.doFilter(BaseWebFilter.java:33) 19org.apache.felix.http.base.internal.handler.FilterHandler.handle(FilterHandler.java:135) 20org.apache.felix.http.base.internal.dispatch.InvocationChain.doFilter(InvocationChain.java:74) 21com.enonic.xp.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:26) 22com.enonic.xp.web.filter.BaseWebFilter.doFilter(BaseWebFilter.java:33) 23org.apache.felix.http.base.internal.handler.FilterHandler.handle(FilterHandler.java:135) 24org.apache.felix.http.base.internal.dispatch.InvocationChain.doFilter(InvocationChain.java:74) 25org.apache.felix.http.base.internal.dispatch.RequestDispatcherImpl.forward(RequestDispatcherImpl.java:73 )26com.enonic.xp.web.vhost.impl.VirtualHostFilter.doHandle(VirtualHostFilter.java:40) 27com.enonic.xp.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:31) 28com.enonic.xp.web.filter.BaseWebFilter.doFilter(BaseWebFilter.java: 33)29org.apache.felix.http.base.internal.handler.FilterHandler.handle(FilterHandler.java:135) 30org.apache.felix.http.base.internal.dispatch.InvocationChain.doFilter(InvocationChain.java:74) 31com.enonic.xp.web.impl.dos.DosFilterWrapper.doFilter(DosFilterWrapper.java:60) 32org.apache.felix.http.base.internal.handler.FilterHandler.handle(FilterHandler.java:135) 33org.apache.felix.http.base.internal.dispatch.InvocationChain.doFilter(InvocationChain.java:74) 34org.apache.felix.http.base.internal.dispatch.Dispatcher.dispatch(Dispatcher.java:124) 35org.apache.felix.http.base.internal.DispatcherServlet.service(DispatcherServlet.java:61) 36javax.servlet.http.HttpServlet.service(HttpServlet.java:790) 37org.eclipse.jetty.servlet.ServletHolder.handle(ServletHolder.java:821) 38org.eclipse.jetty.servlet.ServletHandler.doHandle(ServletHandler.java:583) 39org.eclipse.jetty.server.handler.ScopedHandler.handle(ScopedHandler.java:143) 40org.eclipse.jetty.server.handler.gzip.GzipHandler.handle(GzipHandler.java:437) 41org.eclipse.jetty.server.session.SessionHandler.doHandle(SessionHandler.java:226) 42org.eclipse.jetty.server.handler.ContextHandler.doHandle(ContextHandler.java:1158) 43org.eclipse.jetty.servlet.ServletHandler.doScope(ServletHandler.java:511) 44org.eclipse.jetty.server.session.SessionHandler.doScope(SessionHandler.java:185) 45org.eclipse.jetty.server.handler.ContextHandler.doScope(ContextHandler.java:1090) 46org.eclipse.jetty.server.handler.ScopedHandler.handle(ScopedHandler.java:141) 47org.eclipse.jetty.server.handler.HandlerWrapper.handle(HandlerWrapper.java:119) 48org.eclipse.jetty.server.Server.handle(Server.java:517) 49org.eclipse.jetty.server.HttpChannel.handle(HttpChannel.java:306) 50org.eclipse.jetty.server.HttpConnection.onFillable(HttpConnection.java:242) 51org.eclipse.jetty.io.AbstractConnection$ReadCallback.succeeded(AbstractConnection.java:261) 52org.eclipse.jetty.io.FillInterest.fillable(FillInterest.java:95) 53org.eclipse.jetty.io.SelectChannelEndPoint$2.run(SelectChannelEndPoint.java:75) 54org.eclipse.jetty.util.thread.strategy.ExecuteProduceConsume.produceAndRun(ExecuteProduceConsume.java:213) 55org.eclipse.jetty.util.thread.strategy.ExecuteProduceConsume.run(ExecuteProduceConsume.java:147) 56org.eclipse.jetty.util.thread.QueuedThreadPool.runJob(QueuedThreadPool.java:654)57org.eclipse.jetty.util.thread.QueuedThreadPool$3.run(QueuedThreadPool.java:572)58java.lang.Thread.run(Thread.java:745)
Thanks 
Looks like the issue comes from a collision with the google analytics app (source code here), which tries to push another entry to the headEnd array. That’s an error with that application, and I filed a bug report with them on Github. That being said - since you’re creating an array, this issue shouldn’t happen. But oh well.
I suggest that you just sidestep the entire issue by switching out headEnd with bodyEnd.
@srs - I submitted an issue and a pull request to fix it on github. Please consider it for the next version 
Thanks Kristofer. I merged the pull request and we should make a 1.2.0 release soon. I’ll also make a note in the docs that page contributions should always be added as an array and that they should be checked first in the filters.
Version 1.2.0 of the Google Analytics app has been released now. Thanks for the pull request 
Good spot there Kristofer. I’ll look into some of the libs/apps I’ve built and update them too if needed.
hey selbekk,
Spot on! Thx for letting us know about that.