Web Tutorial: The Contact Us Page (Part 4/4)

For this, you could take the easy way out and simply insert an image, but that's no fun and oh, so retro. However, the considerably more modern method requires us to use Google Maps. And for greater effect, you'll need a Google Account. No sweat if you don't, you just won't be able to use certain features!

Let's say, for example, I want the map to showcase a location on Cecil Street, which was the address I specified in the Card.

Go to Google Maps, and search for the place.

Click on it, and you'll see a descriptive bar on the left side of your screen.

Click on Share or Embed Map. This should bring up a popup on-screen.

Click on Embed a Map. Here, there's a HTML snippet you can copy. This snippet will change according to the size you select, but don't bother with that right now. Just copy the HTML snippet.

The code should be pasted into the div that is being styled by mapContainer.

<div class="mapContainer">
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1994.410947080802!2d103.8475582!3d1.2805386!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31da190d9688e047%3A0x51dfe23cf3f6846d!2sCecil%20Court!5e0!3m2!1sen!2ssg!4v1568307144640!5m2!1sen!2ssg" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
</div>

Remove the width and height specification totally.

<div class="mapContainer">
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1994.410947080802!2d103.8475582!3d1.2805386!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31da190d9688e047%3A0x51dfe23cf3f6846d!2sCecil%20Court!5e0!3m2!1sen!2ssg!4v1568307144640!5m2!1sen!2ssg" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
</div>

And then style iframes within mapContainer, setting width and height to 100%. This ensures that if you ever need to adjust the size of your content, you won't need to do it again for the map!

.mapContainer
{
    width: 100%;
    height: 300px;
    float: left;
    margin-top: 1em;
}

.mapContainer iframe
{
    width: 100%;
    height: 100%;
}

And there you have a Map!

But this just isn't cool enough...

What if you could customize the map? Yeah well, you'll need a Google Account for that, so if you don't have one and can't be arsed to create one, we can stop here. If not, read on!

Click on Your Places. You'll be asked to sign in if you haven't already.

Then click on the Maps tab.

View all your maps...

Here, you'll see your saved Maps. There should be none. Create one.

Here, click on the box on the left.

It's time to name your Map by entering a title and description. Click Save.

Navigate to the area where your desired location is, and click on this icon to add a marker.

Add a title and description for the marker. Click Save.

Here's your marker! You can click on this icon to add a picture.

You can add any picture you want. I simply added a logo in this case.

Click on this link to share the map. This is important; if you skip this step, you won't be able to embed the map.

Click on the "change" link.

Set it to "public", then Save.

Access the menu and select "embed on my site".

Copy the provided HTML.

Paste into the div.

<div class="mapContainer">
    <iframe src="https://www.google.com/maps/d/embed?mid=1tY75QTSZ5HF9XzEWNN6-UbeAVgDLlMmY" width="640" height="480"></iframe>
</div>

Again, you should remove the width and height specification.

<div class="mapContainer">
    <iframe src="https://www.google.com/maps/d/embed?mid=1tY75QTSZ5HF9XzEWNN6-UbeAVgDLlMmY"></iframe>
</div>

And now you have a map! A customized map, even! Try clicking on it, and you will see the details we entered earlier, pop up.

There's more, of course...

...but I'm not going to go in depth regarding Google's full suite of map features. You should feel free to explore on your own after the head start I've given you. There's a lot of cool stuff in there.

For your information,
T___T