In This Article, you’ll learn how to Customize the location Google Map Section in Sora CV Template. A Two way to Insert a Google Maps into your Website Body. One is Through Google API Using the Consol Cloud Tool of Google. But Consol Cloud Platform is a Paid Tool You must Insert first Your Credit Card Credential to Activate your Account. But the Good News is Google give one time free $300 credit for every new User. If you are a Web Developer and have an active google Cloud Consol Platform, you can add your Google Maps location via API. The Second Step is to Embed the HTML Code only. This is a Simple and Free Method. For Add the API into the Sora CV Template please follow the Steps.
Customize Location Google Map Section in Sora CV Template Method 1
Step 1 – Find Google Map API on Google Cloud Consol Platform
- Go to your Google Cloud Consol platform
- Open the Menu by clicking the left side option and then Move your Mouse towards APIs & Services Option after this a Mouseover Option Apear you should go on Dashboard Option. Follow the Instruction by seeing images.
- Now you are move to the APIs & Services Page. Here you find the Option is Credentials Option. Just Click on it.
- Here You Find all Your Previouse Genrated API If you Genrate Before. See the Image
Now You Find Your Desire APIs here. Copy the Google Map API. Wich is you Generated before.
Do you know?
how to Generate Google Map API
Step 2 – Find The Desired Location on Google Map and Get the Location latitude and longitude
- To Collection the Google Map API you also need Some more Details like Google Map Location latitude and longitude.
- Now Goto Google Map and search Your Required Location. i.g (See the Image)
- Now Select Your Exact Location where you want to pin it out. After Select, the Location Find latitude and longitude in Browser Page URL. i.g (See the Image)
- Now You are able to embed Google Map on your Google Blogger Website Using Google Map APIs.
Step 3 – Customize the Google Map Location Section in Sora CV Template Via Google Map API
- Go to Blogger Dashboard and Then Go to Theme Option and Open the Backend of your Blogger Website.
- Now You will Jump on the Google Blogger Theme Backend. Here You Find HTML and CSS Language Tage. Click on the Page anywhere Press Ctrl+F and Find the Following Keyword (Get in touch) Section for Find the Google Map Location Section.
- Now Please Replace all Your Google Map APIs Credentials on the Following Places which is Highlight on Image Give below. After Replace all Credentials please Save or Update the Page. Now Go on Frontend and Refresh the Page. You will found Your Google Mape Location has been Configure Successfully.
- Now go front end of your website and refresh the Page. You will see all changes successfully done.
Customize Location Google Map Section in Sora CV Template Method 2
Step 1 – Open Browser and Search Google Maps
- In first step you should go on your PC or Laptop Browser and Search the Keyword (Google Map) in to Google Search Bar
- You’ll find the following window!
- Now Select the First Link. You will Jump on the Following Window!
- Now Search your Desired Location (Contury, CIty or any Location which is You Want).
- After Find the Location Select it and go on the Share Button and Select it. A Popup will apeares.
- Now You Can See Two tabs on Popup Window. Go on Embed a map Tab and Click.
- After the Click, you find the HTML Code of Embedded Map. You can fix the Length and Height of Map here. After Fix all Thing Click on Copy HTML Button.
- Now go to Your Website Backend and Place this Embedded Code.
Step 2 – Place the Embedded HTML Code of Google Maps into Your Website Google Map Section
- Go to Blogger Dashboard and Then Go to Theme Option and Open the Backend of your Blogger Website.
- Now You will Jump on the Google Blogger Theme Backend. Here You Find HTML and CSS Language Tage. Click on the Page anywhere Press Ctrl+F and Find the Following Keyword (Get in touch) Section for Find the Google Map Location Section.
- Replace the below Red code under the lines <div style=’clear; both’/>
- For Place the Google Map Exact Location into Your Website Free Please Replace the Following Red Code in Selected Area. The Code is Given Below.
<iframe allowfullscreen='' frameborder='0' height='378' src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d52696.81750947441!2d73.44576457862246!3d34.36190126736181!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x38de207ace636f0b%3A0xf6f838eb0bb2d5eb!2sMuzaffarabad!5e0!3m2!1sen!2s!4v1575895281759!5m2!1sen!2s' style='border:0;' width='100%'/>- After Replace the Code now goto on Google Map and Just Copy the HTML Code Place it on the Red Selected Area. See the Image.
- Your Google Map Will be Embedded Successfully.
Congratulation Your Google Mape Location will be Embed Successfully!!!
Add comment