Join James Fritz for an in-depth discussion in this video Embedding HTML and maps, part of Up and Running with Muse.
When looking for directions to a location, you've probably have used a online mapping services like Google, Bing, or even Map Quest. One of my favorite features of Muse is the ability to use embedded HTML to add these types of maps to your site. By embedding a map, it makes it much easier for your visitors of your site to find your location. Let's go to the contact page. And on this page, I want to have an embedded map so the customers of our website know how to find us. To do this, we'll visit our widget library, and I'm going to go into social.
In here, there's an option for Google maps. So I'm just going to go in here and just drag this out. And when I drag it out, it's going to automatically put in Adobe Systems as the default address. Well, that kind of makes sense since they make Muse. But since we don't want to visit Adobe Systems, we want to visit our address. And what we're going to do is select the Adobe address, and I'm going to paste in our address which is 123 West Main Street, Ventura, California. After doing this, I'll just click off to the site and we'll give it a moment to update and here it's updated and we can see the address.
If we want this to be a little closer, I'll just go in here, go to our options and we can increase or decrease our zoom level. There we go. I think that looks pretty good. But if you want to preview this out, its not going to work well while we are in this mode. What we need to do is go into preview. While we're in preview mode, I can interact with this just like I could on a regular website. I can drag it around, zoom in, zoom out and click on anything that I like. It works really well. Back in design mode, if I want to change the size of this I just have to grab it, click and drag, make it little bigger, let go and now it's the size that I want.
It works really well. What happens if you don't want a Google map, but you want a different map? Well, in that case all you have to do is use something called embedded HTML. What I'm going to do is go over Into our web browser and I'm already at bing.com/maps and I put in our address. Now in this case, I have it setup the way that I like it at the right zoom level, but I want to embed this inside Muse. So what I need to do is go up to Share and choose embed in a webpage. And if I just grab this default text right here, I'm going to copy that to the clipboard and back inside Muse.
I'm just going to select this because I don't need it and hit delete and just paste this in. As soon as I paste it in, it comes in automatically, just like the Google Map did. If I go to preview, you can see I can interact with it just like I could in the Google Map. Now if I want to make changes to this, it gets a little tricky but it's not too bad. Back in design mode, if I select this, I can right-click and choose edit HTML. Now don't let that scare you. I'm going to see this dialog box that pops up, but all I have to do is see where it says width, and height, I can make this a little taller, or a little more narrow.
So if I change this to be 500 for the height, and I click okay, you'll see it's going to automatically update, and be a little taller. If I wanted to do this manually, it won't be as effective. You're going to have to do it with the code. Another option is to use the website itself that generated this embedded HTML. Back inside Safari, I can choose customize and preview. And here, I can choose a custom size. So in this case, I could have chosen 500 by 500, or I could do 400 by 400. Then I hit generate code.
I copy that to the clipboard, I go back to Muse, just delete this one, and paste in the fresh one. And now I have the map the way that I like it. It's possible to embed a variety of things with HTML. Slide shows, social media widgets, and even custom code. Even if you're not an advanced user, taking advantage of embedded HTML is a great way to help extend the capabilities of Muse.
- Creating a new site
- Setting up master pages
- Working with text and graphics
- Adding hyperlinks and web forms
- Embedding HTML and maps
- Exporting and publishing a Muse website