Sample

This sample shows how to implement Google Maps.

If you find this all a bit daunting, we are here to help, please ask.

The HTML template is the Google API wrapped in a container.

<div id="googleMap" style="position: absolute; top:_theTop_px;left:_theLeft_px;height:_theHeight_px;width:_theWidth_px">

<script

src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">

</script>


<script>

function initialize()

{

var mapProp = {

//London

//  center:new google.maps.LatLng(51.508742,-0.120850),

  center:new google.maps.LatLng(_theLatitude_,_theLongitude_),

  zoom:5,

  mapTypeId:google.maps.MapTypeId.ROADMAP

  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

}


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

</script>


</div>


This code will be injected into the output when the user builds or previews the InDesign document. The Exporter will call your java script on export, this is your chance to replace the variable place holders with real data.
The place holders: _theTop__theLeft__theHeight_ and _theWidth_ are the dimensions you want your map to take. This is usually the size of the frame in the InDesign document. The _theLatitude_ and _theLongitude_ are entered by the user through the Exporter panel. ( see the java script below )
InDesign Baker export google maps


//======================

#targetengine "BekeliteExporter";

    

main ();

function main ()

{

    gResult = "";


    switch ( doWhat )

    {

        ase "addDialogItems":

        {

            var p = gPageItem;


            the_row_grp = exportPanel.add ('group {orientation: "row", alignment: "left", alignChildren: "fill"}');

            

            the_row_grp.add ('statictext', undefined, "Latitude ");

            theLat = the_row_grp.add ('editText', undefined);

            theLat.minimumSize.width = 80;

            theLat.maximumSize.width = 80;

            theLat.helpTip = "The Longitude."

                        

            the_row_grp.add ('statictext', undefined, "Longitude ");

            theLong = the_row_grp.add ('editText', undefined);

            theLong.minimumSize.width = 80;

            theLong.maximumSize.width = 80;

            theLong.helpTip = "The Longitude."

            var avtiveLabelName = p.extractLabel("KPSActiveTemplate");

            var tmpStr = p.extractLabel(avtiveLabelName);


            if ( tmpStr != "" )

            {

                var fieldArray = tmpStr.split ( "\r" );

                theLat.text = fieldArray[0];

                theLong.text = fieldArray[1];

            }

            else

            {

                //London

                p.insertLabel ( avtiveLabelName, "51.508742\r-0.120850" );

                theLat.text = "51.508742";

                theLong.text = "-0.120850";

            }

            theLong.onChanging = theonClickFunc;

            theLat.onChanging = theonClickFunc;

            

            function theonClickFunc()

            {

                var avtiveLabelName = p.extractLabel("KPSActiveTemplate");

                var tmpStr = "";

                

                tmpStr += theLat.text;

                tmpStr += "\r";

                tmpStr += theLong.text;

                        

                p.insertLabel ( avtiveLabelName, tmpStr );

            }

            exportPanel.layout.layout( true );

            break;

        }

        case "removeDialogItems":

        {

            exportPanel.remove ( the_row_grp );

            exportPanel.layout.layout( true );

             break;

        }

        case "buildIt":

            buildIt ( gPageItem );

        break;

        default:

        break;

    }

    return;

function buildIt ( p ){

    var result = "";

    gResult = result;

    var avtiveLabelName = p.extractLabel("KPSActiveTemplate");

    var tmpStr = p.extractLabel(avtiveLabelName);


    if ( tmpStr != "" )

    {

        var fieldArray = tmpStr.split ( "\r" );


        result = gTemplate;

        result = result.replace ( "_theTop_", String ( Math.round ( p.visibleBounds[0] )));

        result = result.replace ( "_theLeft_", String ( Math.round ( p.visibleBounds[1] )));

        result = result.replace ( "_theHeight_", String ( Math.round ( p.visibleBounds[2] - p.visibleBounds[0] )));

        result = result.replace ( "_theWidth_", String ( Math.round ( p.visibleBounds[3] - p.visibleBounds[1] )));

        result = result.replace ( "_theLatitude_", fieldArray[0] );

        result = result.replace ( "_theLongitude_", fieldArray[1] );

    }

    gResult = result;

    gIncludeCSS = "";

    gIncludeJSX = "";

}



}


//==============================

There are three parts to this script. 

The addDialogItems is called so you can interact with the user, set the longitude and latitude.

The removeDialogItems is called when the user changes the selection in InDesign. 

The buildIt phase is where you get to insert your HTML

The built HTML is past back the Exporter via the global gResult.