Website Design Build & Repair

Embedding Google Maps


In this post I’ll show you how to embed a google map, youtube video or other item using a command called “iframe”!

[googlemaps https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3133.0736530757!2d-76.97689188609289!3d38.254597792183525!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b73d7ca3fa9411%3A0xc238b80912477fdd!2s900%20McKinney%20Blvd%2C%20Colonial%20Beach%2C%20VA%2022443!5e0!3m2!1sen!2sus!4v1648655111251!5m2!1sen!2sus&w=600&h=450]

WordPress has a block feature that allows you to embed items, however if you’re on a managed hosting plan sometimes your plan doesn’t allow for all the block features. The host may require you to upgrade in order to utilize this easy feature.

However it is possible to get around using these block features by writing your own code. Fortunately most sites now provide the embedding code right on their site.

The <iframe> </iframe> command will allow you to embed an item right into your webpage.

When you go to google maps you will be prompted to type in an address. Remember to type in an actual address and not an intersection. Google doesn’t allow embed requests for random intersections!

Google maps will allow you to search for an intersection and will show you a map in the results. However for the purpose of embedding you need to put in an address. What I do is type in the intersection, then when the map comes up, I put my curser on the closest structure showing in the map and use that address. After putting in the address you think is closest and refreshing the map you can click on share.

I wanted to show a popular intersection in my town so I clicked on it then found the closest building to the intersection and clicked on it. This gave me the address I needed.

This will bring up a box with the option to either send a link or embed a map. I chose “embed a map”.

At this point you need to choose the size map you want.

I chose small.

Then just click on the COPY HTML button and it will be copied to the clip board.

Now go to your page and look in your block menu for custom html.

Paste in the embed html. You can see that the <iframe> tags are in there already for you and your frame size is already chosen.

This is what the finished embed will look like.

[googlemaps https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3133.0736530757!2d-76.97689188609289!3d38.254597792183525!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b73d7ca3fa9411%3A0xc238b80912477fdd!2s900%20McKinney%20Blvd%2C%20Colonial%20Beach%2C%20VA%2022443!5e0!3m2!1sen!2sus!4v1648678408003!5m2!1sen!2sus&w=400&h=300]

There you have it. With some creative coding a lot of elements that are out of your reach (due to your hosting plan) can be accomplished.

If you’re too busy to make these changes feel free to reach out to me for help. I offer help with small changes, to full site building, along with maintenance plans and cleaning services like removing malware. Feel free to send me an email with questions or needs.

Contact Linda

,

Leave a Reply

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