Google Maps JavaScript API v3 Library

milroyfraser edited this page Dec 10, 2012 · 5 revisions
Clone this wiki locally

Google Maps JavaScript API v3 Library allows you to generate Google map on your website. It's more flexible and really easy to configure.

Google Says

V3: The Solution for Maps Applications for both the Desktop and Mobile Devices

Features

  • Multiple markers.
  • Mobile Devices (such as a GPS locator).
  • Marker animation.
  • Custom marker icon.

Initialization

    $markers = array(   'Mozzat Web Team' => '6.861103,79.961589',
                        'Home Town' => '6.849779,79.950085'
                    );

    $config = array(    'api_key' => 'your API key here',
                        'sensor' => 'false',
                        'div_id' => 'map', 
                        'div_class' => 'grid_6', 
                        'zoom' => 14, 
                        'lat' => 6.8611, 
                        'lon' => 79.9615,
                        'animation' => 'BOUNCE', 
                        'icon' => base_url()."img/map/pin-red.png",
                        'markers' => $markers);

    $this->load->library('google_map');
    $this->google_map->initialize($config);

Map Generation

echo $this->google_map->generate();

Parameters

api_key -> Your API key Obtaining an API Key

sensor -> The sensor parameter of the URL must be included, and indicates whether this application uses a sensor (such as a GPS locator) to determine the user's location. true or false

div_id -> div tag id

<.div id="value"> // your map </.div>

div_class -> div tag class

<.div class="value"> // your map </.div>

zoom -> The initial resolution at which to display the map is set by the zoom property, where zoom 0 corresponds to a map of the Earth fully zoomed out, and higher zoom levels zoom in at a higher resolution.

lat / lon -> Sets the center of the map.

animation -> Which animation to play when marker is added to a map. BOUNCE or DROP

icon -> Marker icon image path.

markers -> Any number of markers as an array array('Marker Title' => 'latitude,longitude');

Download Library