Magento

How to Add Google Map on Magento 2 Contact Page at Singapore?

Posted on by Maris
How to Add Google Map on Magento 2 Contact Page at Singapore?
02
Nov

It comes as no surprise when Google is the world’s most popular search engine by far. Going along with this success, Google Maps has also become the most used navigation app by both users and businesses.

In fact, nearly 5 million businesses use Google Maps on their live websites, which is quite an outstanding figure for a navigation app. In practice, Google Maps can be a vital component to success when it’s incorporated into a business’s website. 

Therefore, today’s post will explore Google Maps’ success, most importantly, a detailed guide on how to add Google Maps on a Magento 2 contact page. Together with SmartOSC to clarify the details How to Add Google Map on Magento 2 Contact Page through the following article.

Benefits Of Google Maps To ECommerce Businesses?

When shopping online, lots of customers will check for a store’s location for main reasons:

►►►► Please visit our products:  Magento POS, BigCommerce POS, Shopify POS, Woocommerce POS, Restaurant POS, NetSuite POS, Thailand POS, South Africa POS and Commercetools POS

  • Check the trustworthiness of the seller. If your store doesn’t appear on Google Maps, there is a high possibility that shoppers leave your site before making any purchase.
  • Interested customers want to buy directly from your nearest storefront (if possible).

Thus, below are some benefits of incorporating Google Maps into your website that should not be overlooked. (In case you still don’t have Google Maps on your e-store).

See more articles: Magento Agency

Easily Specify The Store’s Location On-Site

For customers who want to see a store’s address while wandering around its website, the availability of a Google Map block right on your site, for sure, can enhance your customers’ on-site shopping experience to a higher level. 

A visual representation of your business’ location via the Google Map block allows visitors to better specify the storefront’s exact address effortlessly. 

Enhance Customers’ Shopping Experience    

More than just giving exact directions, a ready-to-use Google Map right on your website definitely offers customers the most convenient way to look for your store’s location without inputting the address into a new tab. 

Moreover, displaying a functional plugin like Google Maps can create a more professional appearance for your website if you find ways to deliver proper attention to tasteful web design. Google Maps for sure a “worth-to-try” tip to push the site’s credibility and trustworthiness.

The best thing about an embedded Google Map on your site is that it comes with the Google Maps app’s full functions. 

Thus, customers can view not only the location they need but also further related information to that store, for instance, star rating, the number of reviews, nearby areas, etc.)

Related Articles:   Magento 2 Customer Attributes: The A – Z Guide for Dummies at Singapore!

Furthermore, the link of Google Maps to your website somewhat allays any fears whether your website is fake, fraudulent, or a scam. 

Most importantly, with the zoom capability on the map, customers can evaluate your business’s reliability via the storefront and nearby areas. This function can be really essential if your brand is just new or without much attention. 

Improve The Business’s Online Presence

When Google Maps is incorporated into your website, it means that you already fill in all the required information of your physical store on Google Cloud in order to get the API key. 

Basically, for those who don’t know what API key means it’s the code needed to associate Google Maps with your website. 

This action allows your website to appear on customers’ search results when searching for your website or related services in relevant areas. 

In other words, for your collaborative efforts, Google better search for your website, then push your rankings in the search result pages. 

See more articles: https://www.smartosc.com/insights/magento-development-service-company

A Guide To Adding Google Maps To The Magento 2 Contact Page

In order to add Google Maps to a website’s contact page, you will need support from the Magento Page Builder, a rich feature kit designed to optimize the page customization. 

In other words, it facilitates the process of creating content-rich pages with highly customized designs to drive more engagement from the site’s visitors. 

There are 2 primary stages you need to walk through to add Google Maps to the contact page successfully. 

Step 1: Associate Google Maps With The ECommerce Site

Before making any configuration changes, you must create a project on the Google Cloud Platform for which you want to add the API key. Read the detailed guide of Google document on how to get the API key.  

