Milan Milan - 2 months ago 11
CSS Question

How can i set a Google Maps Marker to the Center while resizing the browser?

I wish you can help me to fix google map marker to the center while resizing the browser. I need responsive map, so...

Thanks for your time, i hope you can help me.

Here is the code:

-HTML:

<!-- Map container -->
<div id="map_container">

<!-- Map -->
<iframe id="map" src="https://mapsengine.google.com/map/embed?mid=zshaN7gd-oek.kGuRBCX_l_sU"></iframe>
<!-- / Map -->

</div>
<!-- / Map container -->


-CSS:

#map_container {
margin: 200px auto;
padding: 0;
width: 90%;
height: 250px; }

#map_container #map {
position: relative;
margin-top: 0;
margin-left: 0;
width: 100%;
height: 100%;
border: none; }


-Regards, Milan.

Answer

You need to listen window resize event and then set center:

 google.maps.event.addDomListener(window, 'resize', function() {
       map.setCenter(new google.maps.LatLng(-25.363882, 131.044922));
 });

The above solution works for Google Maps JavaScript API v3 But if you are only using iframe method then things will not be well for you in terms of responsive design as well as I know..

Alright, here is the working JsFiddle and the example that I slightly modified from :https://developers.google.com/maps/documentation/javascript/examples/event-simple :

<!DOCTYPE html>
<html>
<head>
    <title>Resize event</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
        html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
        function initialize() {
            var mapOptions = {
                zoom: 12,
                center: new google.maps.LatLng(-25.363882, 131.044922)
            };
            google.maps.event.addDomListener(window, 'resize', function () {
                map.setCenter(new google.maps.LatLng(-25.363882, 131.044922));
            });
            var map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);

            var marker = new google.maps.Marker({
                position: map.getCenter(),
                map: map
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <div id="map-canvas"></div>
</body>
</html>
Comments