I am trying to implement a custom infoBubble that has the box opening to the side of a marker. This has turned out to be harder than expected.
Using the normal infoWindow you can use pixelOffset. See here for the documentation
Using infoBubble this does not seem to be the case. Is there anyway of using pixelOffset in an infoBubble, or something that will do the same thing?
I have found this very difficult to search for, as using a
google search such as this returns no relevant results
Google Search
Below is all my resources I have been using.
Example of infoBubble here.
My JavaScript to setup the map and infoBubble here.
And now my javascript here just in-case the jsfiddle link is broken.
<script type="text/javascript">
$(document).ready(function () {
init();
});
function init() {
//Setup the map
var googleMapOptions = {
center: new
google.maps.LatLng(53.5167, -1.1333),
zoom: 13,
mapTypeId:
google.maps.MapTypeId.ROADMAP
};
//Start the map
var map = new
google.maps.Map(document.getElementById("map_canvas"),
googleMapOptions);
var marker = new
google.maps.Marker({
position: new
google.maps.LatLng(53.5267, -1.1333),
title: "Just a test"
});
marker.setMap(map);
infoBubble = new InfoBubble({
map: map,
content: '<div class="phoneytext">Some label</div>',
//position: new
google.maps.LatLng(-35, 151),
shadowStyle: 1,
padding: '10px',
//backgroundColor: 'rgb(57,57,57)',
borderRadius: 5,
minWidth: 200,
arrowSize: 10,
borderWidth: 1,
borderColor: '#2c2c2c',
disableAutoPan: true,
hideCloseButton: false,
arrowPosition: 7,
backgroundClassName: 'phoney',
pixelOffset: new
google.maps.Size(130, 120),
arrowStyle: 2
});
infoBubble.open(map, marker);
}
</script>
