CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Smokey
Smokey

Reputation: 1897

How to obtain extreme coordinates visible in map based on current location?

Holla....I have to find the extreme coordinates that are visible in the map currently based on my current location's coordinates. I have included a google map in my website.

I have set the zoom level to 6 & maximum zoom value to 8 & minimum zoom value to 2 in my map.

I have centered my map based on my current location.

To obtain the coordinates of my current position, I used Maxmind's geoip service.

<script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script>
<script language="JavaScript">var laa=geoip_latitude();</script>
<script language="JavaScript">var lonn=geoip_longitude();</script>

After obtaining my current position, I used those values to center my map. Here's the Javascript code I used to display & center map.

<script>
        //map included.
        function initialize()
        {
            var myLatlng=new google.maps.LatLng(laa,lonn);
            var mapProp = {
                center: new google.maps.LatLng(laa,lonn),
                zoom:6,
                maxZoom: 8,
                minZoom:2,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            var image = 'mapmarkers/you-are-here-2.png';

            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: 'I am Here.',
                icon: image
            });
        }

        function loadScript()
        {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize";
            document.body.appendChild(script);
        }
        window.onload = loadScript;

    </script>

HTML code used to include map into my web page is:

<div id="googleMap" style="width:900px;height:500px;">

</div>

enter image description here

I have included a screenshot of my map. I have added a green marker to identify my current location. Now based on that, I wanna find the 4 extreme coordinates that I have marked (circled) in red. I don't know how to acheive this. Any tips from anyone?? Gracias. :)

I want to find the extreme coordinates whenever user zooms in or zooms out based on mouse over or mouse down function. Worst thing is, IDK how to achieve that.

Upvotes: 0

Views: 629

Answers (1)

MrUpsidown
MrUpsidown

Reputation: 22490

Use the getBounds() method. https://developers.google.com/maps/documentation/javascript/reference#Map

Use it in a bounds_changed event listener. That should suit your needs.

google.maps.event.addListener(map, 'bounds_changed', function () {

    var bounds = map.getBounds();

    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();
});

Edit: JSFiddle demo

With this, you will be able to calculate the 2 other points. Hope this helps.

Upvotes: 1

Related Questions