Tailoring the html body

Tailoring the look of your VizMap application get it now


For this example we are going to use the Concerts/Venues example. The complete workbook (googlemapping.xlsm) can be downloaded and the example Parameter WorkSheet is called VenuesParameters.

Here you can learn how to  change the content that makes up your VizMap application

Changing the container application

It may be that you want to do more than just show a map with data driven info windows - for example this may form part of a bigger application. It is of course possible to embed additional html in the header see - Using css styles to tailor InfoWindows and also the body. Since the code is all held in the parameter sheet, changes you make will be permanently regenerated every time you create an application. 

Changing the html body

You should first play around with the generated html file to get the content you want. By default it looks like this

<body style="font-family: sans-serif;">

 <b>VizMap Venues Demonstration Application Excel to Google Mapping</b>
 <br>For More details
 <a href="http://rambings.mcpher.com">Visit Excel and Google
  Ramblings</a>
 <div id="status_div" class ="mcstatus"></div>
 <div id="map_canvas" style="width: 100%; height: 90%"></div>
    
</body>

You can change this to whatever you like, but
  1. The map_canvas element is the container for the Map. Without this element there will be no map.
  2. the status_div element is the status update element mentioned in Using css styles to tailor InfoWindows. If you do not want this status element, then delete it from here. 

Permanently changing the html body

Once you are happy with the html body, you can commit the changes to your parameter sheet  so that all future application generations will contain your changes. First find the appropriate parameter block in your parameter sheet.


The body parameter code looks like this by default. 
<body style="font-family: sans-serif;">

 <b>VizMap Venues Demonstration Application Excel to Google Mapping</b>
 <br>For More details
 <a href="http://rambings.mcpher.com">Visit Excel and Google
  Ramblings</a>
 <div id="status_div" class ="mcstatus"></div>
 <div id="map_canvas" style="width: 100%; height: 90%"></div>
    
</body>
</html>

You can simply commit your changes being careful not to change anything outside the <body> tags. 
Comments