1
00:00:01,480 --> 00:00:06,290
In this video you'll add an interactive map to the website for a client that has a location.

2
00:00:06,580 --> 00:00:12,790
We'll use a Google Maps again to easily embed a map on the Contact page and in the footer content area

3
00:00:12,790 --> 00:00:18,790
of your brochure site businesses with a location need to let Web site visitors know exactly how to find

4
00:00:18,790 --> 00:00:22,300
them and you'll be able to set them up professionally with these techniques.

5
00:00:22,300 --> 00:00:23,250
Let's get started.

6
00:00:25,740 --> 00:00:32,340
To embed a map on the Contact page what we'll do is put some contact information with the address that

7
00:00:32,340 --> 00:00:37,260
we want the visitors to know and then we'll drop it in here below the title.

8
00:00:37,290 --> 00:00:45,230
And above the contact form so that it sits in here a nice interactive map of the location.

9
00:00:45,280 --> 00:00:51,790
So if we go to the dashboard and if the Google Maps plug in it's not already activated go ahead and

10
00:00:51,820 --> 00:01:01,220
activate it and then roll over maps and let's look at maps this Google Maps plug in allows you to have

11
00:01:01,220 --> 00:01:04,900
one map unless you upgrade to the Pro version.

12
00:01:05,090 --> 00:01:06,750
But we only need one map on this.

13
00:01:06,750 --> 00:01:12,040
And so you can configure this map for your purposes.

14
00:01:12,170 --> 00:01:19,060
So let's go ahead and open up the one called My first map and take a look at the settings

15
00:01:21,700 --> 00:01:26,140
and the default settings are fine to leave for now.

16
00:01:26,320 --> 00:01:33,940
But it looks like we've got an indicator on this map that is California United States.

17
00:01:33,940 --> 00:01:42,720
So I'll just get rid of that marker and I'm going to add another marker just right down here.

18
00:01:42,720 --> 00:01:47,040
Put in a location with an address

19
00:01:49,610 --> 00:01:57,500
click add marker and then I can go down here and I can use the mouse to zoom in and pan around until

20
00:01:57,860 --> 00:02:04,900
I centered myself on the marker right where I want to be.

21
00:02:14,870 --> 00:02:23,900
I want people to be able to find the location easily but also know where they are and be familiar with

22
00:02:23,900 --> 00:02:25,980
it when they see it on the Contact page.

23
00:02:26,940 --> 00:02:27,590
Great.

24
00:02:29,080 --> 00:02:37,180
So as I've dragged the map around it's showing me the width at 100 percent for a responsive map and

25
00:02:37,180 --> 00:02:41,050
that's what I want it to be sized for the persons screen.

26
00:02:41,200 --> 00:02:42,090
Let's save the map

27
00:02:48,280 --> 00:02:54,090
great you could see that it moved the zoom level to there that's where I had zoomed in.

28
00:02:54,260 --> 00:03:01,760
Now that I have that map I have my marker at 35 front street and it gives me a short code just like

29
00:03:01,760 --> 00:03:04,000
the contact for.

30
00:03:04,060 --> 00:03:12,930
So if I copy the short code should be able to just open up the contact page and drop the map right in

31
00:03:12,930 --> 00:03:13,740
when I want it to be

32
00:03:22,670 --> 00:03:31,990
oh I'm excited let's open up the Web site contact page and once this is done loading I'll go ahead and

33
00:03:31,990 --> 00:03:32,880
refresh it.

34
00:03:37,430 --> 00:03:39,490
Nice.

35
00:03:39,510 --> 00:03:43,130
So if I click on the marker it shows me the address.

36
00:03:43,140 --> 00:03:51,210
It's an interactive map so I can zoom in and out I can locate the location.

37
00:03:51,220 --> 00:03:53,320
I can also use the mouse zoom in and out.

38
00:03:53,520 --> 00:04:00,540
And these are functions that you can either keep or limit using the plug in settings it's a little bit

39
00:04:00,540 --> 00:04:07,500
close to the contact form they're going to put a little information below the map and above the contact

40
00:04:07,500 --> 00:04:09,660
form to set it apart just a little bit.

41
00:04:10,260 --> 00:04:13,780
And let's check the responsiveness to the screen size.

42
00:04:14,010 --> 00:04:20,940
If I drag this screen from the array a little bit and make it narrower I can watch the say and how it

43
00:04:20,940 --> 00:04:28,290
reacts to different screen sizes create that map is interactive and responsive

44
00:04:31,040 --> 00:04:31,740
awesome.

45
00:04:31,790 --> 00:04:35,270
Go ahead and make that map for any address you like on your own.

