{"id":19354,"date":"2024-02-22T05:24:01","date_gmt":"2024-02-22T05:24:01","guid":{"rendered":"https:\/\/viewmyprojects.com\/winwirewp\/?p=19354"},"modified":"2024-02-22T05:31:28","modified_gmt":"2024-02-22T05:31:28","slug":"google-maps-in-web-applications","status":"publish","type":"post","link":"https:\/\/viewmyprojects.com\/winwirewp\/blog\/google-maps-in-web-applications\/","title":{"rendered":"Google Maps in Web Applications &#8211; Unlocking Enhanced User Experiences"},"content":{"rendered":"\n<p>Google maps integration allows embedding interactive maps into a web application. Interactive maps in web application enhances user experience, allowing users to visualize locations, with accurate address selection.<\/p>\n\n\n\n<p>Key Features:<\/p>\n\n\n\n<ul class=\"blog-detail-list wp-block-list\">\n<li>Accurate Location Pinpointing<\/li>\n\n\n\n<li>Smart Place Autocomplete<\/li>\n<\/ul>\n\n\n\n<p><strong>Accurate Location Pinpointing<\/strong><strong>:<\/strong> Users can precisely identify their locations and nearby points of interest.<\/p>\n\n\n\n<p><strong>Smart Place Autocomplete:<\/strong> Simplifies address selection by predicting and providing location suggestions in a dropdown list based on what user has entered so far.<\/p>\n\n\n\n<p>While there are many possibilities, this article is primarily focused on two key features:<\/p>\n\n\n\n<ul class=\"blog-detail-list wp-block-list\">\n<li>Adding markers for location pointing<\/li>\n\n\n\n<li>Places autocomplete for search suggestions.<\/li>\n<\/ul>\n\n\n\n<p>Here are the learnings in this article:<\/p>\n\n\n\n<ul class=\"blog-detail-list wp-block-list\">\n<li>Add place autocomplete from google for a search box.<\/li>\n\n\n\n<li>Integrate google maps in the application.<\/li>\n\n\n\n<li>Using marker for location pointing<\/li>\n<\/ul>\n\n\n\n<p><strong>Pre-requisites:<\/strong><\/p>\n\n\n\n<ul class=\"blog-detail-list wp-block-list\">\n<li><strong>Google Cloud Platform Account:<\/strong> A Google Cloud Platform (GCP) account is required to create a project and obtain an API key.<\/li>\n\n\n\n<li><strong>API key:<\/strong> An API key is required to authenticate user\u2019s application requests to Google Maps Services.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to generate API key<\/strong>?<\/h2>\n\n\n\n<ul class=\"blog-detail-list wp-block-list\">\n<li>Create a Google Cloud Platform Project and Enable the Maps JavaScript API\n<ul class=\"wp-block-list\">\n<li>Go to the Google Cloud Console.<\/li>\n\n\n\n<li>Create a new project or select an existing one.<\/li>\n\n\n\n<li>In the project dashboard, navigate to &#8220;APIs &amp; Services&#8221;&gt; &#8220;Library&#8221;.<\/li>\n\n\n\n<li>Search for &#8220;Maps JavaScript API&#8221; and enable it for your project.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Obtain an API key<\/strong>\n<ul class=\"wp-block-list\">\n<li>In the Google Cloud Console, go to &#8220;APIs &amp; Services&#8221;&gt; &#8220;Credentials&#8221;.<\/li>\n\n\n\n<li>Click &#8220;Create Credentials&#8221; and select &#8220;API key&#8221;.<\/li>\n\n\n\n<li>Copy the generated API key. Remember to restrict your API key for security reasons to prevent unauthorized use.<\/li>\n\n\n\n<li>The API key starts working only after entering the required credentials in the billing section in the Google Cloud Platform.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to integrate Google Maps<\/strong>?<\/h2>\n\n\n\n<ul class=\"blog-detail-list wp-block-list\">\n<li><strong>Add the Generated API key to the web application<\/strong>\n<ul class=\"wp-block-list\">\n<li>In the index.html file, add &lt;script> element to include the generated API key in the Angular application as follows: (Replace *** with API key generated)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"752\" height=\"161\" src=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image.png\" alt=\"How to generate API key for google maps\" class=\"wp-image-19355\" style=\"width:752px;height:auto\" srcset=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image.png 752w, https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-300x64.png 300w\" sizes=\"auto, (max-width: 752px) 100vw, 752px\" \/><\/figure><\/div>\n\n\n<ul class=\"blog-detail-list wp-block-list\">\n<li>      In the TS file, the code to display and use the map should be below.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"596\" height=\"688\" src=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-1.png\" alt=\"How to generate API key for google maps\" class=\"wp-image-19356\" srcset=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-1.png 596w, https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-1-260x300.png 260w\" sizes=\"auto, (max-width: 596px) 100vw, 596px\" \/><\/figure><\/div>\n\n\n<ul class=\"blog-detail-list wp-block-list\">\n<li>Declare a variable named marker, to manage the marker that appears on the map<\/li>\n\n\n\n<li>Set initial Coordinates anything to set the initial geographical coordinates for the map\u2019s center.<\/li>\n\n\n\n<li>Can set any longitude and longitude values.<\/li>\n\n\n\n<li>The location will be <a>default<\/a> set to the current location\u2019s latitude and longitude; in the else case, the values of the initial geographical coordinates will be pointed.<\/li>\n\n\n\n<li>mapConfigurations defines various configurations for a map\u2019s appearance and behavior. It can be customized based on the requirement.<\/li>\n\n\n\n<li>searchBox is an input field, where users can enter search queries.<\/li>\n\n\n\n<li><strong>map.controls<\/strong> add the search input directly into the map\u2019s user interface and is placed in the TOP_CENTER position in the map.<\/li>\n<\/ul>\n\n\n\n<p><strong>Output:<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"808\" height=\"811\" src=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-2.png\" alt=\"google maps integration\" class=\"wp-image-19357\" style=\"width:473px;height:auto\" srcset=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-2.png 808w, https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-2-300x300.png 300w, https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-2-150x150.png 150w, https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-2-768x771.png 768w\" sizes=\"auto, (max-width: 808px) 100vw, 808px\" \/><\/figure><\/div>\n\n\n<p><strong>For Places Autocomplete:\u00a0<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"497\" height=\"590\" src=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-3.png\" alt=\"google maps integration\" class=\"wp-image-19358\" srcset=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-3.png 497w, https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-3-253x300.png 253w\" sizes=\"auto, (max-width: 497px) 100vw, 497px\" \/><\/figure><\/div>\n\n\n<ul class=\"blog-detail-list wp-block-list\">\n<li><strong>searchBox.addListener(&#8216;places_changed&#8217;, () =&gt; {:<\/strong> This code sets up an event listener on a searchBox object.<\/li>\n\n\n\n<li>The listener is configured to respond to the &#8216;places_changed&#8217; event.<\/li>\n\n\n\n<li>This event is likely triggered when the user interacts with the search box and selects a location from the suggestions provided by the Google Places API.<\/li>\n<\/ul>\n\n\n\n<p><strong>Output:<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"812\" height=\"427\" src=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-4.png\" alt=\"google maps integration\" class=\"wp-image-19359\" style=\"width:584px;height:auto\" srcset=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-4.png 812w, https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-4-300x158.png 300w, https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-4-768x404.png 768w\" sizes=\"auto, (max-width: 812px) 100vw, 812px\" \/><\/figure><\/div>\n\n\n<p><strong>For initializing the marker and location change on marker drag:<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"692\" height=\"747\" src=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-5.png\" alt=\"Google Maps APIs\" class=\"wp-image-19360\" style=\"width:404px;height:auto\" srcset=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-5.png 692w, https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-5-278x300.png 278w\" sizes=\"auto, (max-width: 692px) 100vw, 692px\" \/><\/figure><\/div>\n\n\n<p><strong>Output:<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"783\" height=\"321\" src=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-6.png\" alt=\"Google Maps APIs\" class=\"wp-image-19361\" style=\"width:665px;height:auto\" srcset=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-6.png 783w, https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-6-300x123.png 300w, https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-6-768x315.png 768w\" sizes=\"auto, (max-width: 783px) 100vw, 783px\" \/><\/figure><\/div>\n\n\n<p><strong>For marking current location by default:<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"721\" height=\"727\" src=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-7.png\" alt=\"Google Maps in Web Applications \" class=\"wp-image-19362\" srcset=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-7.png 721w, https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-7-298x300.png 298w, https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-7-150x150.png 150w\" sizes=\"auto, (max-width: 721px) 100vw, 721px\" \/><\/figure><\/div>\n\n\n<p><strong>Output:<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"940\" height=\"409\" src=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-8.png\" alt=\"Google Maps in Web Applications \" class=\"wp-image-19363\" style=\"width:758px;height:auto\" srcset=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-8.png 940w, https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-8-300x131.png 300w, https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-8-768x334.png 768w\" sizes=\"auto, (max-width: 940px) 100vw, 940px\" \/><\/figure><\/div>\n\n\n<p><strong>For share location and generating links based on the marker\u2019s position:<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"686\" height=\"381\" src=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-9.png\" alt=\"Google Maps in Web Applications \" class=\"wp-image-19364\" style=\"width:624px;height:auto\" srcset=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-9.png 686w, https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-9-300x167.png 300w\" sizes=\"auto, (max-width: 686px) 100vw, 686px\" \/><\/figure><\/div>\n\n\n<ul class=\"blog-detail-list wp-block-list\">\n<li>The <strong>shareLocation()<\/strong> function handles the process of sharing a location. It verifies if the map is initialized and has a center.<\/li>\n\n\n\n<li>It checks if the search input field has a value.<\/li>\n\n\n\n<li>If the conditions are met, the code attempts to retrieve the position of a marker (if it exists) on the map.<\/li>\n\n\n\n<li>The function then gets the center of the map and attempts to generate a shareable URL using the <strong>generateShareLink()<\/strong> function.<\/li>\n\n\n\n<li>The <strong>generateShareLink()<\/strong> function takes a location\u00a0 and creates a Google Maps URL with the provided location coordinates.<\/li>\n<\/ul>\n\n\n\n<p><strong>Output:<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"723\" height=\"463\" src=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-10.png\" alt=\"\" class=\"wp-image-19365\" style=\"width:487px;height:auto\" srcset=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-10.png 723w, https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/image-10-300x192.png 300w\" sizes=\"auto, (max-width: 723px) 100vw, 723px\" \/><\/figure><\/div>\n\n\n<p>Once the location is selected and the share button is clicked, the URL is generated and can be shared.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Google maps integration allows embedding interactive maps into a web application. Interactive maps in web application enhances user experience, allowing users to visualize locations, with accurate address selection. Key Features: Accurate Location Pinpointing: Users can precisely identify their locations and nearby points of interest. Smart Place Autocomplete: Simplifies address selection by predicting and providing location&hellip; <a class=\"more-link\" href=\"https:\/\/viewmyprojects.com\/winwirewp\/blog\/google-maps-in-web-applications\/\">Continue reading <span class=\"screen-reader-text\">Google Maps in Web Applications &#8211; Unlocking Enhanced User Experiences<\/span><\/a><\/p>\n","protected":false},"author":137,"featured_media":19368,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_eb_attr":"","_uag_custom_page_level_css":"","footnotes":""},"categories":[59,61],"tags":[],"class_list":["post-19354","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogs","category-app-modernization-blogs","entry"],"acf":[],"featured_image_src":"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/Google-Maps-in-Web-Applications.png","author_info":{"display_name":"Bhavagna","author_link":"https:\/\/viewmyprojects.com\/winwirewp\/author\/bhavagna\/"},"views":2717,"uagb_featured_image_src":{"full":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/Google-Maps-in-Web-Applications.png",800,440,false],"thumbnail":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/Google-Maps-in-Web-Applications-150x150.png",150,150,true],"medium":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/Google-Maps-in-Web-Applications-300x165.png",300,165,true],"medium_large":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/Google-Maps-in-Web-Applications-768x422.png",750,412,true],"large":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/Google-Maps-in-Web-Applications.png",750,413,false],"1536x1536":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/Google-Maps-in-Web-Applications.png",800,440,false],"2048x2048":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/Google-Maps-in-Web-Applications.png",800,440,false],"post-thumbnail":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2024\/02\/Google-Maps-in-Web-Applications.png",800,440,false]},"uagb_author_info":{"display_name":"Bhavagna","author_link":"https:\/\/viewmyprojects.com\/winwirewp\/author\/bhavagna\/"},"uagb_comment_info":0,"uagb_excerpt":"Google maps integration allows embedding interactive maps into a web application. Interactive maps in web application enhances user experience, allowing users to visualize locations, with accurate address selection. Key Features: Accurate Location Pinpointing: Users can precisely identify their locations and nearby points of interest. Smart Place Autocomplete: Simplifies address selection by predicting and providing location&hellip;&hellip;","_links":{"self":[{"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/posts\/19354","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/users\/137"}],"replies":[{"embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/comments?post=19354"}],"version-history":[{"count":3,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/posts\/19354\/revisions"}],"predecessor-version":[{"id":19369,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/posts\/19354\/revisions\/19369"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/media\/19368"}],"wp:attachment":[{"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/media?parent=19354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/categories?post=19354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/tags?post=19354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}