Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Posts: 148
Registered: ‎04-08-2013
My Device: Blackberry 10
My Carrier: Blackberry

Customise googleMap infobox using java script

I am creating Google map using javaScript.I want to customise the googleMap infoBox.I have tried the following code.Iam not able to create custom info box.

import bb.cascades 1.0
Page {
    Container {
        WebView {
            id: googleView
            html: "
<!DOCTYPE html>
    <meta name='viewport' content='initial-scale=1.0, user-scalable=no'>
    <meta charset='utf-8'>
    <title>Info window with <code>maxWidth</code></title>

    <script src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'></script>

function initialize() {
  var chicago = new google.maps.LatLng(41.879535, -87.624333);
  var Australia = new google.maps.LatLng(-25.363882,131.044922);

  var mapOptions = {
    zoom: 4,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var markerChicago = new google.maps.Marker({
      position: chicago,
      map: map,

    var boxText = document.createElement('div');
    boxText.style.cssText = 'background: yellow; width: 300px; height: 70px;       padding: 5px;';
    boxText.innerHTML = content;

    var myOptions = {
         content: boxText
        ,disableAutoPan: false
        ,maxWidth: 0
        ,pixelOffset: new google.maps.Size(-37, -120)
        ,zIndex: null
        ,boxStyle: { 
            background: 'url[image] no-repeat'
            ,opacity: 1
            ,width: '300px'
        ,closeBoxMargin: '5px 5px 5px 5px'
        ,closeBoxURL: 'http://www.google.com/intl/en_us/mapfiles/close.gif'
        ,infoBoxClearance: new google.maps.Size(1, 1)
        ,isHidden: false
        ,pane: 'floatPane'
        ,enableEventPropagation: false

    var ib = new InfoBox(myOptions);
    ib.open(map, markerChicago);

  google.maps.event.addListener(markerChicago, 'click', function() {
    ib.open(map, markerChicago);


google.maps.event.addDomListener(window, 'load', initialize);

 width: 700px;
 height: 1280px;

    <div id='map-canvas'></div>

       } //web

    } //container


can any one plz help me out.I have tried a lot Smiley Sad

Posts: 148
Registered: ‎04-08-2013
My Device: Blackberry 10
My Carrier: Blackberry

Re: Customise googleMap infobox using java script

Any one please help me.Iam stucked here Smiley Sad