dynamically changing google maps javascript api with variables

Question

I have a json object which is giving me the users latitude and longitude coordinates. I want to use these coordinates to show the user their location on google maps.
I'm saving these values in two variables and plugging them into the google maps api script but the map doesn't show up. It does take the variables a tiny bit of time to show up but I tried wrapping the google maps script in a setTimeout function with no luck.

Is there any way to do this without having to make the user click a button to load the map manually?

    $(document).ready(function() {
        var userLat;
        var userLng;

        $.getJSON("http://www.sample.com/callback=?",
            function(json) {
                console.log(json);              
                userLat = (json.latitude);
                userLng = (json.longitude);
            }
        )
    })

    function initialize() {
        var mapOptions = {
            center: { lat: userLat, lng: userLng},
            zoom: 8,
            scrollwheel: false
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    }
    google.maps.event.addDomListener(window, 'load', initialize);

Where are you using userLat and userLng to generate the new map or update the old one? — Vivek Pradhan
– Vivek Pradhan, Commented Jun 23, 2015 at 5:36
Sorry about that thanks for pointing it out, it's a typo that's not in my code I will edit it on here. I have it in the initialize function. — Mr.Smithyyy
– Mr.Smithyyy, Commented Jun 23, 2015 at 10:04
Simply call the initialize function from within your $.getJSON function after you define the latitude and longitude you require. When you call initialize on window.load, the JSON callback might not have executed and so you couldn't see the map getting updated — Vivek Pradhan
– Vivek Pradhan, Commented Jun 23, 2015 at 13:03

Craicerjack · Accepted Answer · 2015-06-23 10:12:19Z

1

You are initialising the map before your json has returned from the server. In your $.getJSON you should reset the centre of the map in your callback. You should also make sure that your lat and lng points can be read by google. - something along the lines of:

$.getJSON("http://www.sample.com/callback=?",
            function(json) {
                console.log(json);              
                userLat = (json.latitude);
                userLng = (json.longitude);
                var newPos = new google.maps.LatLng(userLat, userLng);
                map.setOptions({
                    center: newPos
                });
            }
        )

You'll also have to create a marker to show the users location. Also you should create your map variable outside the the initialise function so its available to other functions.

answered Jun 23, 2015 at 10:12

Craicerjack

6,3303 gold badges34 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

dynamically changing google maps javascript api with variables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related