46
00:04:35,270 --> 00:04:45,020
Contact me page and then separate the contact form from the map with a business name and address and

47
00:04:45,110 --> 00:04:47,140
lay it out so that it looks good.

48
00:04:47,250 --> 00:04:52,860
Puzzel video now and then I'll show you how I would do that.

49
00:04:52,870 --> 00:04:53,920
How do you do.

50
00:04:54,410 --> 00:05:00,170
Well if I were going to do that I would go back to the contact page and after the map but before the

51
00:05:00,170 --> 00:05:04,250
contact form I would just enter a address

52
00:05:11,610 --> 00:05:21,730
and then if you had shift enter it'll do a single line space instead of double line space.

53
00:05:21,930 --> 00:05:28,250
When actually put another space in there and then how about a horizontal line there.

54
00:05:31,700 --> 00:05:40,240
Now I'm going to go ahead and center that and make it larger.

55
00:05:40,340 --> 00:05:41,500
Nice.

56
00:05:42,350 --> 00:05:46,220
And I probably should announce this contact for

57
00:05:59,790 --> 00:06:00,270
an update.

58
00:06:00,270 --> 00:06:01,220
Let's take a look.

59
00:06:04,960 --> 00:06:05,610
Nice

60
00:06:10,440 --> 00:06:10,970
okay.

61
00:06:10,980 --> 00:06:21,670
Now if we look at every page of the website there's a header there's a sidebar and there's two areas

62
00:06:21,940 --> 00:06:28,720
left and right that are located above the footer that you can use that are widget areas in the 2016

63
00:06:28,720 --> 00:06:29,640
theme.

64
00:06:29,680 --> 00:06:38,170
What I'd like to do now is put a Google map into one of the widget areas and the name address and phone

65
00:06:38,170 --> 00:06:42,990
number into the second widget area for the lower footer area.

66
00:06:43,200 --> 00:06:47,050
Zagat on How'd that go.

67
00:06:47,620 --> 00:06:49,170
Here's how I would do it.

68
00:06:49,180 --> 00:06:54,640
I'm going to go back to the contact page and just grab the address and phone number because I'll be

69
00:06:54,640 --> 00:06:57,080
using it there in the widget.

70
00:06:57,250 --> 00:07:04,240
And then when they do this using the custom Mizer so that I can see what it's looking like as I go now

71
00:07:04,240 --> 00:07:10,710
that the customizes opening I can go to the widget area content bottom one and two.

72
00:07:10,860 --> 00:07:20,340
Let's go ahead and put a text widget into the content bottom one widget area.

73
00:07:20,430 --> 00:07:23,250
Title it.

74
00:07:24,060 --> 00:07:25,070
Find me.

75
00:07:27,180 --> 00:07:37,240
Now inside of widgets you can only put text you can style it with HDMI now but the HTL mail that came

76
00:07:37,240 --> 00:07:45,040
from the page on the Contact page up here didn't transfer over when I copied and pasted from the interior

77
00:07:45,040 --> 00:07:45,670
page.

78
00:07:45,760 --> 00:07:56,020
So it wasn't large if you remember this was heading to and it's centered so I could use some HVM l tags

79
00:07:56,020 --> 00:07:56,980
like center

80
00:08:00,280 --> 00:08:05,110
and close it with some tags and a slash in front of the command.

81
00:08:05,530 --> 00:08:10,880
And if I have an entry here I can click automatically add paragraphs so it'll put a line break in.

82
00:08:11,050 --> 00:08:20,230
Where I where I have line breaks and let's see what it looks like if I put a heading to for the phone

83
00:08:20,230 --> 00:08:24,970
number but not for the address

84
00:08:30,010 --> 00:08:31,020
OK.

85
00:08:31,030 --> 00:08:32,780
Now this is going to be on the left side.

86
00:08:32,920 --> 00:08:36,590
If I use content bottom two because it's left and right.

87
00:08:38,260 --> 00:08:42,140
You know I think I'll use heading to for the address as well.

88
00:08:44,700 --> 00:08:47,060
So I'll just check this heading to tag.

89
00:08:47,460 --> 00:08:50,510
Cut it and pasted right there

90
00:08:54,600 --> 00:08:57,150
nice and hopefully that won't be too wide.

91
00:08:57,940 --> 00:09:06,030
You know what I could actually put a carriage return in there after Front Street.

92
00:09:06,140 --> 00:09:09,350
And I won't need the comma.

93
00:09:09,430 --> 00:09:09,880
There we go.

94
00:09:09,880 --> 00:09:12,360
That's going to be a nice block of text.

95
00:09:12,700 --> 00:09:19,650
So if I have that on current can contact but I'm too for current applicants at bottom one rather in

