Google-Maps-for-Craft

Google-Maps-for-Craft copied to clipboard

I'm finding that many of the default controls (zoom controls, etc.) are being squished horizontally (maybe 50%) on all rendered maps. I am also seeing that InfoWindows seem to have a set height and width displayed which creates unnecessary scroll bars. Here is the rendered infoWindow html:

<div style="top: 9px; position: absolute; left: 15px; width: 166px; height: 72px;" class="gm-style-iw">
    <div style="overflow: auto; width: 143px; height: 72px;">
        <div style="overflow: auto;" class=""><strong>Title</strong><br>Address, etc.</div>
    </div>
</div>

I have looked through all the code to see where this is set but can't find the source, and there is nothing in my page css that would affect the map (other than the generic eric reset.css).

As a side-note, it would also be nice if the plugin allowed you to create your own custom infoWindows (i.e. background and all). Perhaps this functionality is there, but I haven't discovered it.

Well first thing, the map controls are likely due to responsive images. It's almost always CSS that causes this. Add .googlemap img { max-width: none} to your CSS. Obviously .googlemap is something you will need to add to your map DOM node so that the CSS selector targets the correct node. This should fix that issue.

Custom infowindows are possible, but not using the default Google Maps windows, as those are harder to style and don't allow many customization options. I will need to look into how I can make the Infobox.js library work for Google Maps for Craft.

.map img { max-width: none} fixed the controls issue. Thank you! The default InfoWindow is still showing up with scroll-bars however. Any ideas there?

Can you post the code that you are using to add markers to the map?

Strangly enough, if you click on one of the default google landmarks to display infowindow (it show fine; no scrollbars), then click the custom marker (displays with scrollbars), then click the landmark again it displays with scrollbars.

{% set options = {
                id: 'map', 
                width: '100%', 
                height: '400px',
                options: {
                    disableDoubleClickZoom: true,
                    disableDefaultUI: false,
                    maxZoom: 18,
                    minZoom: 10,
                    styles:[{"featureType":"landscape","stylers":[{"hue":"#F1FF00"},{"saturation":-27.4},{"lightness":9.4},{"gamma":1}]},{"featureType":"road.highway","stylers":[{"hue":"#0099FF"},{"saturation":-20},{"lightness":36.4},{"gamma":1}]},{"featureType":"road.arterial","stylers":[{"hue":"#00FF4F"},{"saturation":0},{"lightness":0},{"gamma":1}]},{"featureType":"road.local","stylers":[{"hue":"#FFB300"},{"saturation":-38},{"lightness":11.2},{"gamma":1}]},{"featureType":"water","stylers":[{"hue":"#00B6FF"},{"saturation":4.2},{"lightness":-63.4},{"gamma":1}]},{"featureType":"poi","stylers":[{"hue":"#9FFF00"},{"saturation":0},{"lightness":0},{"gamma":1}]}]
                }
            } %}
            {% set map = craft.googleMaps.map(options) %}
            {{ craft.googleMaps.data('map', entry.officeMap) }}

            <div class="map">
                {{ map }}
            </div>

And here is the 'content' from the marker in the CP (nothing unusual):

<strong>Name of location</strong><br>
San Francisco Office<br>
Street Address<br>
San Francisco, CA 94110<br>

Ok thanks. I have see a lot of quirks with Google Maps and their infowindows lately. From everything I can tell, this is going all the way back to the scripts in the Google Maps API's, as there aren't anything special hacks I am doing or anything that is officially supported by the docs. I am going to have to take some time to get this scenario setup and tested so I can hopefully trigger the same error and implement a fix for it.

Thanks for checkout Google Maps for Craft. I will post back here once I have a fix. Not sure if I will have time to do it today though.

No worries; no rush. Controls was the bigger issue of the two. Thanks for your time and for looking into this. Much appreciated.

Noticing the same problem on angular Google maps as well.

This might be fixed with the latest master branch. Another user submitted a potential fix for this. Seems to be working in my tests now. If you guys get a chance sometime, download the master branch and see if you are still having this issue with the infowindows.