<h1>Web Google Maps</h1> <p><a href="https://youtu.be/5hvAubXgUnc" title="Demo"><img src="https://i.ytimg.com/vi/2UdG5ILDtiY/3.jpg" alt="Demo"></a> </p> <p>This module contains three new features: - New view type and mode <code>&quot;map&quot;</code> - New widget <code>&quot;gplaces_address_autocomplete&quot;</code> - New widget <code>&quot;gplaces_autocomplete&quot;</code></p> <h1>Map view <code>&quot;map&quot;</code></h1> <p>Basically, this new view <code>map</code> will integrate Google Maps into Odoo.<br> Enable you to display <code>res.partner</code> geolocation on map or any model contains geolocation.<br> This feature will work seamlessly with Odoo means you can search your partner location using Odoo search feature. </p> <p>There are five available attributes that you can customize - <code>lat</code> : an attritube to tell the map the latitude field on the object <strong>[mandatory]</strong> - <code>lng</code> : an attritute to tell the map the longitude field on the object <strong>[mandatory]</strong> - <code>color</code> : an attribute to modify marker color (optional) any given color will set all markers color <strong>[optional]</strong>. - <code>colors</code> : work like attribute <code>color</code> but more configurable (you can set marker color depends on it&#39;s value) this attribute works similar to <code>colors</code> of tree view on Odoo 9.0 <strong>[optional]</strong> - <code>library</code> : an attribute to tell map which map that will be loaded <strong>[mandatory]</strong>.<br> This options has two values:<br> 1. <code>geometry</code> 2. <code>drawing</code></p> <h3>How to create the view?</h3> <p>Example ```xml &lt;!-- View --&gt; <record id="view_res_partner_map" model="ir.ui.view"> <field name="name">view.res.partner.map</field> <field name="model">res.partner</field> <field name="arch" type="xml"> <map class="o_res_partner_map" library='geometry' string="Map" lat="partner_latitude" lng="partner_longitude" colors="blue:company_type=='person';green:company_type=='company';"> <field name="id"/> <field name="partner_latitude"/> <field name="partner_longitude"/> <field name="company_type"/> <field name="color"/> <field name="display_name"/> <field name="title"/> <field name="email"/> <field name="parent_id"/> <field name="is_company"/> <field name="function"/> <field name="phone"/> <field name="street"/> <field name="street2"/> <field name="zip"/> <field name="city"/> <field name="country_id"/> <field name="mobile"/> <field name="state_id"/> <field name="category_id"/> <field name="image_small"/> <field name="type"/> <templates> <t t-name="kanban-box"> <div class="oe_kanban_global_click o_res_partner_kanban"> <div class="o_kanban_image"> <t t-if="record.image_small.raw_value"> <img t-att-src="kanban_image('res.partner', 'image_small', record.id.raw_value)"/> </t> <t t-if="!record.image_small.raw_value"> <t t-if="record.type.raw_value === 'delivery'"> <img t-att-src='_s + "/base/static/src/img/truck.png"' class="o_kanban_image oe_kanban_avatar_smallbox"/> </t> <t t-if="record.type.raw_value === 'invoice'"> <img t-att-src='_s + "/base/static/src/img/money.png"' class="o_kanban_image oe_kanban_avatar_smallbox"/> </t> <t t-if="record.type.raw_value != 'invoice' &amp;&amp; record.type.raw_value != 'delivery'"> <t t-if="record.is_company.raw_value === true"> <img t-att-src='_s + "/base/static/src/img/company_image.png"'/> </t> <t t-if="record.is_company.raw_value === false"> <img t-att-src='_s + "/base/static/src/img/avatar.png"'/> </t> </t> </t> </div> <div class="oe_kanban_details"> <strong class="o_kanban_record_title oe_partner_heading"> <field name="display_name"/> </strong> <div class="o_kanban_tags_section oe_kanban_partner_categories"> <span class="oe_kanban_list_many2many"> <field name="category_id" widget="many2many_tags" options="{'color_field': 'color'}"/> </span> </div> <ul> <li t-if="record.parent_id.raw_value and !record.function.raw_value"> <field name="parent_id"/> </li> <li t-if="!record.parent_id.raw_value and record.function.raw_value"> <field name="function"/> </li> <li t-if="record.parent_id.raw_value and record.function.raw_value"> <field name="function"/> at <field name="parent_id"/> </li> <li t-if="record.city.raw_value and !record.country_id.raw_value"> <field name="city"/> </li> <li t-if="!record.city.raw_value and record.country_id.raw_value"> <field name="country_id"/> </li> <li t-if="record.city.raw_value and record.country_id.raw_value"> <field name="city"/> , <field name="country_id"/> </li> <li t-if="record.email.raw_value" class="o_text_overflow"> <field name="email"/> </li> </ul> <div class="oe_kanban_partner_links"/> </div> </div> </t> </templates> </map> </field> </record></p> <pre><code>&lt;!-- Action --&gt; &lt;record id=&quot;action_partner_map&quot; model=&quot;ir.actions.act_window&quot;&gt; ... &lt;field name=&quot;view_type&quot;&gt;form&lt;/field&gt; &lt;field name=&quot;view_mode&quot;&gt;tree,form,map&lt;/field&gt; ... &lt;/record&gt; </code></pre> <p>```</p> <p>The view looks familiar?<br> Yes, you&#39;re right.<br> The marker infowindow will use <code>kanban-box</code> kanban card style. </p> <h3>How to setup color for marker on map?</h3> <p>There are two attributes: - <code>colors</code><br> Allow you to display different marker color to represent a record on map - <code>color</code><br> One marker color for all records on map</p> <p>Example: ```xml &lt;!-- colors --&gt; <map string="Map" lat="partner_latitude" lng="partner_longitude" colors="green:company_type=='person';blue:company_type=='company';"> ... </map></p> <pre><code>&lt;!-- color --&gt; &lt;map string=&quot;Map&quot; lat=&quot;partner_latitude&quot; lng=&quot;partner_longitude&quot; color=&quot;orange&quot;&gt; ... &lt;/map&gt; </code></pre> <p>```</p> <h1>New widget <code>&quot;gplaces_address_autocomplete&quot;</code></h1> <p>New widget to integrate <a href="https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform">Place Autocomplete Address Form</a> in Odoo.<br> The widget has four options that can be modify: - <code>component_form</code> - <code>fillfields</code> - <code>lat</code> - <code>lng</code></p> <h3>Component form <code>component_form</code></h3> <p>Is an option used to modify which value you want to take from an objects returned by the geocoder.<br> Full documentation about Google component types can be found <a href="https://developers.google.com/maps/documentation/geocoding/intro#Types">here</a> By default this option are configured like the following value <code>javascript { &#39;street_number&#39;: &#39;long_name&#39;, &#39;route&#39;: &#39;long_name&#39;, &#39;intersection&#39;: &#39;short_name&#39;, &#39;political&#39;: &#39;short_name&#39;, &#39;country&#39;: &#39;short_name&#39;, &#39;administrative_area_level_1&#39;: &#39;short_name&#39;, &#39;administrative_area_level_2&#39;: &#39;short_name&#39;, &#39;administrative_area_level_3&#39;: &#39;short_name&#39;, &#39;administrative_area_level_4&#39;: &#39;short_name&#39;, &#39;administrative_area_level_5&#39;: &#39;short_name&#39;, &#39;colloquial_area&#39;: &#39;short_name&#39;, &#39;locality&#39;: &#39;short_name&#39;, &#39;ward&#39;: &#39;short_name&#39;, &#39;sublocality_level_1&#39;: &#39;short_name&#39;, &#39;sublocality_level_2&#39;: &#39;short_name&#39;, &#39;sublocality_level_3&#39;: &#39;short_name&#39;, &#39;sublocality_level_5&#39;: &#39;short_name&#39;, &#39;neighborhood&#39;: &#39;short_name&#39;, &#39;premise&#39;: &#39;short_name&#39;, &#39;postal_code&#39;: &#39;short_name&#39;, &#39;natural_feature&#39;: &#39;short_name&#39;, &#39;airport&#39;: &#39;short_name&#39;, &#39;park&#39;: &#39;short_name&#39;, &#39;point_of_interest&#39;: &#39;long_name&#39; } </code> This configuration can be modify into view field definition.<br> Example: <code>xml &lt;record id=&quot;view_res_partner_form&quot; model=&quot;ir.ui.view&quot;&gt; ... &lt;field name=&quot;arch&quot; type=&quot;xml&quot;&gt; ... &lt;field name=&quot;street&quot; widget=&quot;gplaces_address_form&quot; options=&quot;{&#39;component_form&#39;: {&#39;street_number&#39;: &#39;short_name&#39;}}&quot;/&gt; ... &lt;/field&gt; &lt;/record&gt; </code></p> <h3>Fill fields <code>fillfields</code></h3> <p>Is an option that will be influenced by <code>gplaces_address_autocomplete</code> widget.<br> This options should contains known <code>fields</code> that you want the widget to fulfill a value for each given field automatically.<br> A field can contains one or multiple elements of component form<br> By default this options are configured like the following <code>javascript { &#39;street&#39;: [&#39;street_number&#39;, &#39;route&#39;], &#39;street2&#39;: [&#39;administrative_area_level_3&#39;, &#39;administrative_area_level_4&#39;, &#39;administrative_area_level_5&#39;], &#39;city&#39;: [&#39;locality&#39;, &#39;administrative_area_level_2&#39;], &#39;zip&#39;: &#39;postal_code&#39;, &#39;state_id&#39;: &#39;administrative_area_level_1&#39;, &#39;country_id&#39;: &#39;country&#39;, } </code></p> <p>This configuration can be modify into view field definition as well<br> Example: <code>xml &lt;record id=&quot;view_res_partner_form&quot; model=&quot;ir.ui.view&quot;&gt; ... &lt;field name=&quot;arch&quot; type=&quot;xml&quot;&gt; ... &lt;field name=&quot;street&quot; widget=&quot;google_places&quot; options=&quot;{&#39;fillfields&#39;: {&#39;street2&#39;: [&#39;route&#39;, &#39;street_number&#39;]}}&quot;/&gt; ... &lt;/field&gt; &lt;/record&gt; </code></p> <h3>Latitude <code>lat</code> and Longitude <code>lng</code></h3> <p>This options tell the widget the fields geolocation, in order to have this fields filled automatically.</p> <h1>New widget <code>&quot;gplaces_autocomplete&quot;</code></h1> <p>New widget to integrate <a href="https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete">Place Autocomplete</a> in Odoo. This widget have similar configuration to <code>gplaces_address_autocomplete</code>.</p> <h3>Component form <code>component_form</code></h3> <p>Same configuration of <code>gplaces_address_autocomplete</code> component form</p> <h3>Fill fields <code>fillfields</code></h3> <p>This configuration works similar to <code>gplaces_address_autocomplete</code>. By default this options are configured like following value: <code>javascript { general: { name: &#39;name&#39;, website: &#39;website&#39;, phone: [&#39;international_phone_number&#39;, &#39;formatted_phone_number&#39;] }, geolocation: { partner_latitude: &#39;latitude&#39;, partner_longitude: &#39;longitude&#39; }, address: { street: [&#39;street_number&#39;, &#39;route&#39;], street2: [&#39;administrative_area_level_3&#39;, &#39;administrative_area_level_4&#39;, &#39;administrative_area_level_5&#39;], city: [&#39;locality&#39;, &#39;administrative_area_level_2&#39;], zip: &#39;postal_code&#39;, state_id: &#39;administrative_area_level_1&#39;, country_id: &#39;country&#39; } }; </code></p> <h1>Technical</h1> <p>This module will install <code>base_setup</code> and <code>base_geolocalize</code>.<br> <em>I recommend you to setup <strong>Google Maps Key API</strong> and add it into Odoo <code>Settings &gt; General</code> Settings when you installed this module</em></p> <p><em><strong>List of Google APIs &amp; services required in order to make all features works</strong></em> - Geocoding API - Maps JavaScript API - Places API</p> <p>Visit this <a href="https://developers.google.com/maps/documentation/javascript/get-api-key">page</a> of how to get Google API Key</p> <p><a href="https://ko-fi.com/P5P4FOM0"><img src="https://www.ko-fi.com/img/donate_sm.png" alt="ko-fi"></a><br> <em>if you want to support me to keep this project maintained. Thanks :)</em></p>