{"id":1508,"date":"2009-07-16T03:45:24","date_gmt":"2009-07-16T08:45:24","guid":{"rendered":"http:\/\/www.mrc-productivity.com\/legacy\/?page_id=1508"},"modified":"2017-08-18T10:47:12","modified_gmt":"2017-08-18T15:47:12","slug":"how-to-add-google-maps-to-your-applications","status":"publish","type":"page","link":"https:\/\/www.mrc-productivity.com\/legacy\/m-painter-app-prop\/how-to-add-google-maps-to-your-applications","title":{"rendered":"Add Google Maps to your Applications"},"content":{"rendered":"<p>&nbsp;<\/p>\n<h1>Add Google Maps to your Applications<\/h1>\n<p>&nbsp;<\/p>\n<p>Some common purposes of the Google Maps are:<\/p>\n<ul>\n<li class=\"padleft\">Map a list of available products and where your customer base may find them<\/li>\n<li class=\"padleft\">Visualize the location of your nationwide fleet<\/li>\n<li class=\"padleft\">Embed closed order addresses to determine shipping logistics<\/li>\n<li class=\"padleft\">Map a list of current clients to see what geographical areas need more of your sales attention<\/li>\n<li class=\"padleft\">Create a graphical representation of your partners&#39; locations for easy customer search<\/li>\n<\/ul>\n<p>Please follow the steps below to integrate a Google Map inside of your web application:<\/p>\n<p><strong>Note:<\/strong> Before applying a Google Map to your application, your organization will need to license the Google Maps service directly from Google. Please see the <a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/usage\">Google Maps Terms of Service<\/a> for information regarding plans and pricing and visit <a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/get-api-key\"> Get API Key<\/a> to register for an API Key. <\/p>\n<p>Once you have your API key value, you will need to insert this into your mrc_servlet_config.xml file. This is accessible from the Admin Menu -> Edit Dictionary Files -> Servlet Properties. Open text mode from the &#39;More&#39; button on the right. Find the following property and insert the API key value into the empty value string:<\/p>\n<div style=\"padding: 15px 50px; background-color: gainsboro;\"><code>&lt;google-map-key pdesc=\"mapkey\" value=\"\" \/&gt;<\/code><\/div>\n<p><\/p>\n<p>Save and restart Tomcat.<\/p>\n<p>The following steps need to occur each time you wish to generate a map:<\/p>\n<ol>\n<li class=\"padleft\">Click the Globe within the m-Painter toolbar (shown below highlighted with a red outline).<br \/>\n<img decoding=\"async\" class=\"border\" src=\"\/legacy\/images\/googlemaps2.jpg\" alt=\"\" \/><\/li>\n<li class=\"padleft\">A helpful pop-up will appear that will allow you to customize your map. Options include:<\/li>\n<ol>\n<li class=\"padleft3\">Ability to control the <strong>Width<\/strong> and the <strong>Height<\/strong> of your map (in pixels).<\/li>\n<li class=\"padleft3\">Control the <strong>Default zoom level<\/strong> (The higher the number, the more zoomed in you are by default).<\/li>\n<li class=\"padleft3\">The ability to control <strong>default centering<\/strong> (By default, maps will center upon the first address, however you can center by a Latitude\/Longitude line)<\/li>\n<li class=\"padleft3\">The ability to control the <strong>marker<\/strong> type (By default the marker will be the red Google flag, however, you can conditionally use different images by entering the path to an image within a calculation. In this case, you would select the given calculation from the <strong>Custom marker image<\/strong> dropdown. Lastly, you could specify &quot;Other&quot; from the drop-down and hard code a static path to an existing image.<\/li>\n<li class=\"padleft3\"><strong>Show marker info<\/strong> allows your end user to control how they see additional &quot;balloon&quot; information. By default, the option is on click. However, changing the value to &quot;Mouseover&quot; will activate the balloon window on mouse contact.<\/li>\n<li class=\"padleft3\"><strong>Map Address<\/strong> &#8212; This option is perhaps the most important, as it controls what is mapped by Google. You can specify an entire address, a city, a zip code, or even just a state. So long as it is a valid location, it can be mapped! Select the necessary fields from the &quot;Select Field&quot; drop-down. Then press the &quot;Add&quot; button. <strong>Note:<\/strong> Be sure to add the necessary delimiters, such as commas where necessary.<\/li>\n<li class=\"padleft3\"><strong>Marker Text Info<\/strong> &#8212; This option controls what data is seen in a balloon pop-up when a user clicks on a marker within the map. As a developer, it is your decision what data, if any, should appear in the balloon pop-up.<\/li>\n<p><img decoding=\"async\" class=\"border\" src=\"\/legacy\/images\/googlemaps3.jpg\" alt=\"\" \/><\/li>\n<\/ol>\n<li class=\"padleft\">When completed, press &quot;OK&quot; and Save your application.<\/li>\n<li class=\"padleft\">When your application executes, you will see your Data markers begin to fill the screen as a progress bar within the map informs you of how many points have been populated:\n<p><img decoding=\"async\" class=\"border\" src=\"\/legacy\/images\/googlemaps4.jpg\" alt=\"\" \/><\/li>\n<p><\/p>\n<li class=\"padleft\">Once completed, your map will look something like this:<br \/>\n<br \/><img decoding=\"async\" class=\"border\" src=\"\/legacy\/images\/googlemaps5.jpg\" alt=\"\" \/><\/li>\n<\/ol>\n<p>&nbsp;<br \/>\n<strong>Additional Notes:<\/strong><br \/>\nQuestion: I have some existing m-Power maps that were created before 2014 and use the old Google Maps (v2) logic. What can I do to make these work?<br \/>\nAnswer: To convert an older map to the latest logic, simply open the application in m-Painter and click &quot;Save.&quot; m-Painter will make all of the necessary changes to your existing map to convert it to the proper (v3) syntax.<\/p>\n<p>Question: My application was heavily painted and I&#39;ve had to change m-Painter to text-editing mode. How can I still upgrade to v3? <br \/>\nAnswer: To manually convert an existing application, make the following two changes:<br \/>\n1. Add <code>\"${mapScripts}\"<\/code> directly before <code>\"&lt;script type=\"text\/javascript\" id=\"mrcmap\"&gt;\"<\/code><br \/>\n2. Change <code>\"document.observe(\"dom:loaded\", function() {   \"<\/code> to   <code>\"jQuery(function() {\"<\/code><br \/>\n3. Save.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; Add Google Maps to your Applications &nbsp; Some common purposes of the Google Maps are: Map a list of available products and where your customer base may find them Visualize the location of your nationwide fleet Embed closed order addresses to determine shipping logistics Map a list of current clients to see what geographical [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1410,"menu_order":15,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1508","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/pages\/1508","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/comments?post=1508"}],"version-history":[{"count":32,"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/pages\/1508\/revisions"}],"predecessor-version":[{"id":3396,"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/pages\/1508\/revisions\/3396"}],"up":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/pages\/1410"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/media?parent=1508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}