96
00:09:19,680 --> 00:09:22,990
content bottom two loops.

97
00:09:23,230 --> 00:09:35,370
I mean at one of my maps so the Google Maps plug in provides some widgets and it was the ID one that

98
00:09:35,370 --> 00:09:36,810
was my only map I had

99
00:09:40,910 --> 00:09:42,590
I can have a title so that it matches

100
00:09:45,440 --> 00:09:50,350
nice and you could see it's responsive to the area of the widget.

101
00:09:50,510 --> 00:09:54,000
And then there's the address.

102
00:09:54,050 --> 00:10:02,390
So let's take a look at it say on the home page because those content areas at the footer of the Web

103
00:10:02,390 --> 00:10:10,100
site show just like the header and the sidebar on every page of the Web site great.

104
00:10:10,110 --> 00:10:14,860
So if somebody scroll to the bottom of any page of the website they'll be able to get the contact info

105
00:10:15,220 --> 00:10:18,870
and an interactive map if they like.

106
00:10:19,330 --> 00:10:21,710
So that's what the home page looks like.

107
00:10:22,030 --> 00:10:24,550
And so if we go to the About page

108
00:10:28,460 --> 00:10:32,120
great there is that footer area nicely done.

109
00:10:32,370 --> 00:10:38,160
Now something you may have noticed is that on the Contact page where we have our map embedded if you

110
00:10:38,160 --> 00:10:45,490
scroll down to the footer the map is not shown in two places on the same page.

111
00:10:45,540 --> 00:10:52,170
Also in terms of the plug in that we're using right here you're only allowed one map unless you upgrade

112
00:10:52,170 --> 00:10:53,910
to the Pro version.

113
00:10:53,940 --> 00:10:59,820
So I've done a little research and I've moved over to this W.P. Google map plug in here by flipper code

114
00:11:00,270 --> 00:11:05,970
installed it and found it to be a little bit more user friendly and it has the ability to create more

115
00:11:05,970 --> 00:11:10,970
than one map and embed more than one location marker on each map.

116
00:11:12,400 --> 00:11:17,410
I've already installed and activated the plug in and I'll show you some of the differences and how I

117
00:11:17,410 --> 00:11:22,090
was able to make it set up a little bit better for our purposes I think.

118
00:11:22,090 --> 00:11:28,310
So you had a location separately from a map and then you can manage locations and manage maps.

119
00:11:28,510 --> 00:11:33,470
The first thing I did was added a location with our address.

120
00:11:33,670 --> 00:11:35,270
I called it fire weed photography.

121
00:11:35,280 --> 00:11:38,920
But if I go in and edit it you can see how this plugin works.

122
00:11:40,760 --> 00:11:47,060
And it also has a nice feature where you can display the info window message above the marker with whatever

123
00:11:47,060 --> 00:11:52,160
you like there and you can have it by default open when the map opens.

124
00:11:52,430 --> 00:11:53,760
So that's what I placed here.

125
00:11:53,870 --> 00:11:59,220
I checked the info window the fall open box and then I saved my location.

126
00:11:59,570 --> 00:12:00,800
Then I added a map.

127
00:12:00,800 --> 00:12:02,450
So let's go ahead and manage maps

128
00:12:05,420 --> 00:12:06,460
across the map.

129
00:12:06,500 --> 00:12:09,150
The same thing.

130
00:12:09,460 --> 00:12:11,090
And here are some of my settings.

131
00:12:11,110 --> 00:12:17,140
I did have to experiment a little bit and choose a zoom level between 1 and 19 by saving the map and

132
00:12:17,140 --> 00:12:22,870
embedding it on the Contact page and then going back and looking at my zoom level 15 is what I settled

133
00:12:22,870 --> 00:12:27,610
on and I made the map the same amount of pixels high as we had before.

134
00:12:27,610 --> 00:12:32,650
And it says right here you leave it blank for the map with to leave it 100 percent which would make

135
00:12:32,650 --> 00:12:35,680
it responsive to any screen size.

136
00:12:35,680 --> 00:12:40,970
So then there's a lot of other options turning on and off options and controls for the user.

137
00:12:41,020 --> 00:12:49,780
But then I just save the map and once you save the map and you go to your managed maps page you can

138
00:12:49,780 --> 00:12:55,940
see the short code right here that needs to be embedded on the page or the widget.

139
00:12:55,940 --> 00:13:05,520
So I'm getting Control-C to copy that and then I'll go to the contact me page open it up and replace

140
00:13:05,520 --> 00:13:08,520
the old short code with the new.