Do the following actions once you successfully get an API key:

  • Log in to your Admin account at the backend of your Magento 2 store
  • Go to Stores > Settings > Configuration
  • Open the General section, choose Content Management > Advanced Content Tools
  • Copy and paste your API key into the Google Maps API Key field. Then, click the Test Key button
  • With the Test Key, you will know whether your code (the API key) is invalid or not. If the result is yes, click on the Save Config button 

Step 2: Add Google Maps To The Site’s Contact Page

Basically, when you complete the first step, it means that your site is connected to Google Maps. Now, you need to add the Map block to place Google Maps on the store’s contact page.

Related Articles:   4 Best Ecommerce Platforms For Your Business In Singapore

This is what you do next: 

  • In the left sidebar, choose Content > Pages.
  • On the page grid, click on the Edit option (on the Action column) of the Contact Page.
  • Select Media in the Page Builder panel.
  • Drag and drop the Map block to the stage. (Note: If there is something wrong with the inserted API key, the stage will display the request for a valid API key to use that map).

Step 3: Pin The Business’s Location On The Map Block 

When the Map is ready to use, you need to pin your physical store’s address on the map block. As a result, visitors will see your store’s locations highlighted on the map.

  • Hover over the map container to display the toolbox.
  • Click on the Setting icon.
  • Move your mouse to the upper-right corner of the Edit Map page, then click Add Location.
  • Here, you will set the Location Name and the Coordinates.

Apart from inserting detail values in the Coordinates fields, you can drag the pin in the map in the Position box to specify the location. 

The easiest way to get the exact coordinates for your store is to open Google Maps in a new browser window. 

Then search for your location on the map. And you will get the exact value for your store’s coordinates in the URL. Finally, click on the Save button in the upper-right corner to save the new settings. 

Step 4: Configure The Map Block On-Site

Change The Map Style       
  • Go to Stores > Settings > Configuration > Content Management.
  • Open the Advanced Content Tools.
  • Under the Google Maps Style text box, click Create Map Style.
  • Customize the map style to what you like.
  • Click Finish when complete.

In the second phase of the style setting, you need to export the newly created style as JSON code or as a URL so that you’re able to add it to the Magento configuration. 

You can see 2 options in the Export Style pop-up: Copy Json and Copy URL. All you need to do is to click on one out of 2 options. 

Back to your Admin browser tab to paste the code or URL into the Google Map Style box, finally, click on the Save Config button. 

Change The Map Settings
  • Again click on the Setting icon in the map toolbox.
  • Here, you can perform simple actions like change the height of the displayed map in pixels or whether to use the Show Controls feature (allow the standard Google Maps controls to appear).
  • In the Advanced settings, select Alignment to control the horizontal position of the map content added to the map container. 
  • Furthermore, store admins can also change the Border style used for 4 sides of the map container with 10 options in total. 
  • In the Margins and Padding fields, fill in the wanted value (the amount of blank space – in pixels) for the outside and inside edges of all container’s sides. 
  • When you finish the settings to your desired map block, click Save and come back to the Page Builder workplace for the next changes.
Related Articles:   Magento Website Development Company Singapore
Change The Grid Size

The grid size influences the map size related to a column on the Page Builder stage. The default value is 12 columns wide (maximum is 16 columns).

  • Choose Stores > Settings > Configuration > Content Management > Advanced Content Tools.
  • Insert your wanted value for the Default Column Grid Size field and Maximum Column Grid Size field. 
  • When complete, click Save Config.

See more articles: https://www.smartosc.com/insights/top-10-magento-development-companies-in-singapore

Still, Need A Google Maps Extension For Magento 2?

The answer is Yes and No.

Yes! If your web runs in the Magento Commerce Edition (a charge edition), an enterprise-grade eCommerce platform. For this edition, online merchants will get a much richer set of advanced features to customize their website optimally, including the Page Builder workspace.

On the other hand, the Magento Open Source (a free edition), typically designed for developers and small businesses, comes with quite limited features compared to the Commerce edition. 

Thus, Open Source users can’t add Google Maps directly with no extension support since their edition doesn’t support the Page Builder features. 

The Bottom Line!

