Google Map Maker Info Bubble Size

Posted on 2012-09-13
Last Modified: 2012-09-20
Here is the problem.

I am revamping my companies webpage, I do not have ANY experince coding, doing web design, or really anything outside of the Microsoft Office Suite and Google Apps.

I have a map that I made using Google Map Maker embeded into a webpage. This works fine, the issue is that when you click on the Google Map Maker Marker (which pin-points one of our office locations) the info bubble that opens fills the whole map.

I do not want to change the size of the map, I want the info bubble to open, but I want it to be smaller, or if this is not possible I want it to show a sigle line of text when the curser is moved over the marker so that the rest of the map is still visible and can be scrolled through.

Here is a link to the page.

Thanks in advance!
Question by:Confusedwebdesigner
    LVL 107

    Expert Comment

    by:Ray Paseur
    You may not be able to control the bubble size -- that comes from Google.  But here is an alternative suggestion.  You can use the Google "static maps" facility to make an appropriately sized map.  Let that small static map be a link to another page in your site that shows a larger, clickable Google map.  You will get the same bubble functionality on the larger map, and it won't be obtrusive in the larger context.
    LVL 38

    Accepted Solution

    Very similar to @Ray_Paseur's suggestion however instead of another page, you could load the larger map in a modal popup. Here's a site that does that.

    If you want to keep it the way you have it you can set the maxWidth of an infowindow but I think the height will always be whatever the content requires.

    Also, you can use something like:
    map.panTo(new google.maps.LatLng(40.623395,-74.764431));
    when the user clicks the marker. This will re-center the map to your new coordinates so the infowindow is visible. The site above uses this.

    Lastly, you can use a third party plugin like infobox to create a fully customizable small format boxe for information associated with the marker on your map.

    Featured Post

    Javascript: Crash Course

    Javascript is not only emerging as the most important language to know, it's flexibility is unique. With Javascript being deployed on the web, mobile and even the desktop this is the one language that all technologists need to know.

    Join & Write a Comment

    Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
    Read about why website design really matters in today's demanding market.
    The goal of the tutorial is to teach the user how to use the cropping tool and to straighten there photos so it does not look tilted. You will choose which photo you want to edit, crop it to you liking and make it straight.
    The goal of the tutorial is to teach the user the full work flow of how to use flash media encoder to stream onto YouTube.

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now