01_ezgmaplocation_field_using_google_map_API_key.md

ezgmaplocation_field override

This steps show you how to override the "ezgmaplocation_field" and using your own Google map API Key.This is generally the steps how to override an eZPublish5.x/eZPlatform standard FieldType template

• Define the block Template in ezplatform.yml. In this example the content_fields.html.twig is located in the app/Resources/view folder
• Override (copie/paste) the default template located in eZ/Bundle/EzPublishCoreBundle/Resources/views/content_fields.html.twig. We've added the global twig variable {{ gmap_key }} in the Google API URL
• Add your Google API KEY as a Twig global vailable in config.yml

You should activate 2 API in your google project so that the map works for frontend and backend as well Activate following google API:

• Google Maps JavaScript API
• Google Maps Geocoding API

Enjoy ;)

config.yml

twig:
    globals:
        gmap_key: XXXXXXXXXXXXXXXXXXXXXXXX

content_fields.html.twig

{% block ezgmaplocation_field %}
    {##
     # This field type block accepts the following parameters:
     # - string mapType the Google map type (ROADMAP, SATELLITE, HYBRID or TERRAIN), default is ROADMAP
     # - boolean showMap whether to show the Google map or not, default is true
     # - boolean showInfo whether to show the latitude, longitude and address or not, default is true
     # - integer zoom the default zoom level, default is 13
     # - boolean draggable whether to enable or not draggable map (useful on mobile / responsive layout), default is true
     # - string|false width the width of the rendered map with its unit (ie "500px" or "50em"),
     #                      set to false to not set any width style inline, default is 500px
     # - string|boolean height the height of the rendered map with its unit (ie "200px" or "20em"),
     #                         set to false to not set any height style inline, default is 200px
     #}
    {% spaceless %}
        <div {{ block( 'field_attributes' ) }}>
            {% set defaultWidth = '500px' %}
            {% set defaultHeight = '200px' %}
            {% set defaultShowMap = true %}
            {% set defaultShowInfo = true %}
            {% set defaultZoom = 13 %}
            {% set defaultMapType = 'ROADMAP' %}
            {% set defaultDraggable = 'true' %}

            {% set hasContent = field.value is not null %}
            {% set latitude = field.value.latitude|default( 0 ) %}
            {% set longitude = field.value.longitude|default( 0 ) %}
            {% set address = field.value.address|default( "" ) %}
            {% set mapId = "maplocation-map-" ~ field.id %}

            {% set zoom = parameters.zoom|default( defaultZoom ) %}
            {% set mapType = parameters.mapType|default( defaultMapType ) %}

            {% set mapWidth, mapHeight = defaultWidth, defaultHeight %}
            {% if parameters.width is defined %}
                {% set mapWidth = parameters.width %}
            {% endif %}

            {% if parameters.height is defined %}
                {% set mapHeight = parameters.height %}
            {% endif %}

            {% set showMap = defaultShowMap %}
            {% if parameters.showMap is defined and not parameters.showMap %}
                {% set showMap = false %}
            {% endif %}

            {% set showInfo = defaultShowInfo %}
            {% if parameters.showInfo is defined and not parameters.showInfo %}
                {% set showInfo = false %}
            {% endif %}

            {% set draggable = defaultDraggable %}
            {% if parameters.draggable is defined and not parameters.draggable %}
                {% set draggable = 'false' %}
            {% endif %}

            {% if showInfo %}
                <dl>
                    <dt>Latitude</dt>
                    <dd>{{ hasContent ? latitude : "Not set" }}</dd>
                    <dt>Longitude</dt>
                    <dd>{{ longitude ? longitude : "Not set" }}</dd>
                    {% if address %}
                        <dt>Address</dt>
                        <dd>{{ address }}</dd>
                    {% endif %}
                </dl>
            {% endif %}

            {% if hasContent and showMap %}
                <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&key={{ gmap_key }}"></script>
                <script type="text/javascript">
                    (function(win, doc) {
                        var mapView = function (mapId, latitude, longitude) {
                            var mapElt = doc.getElementById("{{ mapId }}"),
                                startPoint = new google.maps.LatLng(latitude, longitude),
                                zoom = {{ zoom }},
                                draggable = {{ draggable }};

                            new google.maps.Marker({
                                map: new google.maps.Map(mapElt, {
                                    center: startPoint,
                                    zoom: zoom,
                                    draggable: draggable,
                                    mapTypeId: google.maps.MapTypeId.{{ mapType }}
                                }),
                                position: startPoint
                            });
                        }
                        if ( win.addEventListener ) {
                            win.addEventListener(
                                'load',
                                function () {
                                    mapView("{{ mapId }}", {{ latitude }}, {{ longitude }});
                                },
                                false
                            );
                        } else if ( win.attachEvent ) {
                            win.attachEvent(
                                'onload',
                                function () {
                                    mapView("{{ mapId }}", {{ latitude }}, {{ longitude }});
                                }
                            );
                        }
                    })(window, document);
                </script>
                {% set mapStyle = mapWidth ? "width:" ~ mapWidth  ~ ";": "" %}
                {% set mapStyle =  mapHeight ? mapStyle ~ " height:" ~ mapHeight : mapStyle %}
                <div class="maplocation-map" id="{{ mapId }}" style="{{ mapStyle }}"></div>
            {% endif %}
        </div>
    {% endspaceless %}
{% endblock %}

ezplatform.yml

ezpublish:
    system:
        my_siteacces:
            field_templates:
                -
                    template: "content_fields.html.twig"
                    priority: 10