PIVARI.COM logo

csv2map converts csv into Google Maps API html page

version 3.0 12/13/2006

by Pivari.com© 2006 http://www.pivari.com/

Contents

What is csv2map?

csv2map is a versatile freeware, developed using perl, to convert your csv file (Comma Separated Value) into an html file with inside a map made using Google Maps API v.2.
To make a csv file you can use Excel or every database.

Why do you need csv2map?

See this example made by csv2map: http://www.pivari.com/mappa-agenzie-pr-comunicazione.html.
If you leave the mouse pointer over a placemark you can read the name of the pr agency, if you click on a placemark (or on the same pr agency on the right column) you can see the information of that pr agency.
What do you need to make a so nice application?
You can use a normal csv file with and configure csv2map to use it.
To make our examples we use this csv and this csv2map.cfg configuration file.

Download csv2map

You can use for free the code. If you make modifies please send us them so that we can make new good versions.

If you're interested in a binary for OS like Windows, Linux, Solaris, AIX, HP-UX, Mac OS X, FreeBSD, SCO Unix, Irix, Digital Unix (tru64), write us info@pivari.com. We sell them for $20.

Configure and run csv2map

At the moment csv2map is a command line converter and works in the same way on every OS supported (Windows, using a dos windows, Linux, Solaris, AIX, HP-UX, if you need also Mac OS X, Tru64, BSD, SCO, ...)
csv2map [-options]
where options include:
-help to print the line help
-verbose to print verbose messages
-version to print version
-configure file to use a specific configuration file (the default is csv2map.cfg in the same directory of the executable)

  1. csv2map uses the file csv2map.cfg as its configuration file. This file must reside in the same directory as the csv2map file, since it searches for this file at runtime. You can create your own csv2map.cfg file and use it with -configure option.
    Inside this file, you can change the values for the csv, xmlfile, htmlfile, label, latitude, longitude, provincia, html, centerlong, centerlat, centerzoom, skipfirstline, delimiter, ftphost, ftpuser, ftppassword, ftpdirectory
  2. To change any of these values, you just need to edit csv2map.cfg. You can also create a new .cfg file and tell csv2map to read it at runtime, using the -configure yourfile.cfg option or the CSV2MAPCFG variable.

The csv variable allows you to set the input csv file. You can introduce also a relative or absolute path. The default is input.csv
The xmlfile variable allows you to set the output xml file that the final html file will read. You can introduce also a relative or absolute path. The default is data.xml
The htmlfile variable allows you to set the output html file. This is the final html file that will read data from xmlfile. You have to put both in the same directory on your web site. htmlfile is based on base.html. You can edit it and personalize it to have a final htmlfile with your company look&feel.You can introduce also a relative or absolute path. The default is index.html
VERY VERY IMPORTANT! You have to go to http://www.google.com/apis/maps/signup.html to sign up your site for Google Maps API.
Pay attention: csv2map v. 2.x supports only Google Maps API v. 2. If you have a key for Google Maps API v.1 update it!
The you have to edit base.html and change the string
<script src="http://maps.google.com/maps?file=api&v=2&key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" type="text/javascript"></script>
with yours (you can simple introduce the right key)
With Google Maps API v.2 you can set your language. Read this document to understand how to modify the previous line to support your language.
By setting skipfirstline to 1 (default is 0) csv2map will skip the first line of your csv file. Useful if the first line is a description line
The default delimiter in the csv file is ;. With delimiter variable you can set a different delimiter.
With the label variable you can set a column of your csv file. e.g. §1 to set the first column, §2 to set the second column, ...
csv2map will create a placemarker for every different label.
e.g. if you set label with the column of cities you can have final placemarkers like London, Paris, Rome, ...
If you leave the mouse pointer over a placemark you can read the label variable.
If you want to change the look you have to edit base.html and change the style of .tooltip.
With the longitude and latitude variable you can set two columns of your csv file that have the longitude and latitude values.
Italian customers can use provincia without setting longitude and latitude!
csv2map can convert every provincia (the standard 2 chars indication e.g. RM for Rome, MI for Milan, ...) in the right longitude and latitude. We hope to give soon a similar feature with the big cities of other countries.

The html variable allows you to set the html code to put on the text you can see when you click on a placemarker.
Pay Attention: you can use more columns of your csv but the set on the left has to be minor that the set on the right.
e.g. you can use
html : <a href="§1">§3</a><br>
you can't use
html : <a href="§5">§2</a><br>
because on the left there is §5 that is major than §2!
With the centerlong, centerlat variables you can change the default center longitude and latitude of the map. The default longitude and latitude are 12.496 and 41.903 (Rome).
With centerzoom you can change the default zoom factor: 11

With the same configuration, using csv2map registered version you can create a kml file. You can see kml file with Google Earth.

Setting correctly ftphost, ftpuser, ftppassword, ftpdirectory the produced htmlfile and xmlfile will be copied in the correct ftpdirectory in your ftphost using ftpuser and ftppassord via ftp.

Step by step our example

In the directory mappe-agenzie you can find the files of this example.

These are the first 3 lines of my csv
lat;long;logo;url;company;company description;address;ZIP;city;state;email;emaillabel;phone;fax;other;image
45.463;9.181;http://www.pivari.com/images/1x1.jpg;www.peregosolera.it;Perego & Solera Comunicazione Integrata; ;Via Sant'Orsola, 10;20123;Milano;MI;info@peregosolera.it;info@peregosolera.it;+39 02 72021363;+39 02 72021652;<br />Ufficio in Germania<br />Tel. +49 (0) 8709 915498<br />Fax +49 (0) 8709 915997;
45.453;9.168;http://www.btp.it/images/logo%20btp%202.jpg;www.btp.it;BTP&P; ;Via Tortona, 14;20144;Milano;MI;btp@btp.it;btp@btp.it;+39 02 58104110;+39 02 89404410;

  1. I've edited the default base.html in the distribution and after I've signed up my site at http://www.google.com/apis/maps/signup.html for Google Maps API, I've entered my key in
    <script src="http://maps.google.com/maps?file=api&v=2&key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" type="text/javascript"></script>
  2. I've modified base.html with the look and feel I prefer.
  3. I've edited csv2map.cfg and I've set:
    htmlfile : mappa-agenzie-pr-comunicazione.html
    the name of the final html file with Google Maps. It's the modification of base.html.
    xmlfile : agenzie.xml
    It's the file with data that html file will read.
    skipfirstline : 1
    The first line is a comment line so I want csv2map will skip it.
    centerzoom : 12
    The map will be centered on Rome latitude and longitude (default) with 12 zoom.
    Now to use csv data:
    label : §5
    to use the fiveth field (company) like label when the mouse pointer will stop on a placemaker and to put on the right column
    latitude : §1
    longitude : §2
    The latitude field is the first and longitude field is the second.
    The more complex:
    html : <img src="§3"><br><a href="http://§4"><strong>§5</strong></a>§6<br />§7<br />§8 §9 (§10)<br>email: <a href="mailto:§11">§12</a><br>tel. §13<br>fax §14<br>§15
    This set means: when you click on a company placemaker I want to see every information about the company: the image logo, company name with the link to the server company name, company describtion, address, phone, fax, email and other possible informations. This is a normal html code.
    Using the registered version:
    ftphost : www.pivari.com
    ftpuser : xxxxxxxxx
    ftppassword : yyyyyyyyy
    ftpdirectory : /httpdocs/
    to automatically publish via ftp xmlfile, htmlfile, in the ftpdirectory of ftphost.

History