{"id":68,"date":"2015-05-12T00:55:42","date_gmt":"2015-05-12T05:55:42","guid":{"rendered":"http:\/\/www.decodingthecloud.com\/?p=68"},"modified":"2015-05-12T00:55:42","modified_gmt":"2015-05-12T05:55:42","slug":"adding-google-maps-v3-to-your-visualforce-page","status":"publish","type":"post","link":"https:\/\/www.decodingthecloud.com\/?p=68","title":{"rendered":"Adding Google maps v3 to your Visualforce page"},"content":{"rendered":"<p>The Google maps API is perhaps the most famous and well known APIs out there. There could always be scenarios requiring a Google map to embedded inside a VisualForce page. This could either be a stand alone page or an inline VF page in a detail page layout!<\/p>\n<p>For example: In your Account detail page, you might want to plot all the contacts on a Google map based on their location.<\/p>\n<p>A quick note about Google maps APIs. They have been around for quite some time now and google being the dynamic company that they are, have been updating the API quite a bit. So I wanted to put out a tutorial which refers v3. Google makes other awesome APIs as well and hopefully this blog will cover all of them eventually and explain how they can be used with Salesforce.<\/p>\n<p>So lets move on to how we can accomplish this.<\/p>\n<p>In the past you needed a developer API key to use the google map API but now you need it only for commercial applications. But in any case go and check out\u00a0<a href=\"https:\/\/console.developers.google.com\">https:\/\/console.developers.google.com<\/a>\u00a0and login with your Google account. If you have not created a project, then go ahead and create one.\u00a0You can see the different available Google APIs.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone  wp-image-69\" src=\"https:\/\/www.decodingthecloud.com\/wp-content\/uploads\/2015\/04\/Googlemap-1-300x105.png\" alt=\"Googlemap-1\" width=\"474\" height=\"166\" srcset=\"https:\/\/www.decodingthecloud.com\/wp-content\/uploads\/2015\/04\/Googlemap-1-300x105.png 300w, https:\/\/www.decodingthecloud.com\/wp-content\/uploads\/2015\/04\/Googlemap-1-1024x357.png 1024w, https:\/\/www.decodingthecloud.com\/wp-content\/uploads\/2015\/04\/Googlemap-1.png 1573w\" sizes=\"(max-width: 474px) 100vw, 474px\" \/><\/p>\n<p>Even though a key is not mandatory, it would be a good idea to use it as you can do cool stuff such as monitoring the API usage.<\/p>\n<p>Read more about it <a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/tutorial#api_key\">here<\/a>.<\/p>\n<p>In our example, let us build a simple VF page which will be used as an inline page in the Contact detail page layout.<\/p>\n<p>First use this <a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/tutorial\">documentation<\/a> as the reference in beginning to understand the Google map API.<\/p>\n<p><strong>So let us jump right into the code for our VF page.<\/strong><\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/calvinnr7\/1ab3c60bce9697632e10.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/calvinnr7\/1ab3c60bce9697632e10\">Gist<\/a>.<\/noscript><\/div>\n<p>This is a simple VF page consisting of mainly HTML and JavaScript code. On Line 57 we can see the &lt;div&gt; element which displays the map. It makes use of the standard Contact controller.<\/p>\n<p>The Initialize() method is the heart of this code. Here we are first geocoding the contact&#8217;s address to obtain the latitude and longitude coordinates of the address so that we can pass them to the google map API.<\/p>\n<p>If the Geocoding was successful, we pass the coordinates to the map API to initialize and display the map inside the div element.\u00a0A marker is also added at that location.<\/p>\n<p>When this VF\u00a0page is used added to the Contact detail page, it will display the map based on the address for that record.<\/p>\n<p><a href=\"https:\/\/www.decodingthecloud.com\/wp-content\/uploads\/2015\/05\/Googlemap-2.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-88\" src=\"https:\/\/www.decodingthecloud.com\/wp-content\/uploads\/2015\/05\/Googlemap-2-300x190.png\" alt=\"Googlemap-2\" width=\"300\" height=\"190\" srcset=\"https:\/\/www.decodingthecloud.com\/wp-content\/uploads\/2015\/05\/Googlemap-2-300x190.png 300w, https:\/\/www.decodingthecloud.com\/wp-content\/uploads\/2015\/05\/Googlemap-2-1024x649.png 1024w, https:\/\/www.decodingthecloud.com\/wp-content\/uploads\/2015\/05\/Googlemap-2.png 1422w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>We can also pass an array of coordinates to the map API to display multiple locations on the map.<\/p>\n<p>Please let me know if you have any questions or comments.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Google maps API is perhaps the most famous and well known APIs out there. There could always be scenarios requiring a Google map to embedded inside a VisualForce page. This could either be a stand alone page or an inline VF page in a detail page layout! For example: In your Account detail page, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[],"_links":{"self":[{"href":"https:\/\/www.decodingthecloud.com\/index.php?rest_route=\/wp\/v2\/posts\/68"}],"collection":[{"href":"https:\/\/www.decodingthecloud.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.decodingthecloud.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.decodingthecloud.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.decodingthecloud.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=68"}],"version-history":[{"count":13,"href":"https:\/\/www.decodingthecloud.com\/index.php?rest_route=\/wp\/v2\/posts\/68\/revisions"}],"predecessor-version":[{"id":89,"href":"https:\/\/www.decodingthecloud.com\/index.php?rest_route=\/wp\/v2\/posts\/68\/revisions\/89"}],"wp:attachment":[{"href":"https:\/\/www.decodingthecloud.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=68"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.decodingthecloud.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=68"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.decodingthecloud.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=68"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}