Usage

Before starting, I recommend you to read the google map API v3 documentation which is available here. It will give you a better understand for the next parts.

Build your map

First of all, if you want to render a map, you will need to build one. So let's go:

use Ivory\GoogleMap\Map;

$map = new Map();

The Map is the central point of the library. It allows you to manipulate all available options. If you render the default map, the library will generate a map of 300px by 300px, centered on the coordinate (0, 0), configured with a zoom of 3 & using the default controls.

Configure your map

Now, you have a map, you can configure it easily. The complete map configuration is available here.

Configure overlays

Overlays are objects on the map that are tied to latitude/longitude coordinates, so they move when you drag or zoom the map. Overlays reflect objects that you "add" to the map to designate points, lines, areas, or collections of objects.

1. Marker
2. Info window
3. Info box
4. Polyline
5. Encoded Polyline
6. Polygon
7. Rectangle
8. Circle
9. Ground overlay
10. Marker cluster

Configure controls

The maps on Google Maps contain UI elements for allowing user interaction through the map. These elements are known as controls and you can include variations of these controls in your Google Maps API application. Alternatively, you can do nothing and let the Google Maps API handle all control behavior.

1. Map type control
2. Overview
3. Pan
4. Rotate
5. Scale
6. Street view
7. Zoom

Configure events

The complete events configuration is available here.

Configure additional libraries

Sometimes, you want to use the map & other Google Map related libraries. The bundle provides many integrations but not all of them. If you need a custom libraries, you can use the following API on your map:

$map->setLibraries(array('places', 'geometry'));
$libraries = $map->getLibraries();
$hasLibraries = $map->hasLibraries();

Render your map

Now, you have builded & configured your map, you can render it. For this purpose, you will need the Ivory\GoogleMap\Helper\MapHelper which allows to render the map html container & some javascript for being able to render it.

use Ivory\GoogleMap\Helper\MapHelper;

$mapHelper = new MapHelper();

Render the HTML container

echo $mapHelper->renderHtmlContainer($map);

This function renders an html div block with the HTML container ID, the width & the height configured:

<div id="map_canvas" style="width:300px;height:300px"></div>

Render the javascript

echo $mapHelper->renderJavascripts($map);

This function renders an html javascript block with all code needed for displaying your map.

<script type="text/javascript">
    // Code needed for displaying your map
</script>

The generated code is organized to be reusable in the client side. If you want to learn more, you can read this documentation.

Additionally, the library allows you to add/render your own javascript libraires and append some code just before or after the generated code through extensions. If you want to learn more about that, you can read this documentation.

Render the CSS (Optional)

Additionally, you can configure some CSS directly on the map.

echo $mapHelper->renderStylesheets($map);

This function renders an html style block with the CSS configured.

<style type="text/css">
    /* CSS configured */
</style>

If you want to render all of them, you can use:

echo $mapHelper->render($map);

<style type="text/css">
    /* CSS configured */
</style>
<div id="map_canvas" style="width:300px;height:300px"></div>
<script type="text/javascript">
    // Code needed for displaying your map
</script>

There is many other methods you can use if you only render specific "parts" of the map. I let you read the class :)