141
00:13:08,520 --> 00:13:11,640
Now here's what the contact page looks like.

142
00:13:12,410 --> 00:13:18,790
You can see that I don't have a marker but if I click on it there's where I get my marker information

143
00:13:19,240 --> 00:13:26,350
and the map is zoom mobile as well as draggle.

144
00:13:26,420 --> 00:13:27,820
So let's replace the shortcut

145
00:13:31,410 --> 00:13:32,590
with the new one.

146
00:13:32,940 --> 00:13:36,240
Update the page and take a look as we refresh the contact me page

147
00:13:40,030 --> 00:13:46,120
nice that looks a lot better to me it already has the info graphic up there.

148
00:13:46,120 --> 00:13:51,510
It also provides a little bit more space between the map and the information down below.

149
00:13:52,860 --> 00:13:56,910
And now the old map is now able to be embedded down here.

150
00:13:56,910 --> 00:14:03,030
But I thought of another change we might make and the ability to have a second map within our system

151
00:14:03,360 --> 00:14:04,260
will be useful here.

152
00:14:04,260 --> 00:14:10,380
I'd like this map to be maybe 200 pixels tall instead of 400 so that the sizing and the footer here

153
00:14:10,590 --> 00:14:11,360
looks good.

154
00:14:13,240 --> 00:14:26,190
So let's go back and create a new map under WP Google map.

155
00:14:26,390 --> 00:14:27,560
This one I'm going to call

156
00:14:30,830 --> 00:14:36,570
fire weed footer so I can differentiate it 100 percent with this time.

157
00:14:36,780 --> 00:14:39,430
I'm going to make it 200 pixels in height.

158
00:14:39,740 --> 00:14:41,580
Let's go to the same zoom level

159
00:14:45,710 --> 00:14:50,120
and I'm actually going to use the same location on this map.

160
00:14:54,550 --> 00:15:02,250
And now all I have to do is go to manage my maps and find the short code for this one which I called

161
00:15:02,250 --> 00:15:04,460
fire weed footer right over here.

162
00:15:06,540 --> 00:15:17,050
Copy that and then paste it into the widget area this time other appearance widgets will look at content

163
00:15:17,050 --> 00:15:20,240
bottom to.

164
00:15:20,300 --> 00:15:28,310
Now if you remember I dragged in the WP Google map right here and I'm going to go ahead and just drag

165
00:15:28,310 --> 00:15:34,600
it back over here and deactivate that widget and the new plugin offers us a widget as well.

166
00:15:38,590 --> 00:15:41,530
And I mean to select the fire we'd foot or map

167
00:15:44,940 --> 00:15:47,480
title that map and click save in the widget.

168
00:15:48,270 --> 00:15:49,800
Let's go back and refresh the page

169
00:15:53,300 --> 00:15:54,350
nice.

170
00:15:54,410 --> 00:16:03,830
That looks much better and we can display both maps on the same page and review if I click about the

171
00:16:03,830 --> 00:16:08,500
map on the footer appears on every page of the Web site.

172
00:16:08,540 --> 00:16:10,830
And now I think it's laid out just a little bit better.

173
00:16:12,270 --> 00:16:17,430
The last thing I'm going to do is go ahead and keep my word press installation clean by going back into

174
00:16:17,430 --> 00:16:18,120
plug ins.

175
00:16:18,120 --> 00:16:23,000
Install plug ins deactivating and then deleting that plug in.

176
00:16:23,700 --> 00:16:27,520
Let's see it's W.P. Google Maps.

177
00:16:27,730 --> 00:16:30,350
Not by flipper code but by W.P. Google Maps.

178
00:16:30,350 --> 00:16:34,010
First you need to deactivate a plug in before you're able to delete it.

179
00:16:38,480 --> 00:16:44,500
Once you delete inside the Wordpress dashboard it'll give you a confirmation message.

180
00:16:44,520 --> 00:16:46,040
Yes delete these files.

181
00:16:52,040 --> 00:16:52,340
Great.

182
00:16:52,340 --> 00:16:54,090
Now my installation is all cleaned up.

183
00:16:54,840 --> 00:16:59,940
And we've inserted some nice maps into our website.

184
00:17:00,150 --> 00:17:06,900
In this video you've configured a Google map to display an interactive location map to visitors of the

185
00:17:06,900 --> 00:17:14,220
site you embedded the map into the contact page as well as setting up two footer areas for location

186
00:17:14,220 --> 00:17:15,080
information.

187
00:17:16,080 --> 00:17:21,420
In the next video we'll set up the Google Analytics plug in to begin tracking activity on the Web site

188
00:17:21,690 --> 00:17:24,070
and also to display the stats on the dashboard.