Web content display, template and structure in Liferay Embedding Google map

In this post I am embedding google map inside basic web content which we can display in our portlet page using Web Content Display portlet one of out of box portlet(oob).

Steps to follow
1) We have to create one structure and then one template.

a) Creating Structure
  Run server and sign in then we can see this

Click on Admin then on Content

You will navigate to this page

Now from here our work will start first I will create a structure.
So to create structure we will follow these steps
First go on Manage then click on Structure

Here you can see all created Structure if already created
Click on Add
Then one new page will open in which we can add our required field.
Here I will use only one text field.
Give the name of Structure(mandatory), description of Structure is optional.
You can select parent Structure if you want to use.
Here I am not using any parent Structure.

Now we can add our required field here.
Just drag and drop

We can drag our required field from left to right

If you select any element that you drag from left to right then in left side you can change element properties.
In left panel you can change its name and field label, repeatable true or false etc.
If repeatable is true then in creation of basic web content part we can add this element number of times.

Here whatever name of the element we can give here we can get the value of that element in our template by using that name only.
Here I am not going to change name of this element.
But it is always recommended that give some meaning full name.
Here name is: Text1515
By this we can get value in our Template.
I given name as "My Structure" and then save it.
So our structure is created.

Some time because of error, creation of Structure and template may fail so you have to check your IDE console.
If created successfully then no error and you can see your Structure here. Last row "My Structure".

b) Steps to create template.

Again web content part from web content
Manage and then select Template

Then add

Here I give template name as "My Template", description is optional.
Here We selected our Structure that we just created.
Also selected Velocity language.

There are three option
FreeMarker(by default selected)
Extensible Style Sheet
Velocity.

We are working with Velocity(.vm)
Go through Velocity Template language(vtm or vm) concept means tutorial

So we want to get data from text box that we created inside our Structure.
Here I will add one div inside which I will embed my google map code using jquery.
For google map I search some address and then get its embedded value by going to menu and then select share of embed map. You will get iframe code for that specific location

When you click share or embed map then one popup will open with two tab
i) Share link
ii) Embed map
Please copy code from embed tab where you get complete code with iframe tag.
I pasted that copied content from embed map option.

To get google map you have to add this code inside your template like this

Below is the code present in above image

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script>
    $(window).load(function() {
        document.getElementById("myGoogleMap").innerHTML = '<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3983.9510487626503!2d101.59288311424224!3d3.107652154274243!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31cc4c18cfff72c1%3A0x786ab007dc694d0f!2sKelana+Puteri+Condominium%2C+Ss+7%2C+47301+Petaling+Jaya%2C+Selangor%2C+Malaysia!5e0!3m2!1sen!2s!4v1472834995630" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>';
    });
</script>

 p.thick {
        font-weight: bold;
    }

<div id="myGoogleMap">
</div>

<p class="thick">
    $Text1515.getData()
</p>


here "Text1515" is name of element that I gave in structure.
$Text1515.getData() to getting that element value.
So our template also created and ready to use.
We created one template and one structure and then now we will create one basic web content in which we can use this.

Again go to web content part of Content section and then
add -> Basic Web Content.

Default Basic Web Content page

Now we will select our created Structure and Template
Then image will change like this

Please select Structure value changes to My Structure and Template also changes to My Template.
I gave name and filled text box manually.
Now we will publish this.

So you can see one entry will be added in web content page.

Go to portal home page and then add from application section
Web Content Display.

Click this Select Web Content link then

Just click our created Basic Web Content, it will selected automatically.
and then save
close this popup page and then refersh and you can see the map in web content.
Final image after web content display added to our home page