Before starting, I recommend you to read the google map API v3 documentation which is available here.
/** @var Fungio\GoogleMapBundle\Model\Map */
$map = $this->get('fungio_google_map.map');
The fungio_google_map.map
service is the central point of the bundle. It allows you to manipulate all map options.
If you render the default map, the bundle will generate a map of 300px by 300px, centered on the coordinate (0, 0),
configured with a zoom of 3 & using the default google map controls.
Now, you have requested your map, you can configure it easily & advancely.
The complete map configuration is available here.
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.
- Marker
- Info window
- Info box
- Polyline
- Encoded Polyline
- Polygon
- Rectangle
- Circle
- Ground overlay
- Marker cluster
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.
The complete events configuration is available here.
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 configuration:
fungio_google_map:
api:
# Your own API helper class
helper_class: "My\Fucking\ApiHelper"
# Your additional libraries
libraries: [ "places", "geometry" ]
The google map API needs at least an html container & some javascript for being able to render a map. The bundle delivered some helpers which are compatible with PHP/Twig and allow you to render everything in a single call or part by part if you prefer...
Warning, if you choose to render each part one by one, be aware the HTML container needs to be rendered before the javascript.
This helper allows you to render the html container, javascripts and CSS in a single call.
Using twig:
{{ google_map(map) }}
Using php:
$view['fungio_google_map']->renderMap($map);
Using twig:
{{ google_map_container(map) }}
Using php:
$view['fungio_google_map']->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>
Using twig:
{{ google_map_js(map) }}
Using php:
$view['fungio_google_map']->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>
Additionally, the bundle 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.
Additionally, you can configure some CSS directly on the map. For rendering it, use the twig function :
google_map_css
.
Using twig:
{{ google_map_css(map) }}
Using php:
$view['fungio_google_map']->renderStylesheets($map);
This function renders an html style block with the CSS configured.
<style type="text/css">
/* CSS configured */
</style>