Getting Started

Updated: 2011-11-14 11:16:37

Getting started with the Chitika Maps API is simple - follow these steps to have Chitika Maps up and running on your site or blog within 5 minutes!

Include the Chitika Maps Javascript file in the <head> tag of your page

            <head>
            ...
            <script type="text/javascript" src="http://maps-static.chitika.net/chitikamaps.js"></script>
            ...
            </head>

Create a <div> element on your page to act as the container for the map. Remember to set a height and width for the container element. If you do not specify a width and height for the container, the map will default to 512px x 512px.

            <head>
            ...
            <style type="text/css">
            div#map{
                width:500px;
                height:350px;
            }
            </style>
            ...
            </head>
            <body>
            ...
            <div id="map"></div>
            ...
            </body>

Next, you'll create an instance of the ChitikaMap Javascript object. In this example, we'll render the map as simply as possible, with no specifications. The only other necessary method call is the render() method, which takes the id of the container element as it's only parameter (in this case we gave our container an id of "map") If you don't specify anything for the map to center to, (ie a center or a pin) the location will default to Boston, MA. In this case, we're using a demo API key. Please visit the Chitika Maps demo page to get your API key.
```
            <script type="text/javascript">
                var map = new ChitikaMap("8fe89e953d7c692e56ae208d9b8de541");
                map.render('map');
            </script>
        
```
This will render a Chitika Map in the most simplistic way.