CODEWITHSUNDEEP
javascripthtmlcssgoogle-maps-api-3google-maps-markers
user3187075
user3187075

Reputation:

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; }

Upvotes: 0

Views: 1313

Answers (2)

deepak
deepak

Reputation: 13

following code will reload your map every time whenever window size is change so your map marker will be in center automatically because every time we are getting a new map which will set marker in to center.. hope this will help!

$(window).resize(function(){
   var ref=$('iframe:first').attr('src');
   $('iframe:first').attr('src',ref);
});

Upvotes: 0

wooer
wooer

Reputation: 1717

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>

Upvotes: 3

Related Questions