Contact

[Nobuaki Kinjo]

In Bottega Widget Contact, what should I enter for the field “Map”? No instruction whatsoever.

[Bill Robbins]

Great question. Go to maps.google.com and create a map to the address you’d like to use. Once you have your address set, click the link button (see picture below) above the map and select “Customize and preview embedded map.” Once there you can set the zoom level and size of your map. For best results, set the map to be 300 pixels wide by 280 pixels tall. Once you have that set, copy the embed code that Google gives you and paste it into the box in the widget.

I’d also suggest deleting the last section of the embed code which will look something like this:

<br /><small>View <a href=”http://maps.google.com/maps/ms?
msa=0&msid=202165479458116884242.00048f124a14eb66bd644&ie=UTF8
&vpsrc=0&z=17&source=embed” style=”color:#0000FF;text-align:left”>Bottega Cafe</a> in a larger map</small>

That adds a small “View Larger Map” below the map which can look a bit funny.

[Jos Deroo]

I tried this on both my themes (www.booksandbrunch.be and http://www.atlasguesthouse.be under Praktisch/Routeplanner) but I have the same problem twice : the map does not center on the marker. My marker is hidden in the topleftcorner…

I know it has nothing to do with your theme but maybe you have a solution for this ?

Thx.

[Bill Robbins]

Jos,

Great question. Here’s what has given me the best results with Google maps. I go to maps.google.com and login with my Google account. From there I create a new place and enter in the pertinent information and save it. Then I click the link icon (they move this from time to time), but it looks like a piece of chain. The screenshot below shows the configuration screen.

On this screen I set the size of my map to custom. For the Bottega Theme, the size is 300 by 280 pixels. That size will cause the pop-up bubble to be outside the bounds of the frame. I move the map down so I can reach the close “X” on the bubble and I click it. Now I’m just left with a pointer. The last thing I do is set the zoom to the level I’d like it to have and then copy the embed code.

One note on the embed code, I generally leave everything after the <iframe> out as all that does is create a blue link to the Google map.

I hope that helps and if you have any questions, please let me know.

[Felisha Booker]

can you tell me how to remove the “Directions” “Search By” “Map”, “Sat” etc in the upper right hand corner of the map code so it looks cleaner? Or perhaps I did something wrong with the code? supreme16.com is my site.

[Bill Robbins]

Felisha,

What I do, is I login into my Google account while at maps.google.com. By being logged in, you can create places and then customize the maps with more control than Google gives you when you’re not logged in. I usually turn off the bubble since it doesn’t fit in small maps very nicely. You can also choose your own marker pin and other options.

Obtaining the embed code is basically the same. Once you’ve created your place, you choose the link icon and select embed and then customize to set the size of your map as you normally would.

If you have any trouble, let me know.

Take care,
Bill Robbins

[Author]

Posts