<h1>Web Google Maps</h1> <p><a href="https://youtu.be/2UdG5ILDtiY" 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>map</code>) - New widget (<code>gplaces_address_autocomplete</code>) - New widget (<code>gplaces_autocomplete</code>)</p> <h2>Map view (<code>map</code>)</h2> <p>Basically, this new view(<code>map</code>) will integrate Google Maps into Odoo.<br> Enable you to display a partner location or all your partners location around the world on a map.<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>no_limit</code> : attribute to tell the map either to load all records(markers) in a single load or take Odoo default behavior - <code>lat</code> : attritube to tell the map the latitude field on the object (mandatory) - <code>lng</code> : attritute to tell the map the longitude field on the object (mandatory) - <code>title</code> : attribute to tell the map the title that will be printed on marker info window (optional, by default &#39;name&#39;) - <code>color</code> : attribute to modify marker color (optional) any given color will set all markers color. - <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</p> <p>How to create the view?<br> Example</p> <blockquote> <pre><code>&lt;!-- View --&gt; &lt;record id=&quot;view_partner_map&quot; model=&quot;ir.ui.view&quot;&gt; &lt;field name=&quot;name&quot;&gt;view.partner.map&lt;/field&gt; &lt;field name=&quot;model&quot;&gt;res.partner&lt;/field&gt; &lt;field name=&quot;arch&quot; type=&quot;xml&quot;&gt; &lt;!-- Define aliase name for geolocation fields into view attributes --&gt; &lt;map class=&quot;o_res_partner_map&quot; no_limit=&quot;true&quot; string=&quot;Map&quot; lat=&quot;partner_latitude&quot; lng=&quot;partner_longitude&quot; colors=&quot;blue:company_type==&#39;person&#39;;green:company_type==&#39;company&#39;;&quot;&gt; &lt;field name=&quot;id&quot;/&gt; &lt;field name=&quot;name&quot;/&gt; &lt;field name=&quot;street&quot;/&gt; &lt;field name=&quot;street2&quot;/&gt; &lt;field name=&quot;city&quot;/&gt; &lt;field name=&quot;zip&quot;/&gt; &lt;field name=&quot;email&quot;/&gt; &lt;field name=&quot;state_id&quot;/&gt; &lt;field name=&quot;country_id&quot;/&gt; &lt;field name=&quot;partner_latitude&quot;/&gt; &lt;field name=&quot;partner_longitude&quot;/&gt; &lt;field name=&quot;company_type&quot;/&gt; &lt;field name=&quot;image_small&quot;/&gt; &lt;field name=&quot;mobile&quot;/&gt; &lt;field name=&quot;phone&quot;/&gt; &lt;field name=&quot;type&quot;/&gt; &lt;field name=&quot;function&quot;/&gt; &lt;templates&gt; &lt;t t-name=&quot;map-marker-iw&quot;&gt; &lt;div class=&quot;gm-iw-container o_map_global_click o_res_partner_map&quot;&gt; &lt;div class=&quot;gm-iw-title&quot;&gt; &lt;img t-att-src=&quot;map_image(&#39;res.partner&#39;, &#39;image_small&#39;, record.id.raw_value)&quot;/&gt; &lt;span&gt;&lt;strong&gt;&lt;field name=&quot;display_name&quot;/&gt;&lt;/strong&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class=&quot;gm-iw-details&quot;&gt; &lt;ul&gt; &lt;li t-if=&quot;record.parent_id.raw_value and !record.function.raw_value&quot;&gt;&lt;field name=&quot;parent_id&quot;/&gt;&lt;/li&gt; &lt;li t-if=&quot;!record.parent_id.raw_value and record.function.raw_value&quot;&gt;&lt;field name=&quot;function&quot;/&gt;&lt;/li&gt; &lt;li t-if=&quot;record.parent_id.raw_value and record.function.raw_value&quot;&gt;&lt;field name=&quot;function&quot;/&gt; at &lt;field name=&quot;parent_id&quot;/&gt;&lt;/li&gt; &lt;li t-if=&quot;record.city.raw_value and !record.country_id.raw_value&quot;&gt;&lt;field name=&quot;city&quot;/&gt;&lt;/li&gt; &lt;li t-if=&quot;!record.city.raw_value and record.country_id.raw_value&quot;&gt;&lt;field name=&quot;country_id&quot;/&gt;&lt;/li&gt; &lt;li t-if=&quot;record.city.raw_value and record.country_id.raw_value&quot;&gt;&lt;field name=&quot;city&quot;/&gt;, &lt;field name=&quot;country_id&quot;/&gt;&lt;/li&gt; &lt;li t-if=&quot;record.email.raw_value&quot; class=&quot;o_text_overflow&quot;&gt;&lt;field name=&quot;email&quot;/&gt;&lt;/li&gt; &lt;li t-if=&quot;record.phone.raw_value&quot;&gt;Phone: &lt;field name=&quot;phone&quot;/&gt;&lt;/li&gt; &lt;li t-if=&quot;record.mobile.raw_value&quot;&gt;Mobile: &lt;field name=&quot;mobile&quot;/&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/t&gt; &lt;/templates&gt; &lt;/map&gt; &lt;/field&gt; &lt;/record&gt; </code></pre> </blockquote> <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> <h2>How to setup color for marker on map?</h2> <p>There are two attributes: - <code>colors</code> - <code>color</code> </p> <p>Example:</p> <blockquote> <pre><code>&lt;!-- colors --&gt; &lt;map string=&quot;Map&quot; lat=&quot;partner_latitude&quot; lng=&quot;partner_longitude&quot; colors=&quot;green:company_type==&#39;person&#39;;blue:company_type==&#39;company&#39;;&quot;&gt; ... &lt;/map&gt; </code></pre> </blockquote> <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> <h2>New widget (<code>gplaces_address_autocomplete</code>)</h2> <p>Basically this new widget will integrate another cool feature of Google Maps which is &quot;Place Autocomplete Address Form&quot; (go and visit this <a href="https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform">site</a> if you don&#39;t know yet how this cool feature work) </p> <p>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></p> <p>By default this option are configured like following value:</p> <blockquote> <pre><code>{ &#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></pre> </blockquote> <p>This configuration can be modify into view field definition.<br> Example:</p> <blockquote> <pre><code>&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_autocomplete&quot; options=&quot;{&#39;component_form&#39;: {&#39;street_number&#39;: &#39;short_name&#39;}}&quot;/&gt; ... &lt;/field&gt; &lt;/record&gt; </code></pre> </blockquote> <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 to set a value for each field automatically.<br> A field can contains one or multiple elements of component form<br> By default this options are configured like following value:</p> <blockquote> <pre><code>{ &#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></pre> </blockquote> <p>This configuration can be modify into view field definition as well<br> Example:</p> <blockquote> <pre><code>&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></pre> </blockquote> <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> <h2>New widget (<code>gplaces_autocomplete</code>)</h2> <p>Basically this new widget will integrate &quot;Google Place Autocomplete&quot; (go and visit this <a href="https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete">site</a></p> <p>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>.</p> <p>By default this options are configured like following value:</p> <blockquote> <pre><code>{ general: { name: &#39;name&#39;, website: &#39;website&#39;, phone: [&#39;international_phone_number&#39;, &#39;formatted_phone_number&#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></pre> </blockquote> <h1>Technical:</h1> <p>This module will install <code>base_setup</code> and <code>base_geolocalize</code> (no more <code>website_google_maps</code>).<br> <em>I recommend you to add Google Maps Key API into Odoo Settings &gt; General Settings when you installed this module</em></p> <p>The goal of this module is to bring the power of Google Maps into Odoo<br> This module has tested on Odoo Version 10.0c </p> <p>Regards,<br> Yopi<br> yopiangi@gmail.com</p>