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>
