I'm trying to figure out how to stylize (I really just want to change colors) the adUnit created through google maps V3. Is there no standard way to do this? most adsense ads you can stylize internally, but it is looking to me like I am stuck with the ugly blue background.
It seems like there should be a way to do this, given that you are now able to place the maps adunits outside of the map.
Thanks!
I also searched for a solution, none found. I think they don't want you to mess with the colors, it has to blend nicely with the map colors itself.
https://developers.google.com/maps/documentation/javascript/advertising?hl=en#AdUnitAdStyles
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);
Is this what you needet?
Related
I am using custom markers on Google Maps, and they work perfectly on browser mode, but the problem happens with device, I can't get picture of marker, not sure if I am placing image of marker right.
This is the code I am using.
var marker = new google.maps.Marker({
position: myLatLng,
map:this.map,
title: 'Pumpa',
icon: { url: "../assets/img/2.png",
scaledSize: new google.maps.Size(30, 30)
} });
any clues where should I put marker image and what path should I use then.
Not sure what the downvotes on the previous answer are about, using
url: "assets/img/2.png"
works for me
i think you need to remove the 2 dots in url of icon
I am using street view on my site with pancontrols and zoomControls in it. For now google provides us some defined positions like RIGHT_CENTER etc. I want my custom position using css, I have taken help from this link Google Maps API V3 custom controls position but it is not working may be because it is for Road map and I need for street view. The code which I have used for calling street view is
function initialize() {
var fenway = new google.maps.LatLng(42.345573, -71.098326);
var panoOptions = {
position: fenway,
pov: {
heading: 280.19,
pitch: -22.444,
zoom:0.2
},
addressControl: false,
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
},
panControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_CENTER
},
enableCloseButton: false
};
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('map-canvas'), panoOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
Thanks in Advance.
Check Custom Street View examples and this CUSTOM STREET VIEW FIDDLE
AFAIK you must link your panorama to the image of the streetview, thats nice if you want to make your own street view, if you want to get a google one, you must get the URL to force the view enter in streetview.
function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
// Note: robust custom panorama methods would require tiled pano data.
// Here we're just using a single tile, set to the tile size and equal
// to the pano "world" size.
return 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQTaHe0F0J39SXbiRF43pz2wtyfD6kypCMrLxhWPkq9EACNgwO0iaMbJFM';
}
You have everything that you need to do this in the answer that you linked to above. You can pick from one of two choices:
The hack... This isn't recommended because if google maps decides to
change their layout, your code will break. To do this for
streetview, inspect the streetview window to find which 'gmnoprint'
you want to move. As an example, putting this after the panorama
load, moves the controls:
setTimeout( function() {
$($('div.gmnoprint')[4]).css({left: '-300px', background: 'red'});
}, 1000);
The best way to do it, as suggested at Google Maps API V3 custom controls position is to hide the streetview controls, create your own controls, and put them wherever you like. This takes much more effort, but it will not break when the streetview layout changes.
I began to use Google Map API recently and I tried the hello world sample in my own webpage. The only difference of my code from the original one is I display the map element in javascript code like this:
function showMap () {
container = document.getElementById("id_container");
container.innerHTML = "<div id=\"map_canvas\"><\/div>";
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
And in the external css file, I defined the width and height by fixed values for #map_canvas.
But I didn't get the expected result. The map showed for about 1 second and became all white (see the image below). When I zoom the map, I can see it flashing. I have searched on Google but I didn't get any solution and I don't even know what the problem is. Has anyone encountered the same problem before?
After several days' trying, I know what's happening --
I set the background attribute of all divs to be white. Though I reset the background of the map div to be "none", it doesn't work. The only solution is to avoid any definitions that would possibly give it a not "none" background, like "div {background-color: white;}".
However, feel free to set the background color of its parent tags.
I am using Google Map v2 and I only want map view and nothing more. I also would like to get rid of the zoom in and out buttons.
If anyone knows what I need to add to the following that would be great.
function stores()
{
$('#storelist ul#stores').html("");
fetch(203,"task=location&location=vic");
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(-37.810013, 144.962683), 8);
map.setUIToDefault();
yellowIcon.image = "http://gmaps-samples.googlecode.com/svn/trunk/markers/orange/blank.png";
markerOptions = { icon:yellowIcon };
}
Remove map.setUIToDefault(). It adds the default look and feel to the Map.
(Reference docs: http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GMap2.setUIToDefault)
If you want, you can also customise how the map can be interacted with. For example map.disableDoubleClickZoom() or map.disableDragging(). See the reference above for details.
How can I set the colour of a Google Maps Polyline?
var myRoutePath;
myRoutePath = new google.maps.Polyline({
path: routeCoordinates,
strokeColor: "#CC33FF",
strokeWeight: 3
});
myRoutePath.setMap(map);
// Reset colour
myRoutePath.setOptions({strokeColor: 'blue'});
The above doesn't show up as an error in Firebug, but it doesn't change the color either.
Thanks for your help.
Basically looks correct to me. However, if this is your code verbatim then you immediately overwrite the color. Hence, I guess you are getting a blue polyline from the start. Try setting a timer to see the transition:
setTimeout(function () {
myRoutePath.setOptions({strokeColor: 'blue'});
}, 3000);
Color names are still not supported as a color, use the hex version instead
myRoutePath.setOptions({strokeColor: '#0000FF'});