Google Maps is one of the most valuable services offered by Google for online business. By adding Google Maps to your eCommerce site, you can get its fullest potential to boost traffic and drive sales.  

Hope this post is a useful info reference and brings back a different perspective of Google Maps application on eCommerce. 

Thanks for reading! 

Article source: Magento Việt Nam

►►►► Our related services: BackOrder, Bigcommerce automation, Bigcommerce product recommendation, T jobs in Vietnam, workplace collaboration tools, workplace management platform, collaboration in the workplace, employee experience in the workplace, digital workplace solutions

Maris

51 thoughts on “How to Add Google Map on Magento 2 Contact Page at Singapore?”

  3. Stewartehx says:

    куда можно съездить на море с собакой санаторий цвс пятигорск официальный сайт
    лосенок усть илимск отдых в чернолучье в омске санаторий юбилейный бердск официальный сайт
    санаторий эльбрус в железноводске официальный сайт алтай санатории белокурихи курорт эльбрус официальный сайт

  4. Stewartypy says:

    санаторий по сердечно сосудистым заболеваниям эндометриома лечение
    пансионат астерия гостиница сейт неби отели в байкальске
    переделкино санаторий пансионат надежда кабардинка официальный сайт цены санаторий руно пятигорск официальный

  5. Stewartdep says:

    эверест мини отель казань ингала тюмень
    отель ибис в нижнем новгороде официальный сайт железноводск дворец эмира бухарского оломоуцкая 44 волжский
    г адлер краснодарский край санатории в карловых варах феодосия золотые пески

  6. Stewartchp says:

    города курорты краснодарского края список погода в октябре в гаграх
    санатории для лечения бронхиальной астмы в россии светлогорск санаторий янтарный лучезарный лоо официальный сайт
    крым судак отели на берегу моря санатории рф lada resort тольятти

  7. Stewartdgx says:

    сунгуль санаторий официальный сайт отели ялты с бассейном с подогревом
    витязево цены жемчужная ванна что это такое ростов на дону санатории
    рассвет николаевка крым отзывы дом отель классик апартаменты на тверской нижний новгород

  8. Stewartnnk says:

    детские лечебные санатории жилье архипо осиповка
    гостиница марракеш уфа санатории горно алтайска отель империал судак
    baltic travel хоспис для больных альцгеймера отель оскар москва

  39. Shela Pelletier says:

    We have hacked your website ecommerceplatformsingapore.com and extracted your databases. This was due to the security holes you had in your your site/server which have gained us remote control of everything that was on the server.

    Our team is mostly interested in customer, administrative, and employee information which we have extracted through your databases once we got remote control over the server. It still needs to be sorted out but it will be well-organized once finished. First, we will be going through the emails/sms information and contacting the recipient how you held in disregard about their information being exposed to a hacking group when you could have stopped it. This would be detrimental to your personal image with these relationships with these people. Lastly, now that we have information not only will we be monetizing off it with our methods but made public or sold to other people that will do whatever they wish with the information also after we are done.

    Now you can put a stop to this by paying a $3000 fee (0.11 BTC) in bitcoin. You can find our address by visiting https://blockchair.com/bitcoin/address/31o29SdN5c5fpPuy4WvHzkyT37RHUSA36Q where you can copy and paste the address or scan the QR code. We will be notified of payment which we will then delete the information we have obtained, patch the hole in the site/server which we got in and remove you from any future targeting in the future. You have 72 hours in doing so after viewing this message or the series of steps will commence. You can obtain bitcoin through such services such as paxful.com or do a search on bing.com

  51. sklep online says:

    Wow, superb blog layout! How long have you ever been blogging for?
    you make running a blog look easy. The entire look of your web site is great, as
    well as the content! You can see similar here e-commerce

Leave a Reply

Your email address will not be published. Required fields are marked *

Our Ecosystem : Vietnam, Australia 1, Singapore 1, Thailand, Australia 2, Singapore 2, USA 1, Australia 3, Singapore 3, USA 2, Singapore 4, Australia 4, Ecommerce, USA 3, Meeting Room Booking, Visitor Management system