How to add Google Maps Adsense code to leaflet-google-plugin? WordPress

• SOLVED

I am the developer of http://www.mapsmarker.com and would like to add support for Google Adsense for maps. Unfortunately I fail on integrating the adsense code into the leaflet-google-maps-plugin-code. Here is my google leaflet plugin code (original code for this leaflet-plugin here: https://github.com/shramov/leaflet-plugins/blob/master/layer/tile/Google.js):


...
google.load("maps", "3", {"other_params":"sensor=false&libraries=adsense"});
L.Google = L.Class.extend({
includes: L.Mixin.Events,

options: {
minZoom: 0,
maxZoom: 18,
tileSize: 256,
subdomains: 'abc',
errorTileUrl: '',
attribution: '',
opacity: 1,
continuousWorld: false,
noWrap: false
},

// Possible types: SATELLITE, ROADMAP, HYBRID, TERRAIN
initialize: function(type, options) {
L.Util.setOptions(this, options);

this._ready = google.maps.Map != undefined;
if (!this._ready) L.Google.asyncWait.push(this);

this._type = type || 'SATELLITE';
},

onAdd: function(map, insertAtTheBottom) {
this._map = map;
this._insertAtTheBottom = insertAtTheBottom;

// create a container div for tiles
this._initContainer();
this._initMapObject();

// set up events
map.on('viewreset', this._resetCallback, this);

this._limitedUpdate = L.Util.limitExecByInterval(this._update, 150, this);
map.on('move', this._update, this);
//map.on('moveend', this._update, this);

map._controlCorners['bottomright'].style.marginBottom = "1em";

this._reset();
this._update();
},

onRemove: function(map) {
this._map._container.removeChild(this._container);
//this._container = null;

this._map.off('viewreset', this._resetCallback, this);

this._map.off('move', this._update, this);
map._controlCorners['bottomright'].style.marginBottom = "0em";
//this._map.off('moveend', this._update, this);
},

getAttribution: function() {
return this.options.attribution;
},

setOpacity: function(opacity) {
this.options.opacity = opacity;
if (opacity < 1) {
L.DomUtil.setOpacity(this._container, opacity);
}
},

setElementSize: function(e, size) {
e.style.width = size.x + "px";
e.style.height = size.y + "px";
},

_initContainer: function() {
var tilePane = this._map._container,
first = tilePane.firstChild;

if (!this._container) {
this._container = L.DomUtil.create('div', 'leaflet-google-layer leaflet-top leaflet-left');
this._container.id = "_GMapContainer_" + L.Util.stamp(this);
this._container.style.zIndex = "auto";
}

if (true) {
tilePane.insertBefore(this._container, first);

this.setOpacity(this.options.opacity);
this.setElementSize(this._container, this._map.getSize());
}
},

_initMapObject: function() {
if (!this._ready) return;
this._google_center = new google.maps.LatLng(0, 0);
var map = new google.maps.Map(this._container, {
center: this._google_center,
zoom: 0,
tilt: 0,
mapTypeId: google.maps.MapTypeId[this._type],
disableDefaultUI: true,
keyboardShortcuts: false,
draggable: false,
disableDoubleClickZoom: true,
scrollwheel: false,
streetViewControl: false
});

var _this = this;
this._reposition = google.maps.event.addListenerOnce(map, "center_changed",
function() { _this.onReposition(); });

map.backgroundColor = '#ff0000';
this._google = map;
},

_resetCallback: function(e) {
this._reset(e.hard);
},

_reset: function(clearOldContainer) {
this._initContainer();
},

_update: function() {
if (!this._google) return;
this._resize();

var bounds = this._map.getBounds();
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();
var google_bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(sw.lat, sw.lng),
new google.maps.LatLng(ne.lat, ne.lng)
);
var center = this._map.getCenter();
var _center = new google.maps.LatLng(center.lat, center.lng);
this._google.setCenter(_center);
this._google.setZoom(this._map.getZoom());
//this._google.fitBounds(google_bounds);
},

_resize: function() {
var size = this._map.getSize();
if (this._container.style.width == size.x &&
this._container.style.height == size.y)
return;
this.setElementSize(this._container, size);
this.onReposition();
},

onReposition: function() {
if (!this._google) return;
google.maps.event.trigger(this._google, "resize");
}
});

L.Google.asyncWait = [];
L.Google.asyncInitialize = function() {
var i;
for (i = 0; i < L.Google.asyncWait.length; i++) {
var o = L.Google.asyncWait[i];
o._ready = true;
if (o._container) {
o._initMapObject();
o._update();
}
}
L.Google.asyncWait = [];
};

According to https://developers.google.com/maps/documentation/javascript/advertising an example code for adding a Adsense unit looks like this:

var map;
var adUnit;
var monterey = new google.maps.LatLng(36.5987, -121.8950);

function initialize() {

var mapOptions = {
center: monterey,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

<strong>var adUnitDiv = document.createElement('div');
var adUnitOptions = {
format: google.maps.adsense.AdFormat.HALF_BANNER,
position: google.maps.ControlPosition.TOP,
backgroundColor: '#c4d4f3',
borderColor: '#e5ecf9',
titleColor: '#0000cc',
textColor: '#000000',
urlColor: '#009900',
map: map,
visible: true,
publisherId: 'YOUR_PUBLISHER_ID'
}
adUnit = new google.maps.adsense.AdUnit(adUnitDiv, adUnitOptions);</strong>
}

I dont know where to exactly add this code, as I mostly get "ReferenceError: ....is not defined". From my understanding, only the bold part is needed for integration.
Thanks

Answers (1)

2013-01-01

John Cotton answers:

Hi Robert

Happy New Year!

Have you tried it just after the o._initMapObject(); line? ie something like this:




_initAdSense: function() {
var adUnitDiv = document.createElement('div');
var adUnitOptions = {
format: google.maps.adsense.AdFormat.HALF_BANNER,
position: google.maps.ControlPosition.TOP,
backgroundColor: '#c4d4f3',
borderColor: '#e5ecf9',
titleColor: '#0000cc',
textColor: '#000000',
urlColor: '#009900',
map: this._map,
visible: true,
publisherId: 'YOUR_PUBLISHER_ID'
}

this._adUnit = new google.maps.adsense.AdUnit(adUnitDiv, adUnitOptions);
},

// ....


o._initMapObject();
o._initAdSense();
o._update();



I don't have a publisher id so I can't actually test this but I would be surprised if it didn't work based on your sample code...

JC