CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3location
awnine
awnine

Reputation: 143

Displaying the viewers rough location in custom google map

I have been working on a website using the google maps API in which I am making my own map from scratch (much like a "fantasy" world map).

What i would like is that when the user was viewing a certain area (not just centered on a single point but maybe an area that is multiple "screens" in width) the location would be displayed over the map, in a div placed over the map most likely, and this location would change as the user scrolled and entered another area.

For example, as the user scrolled over an area of desert the div would display "Desert", but as the center of the screen moved over the sea then it would display "Sea" etc.

I imagine it would involve defining "locations" that were areas between numerous Lat/Long points, and tracking the users location also.

Any help is much appreciated, thanks!

Upvotes: 1

Views: 344

Answers (1)

awnine
awnine

Reputation: 143

i found an answer to the issue so i thought id post it up here for posterity in case anyone else wanted to do the same, or if anyone wanted to improve upon it.

I used the LatLngBounds object to define 2 areas on the map, like so:

    var desert = new google.maps.LatLngBounds(
                new google.maps.LatLng(27.694746, 28.294032),
                new google.maps.LatLng(62.921001, 78.391689)
                );
            var plains = new google.maps.LatLngBounds(
                new google.maps.LatLng(82.171166, 131.930577),
                new google.maps.LatLng(84.144231, 105.541417)
                );

and then used a function to track the screen center coordinates and detect whether they were within either of these Bounds. If so the inner HTML of a div (placed over the map) would be updated.

            google.maps.event.addListener(map, 'center_changed', function() {
            trackCenter = map.getCenter();
    if (desert.contains(trackCenter)) {
    var place = 'Sands of Time';
    }
    else if (plains.contains(trackCenter)) {
    var place = "Plains of Kh'rrnthar";
    }
    else {
    place = 'the Frozen Sea';
    }
    document.getElementById('locationlabel').innerHTML = '<p>Location ~ ' + place + '</p>';
            });

I hope this is of use to someone, regards

Upvotes: 1

Related Questions