Load Google Map on button click with jQuery

Question

I am currently trying to change the map displayed on screen dependent on which anchor tag is clicked. The lat and long for is stored in an HTML attribute on the anchor tag c

Answer 1

Just Spliting the latLng Worked Perfectly.

function initialize(latLng) {
    latLng = latLng.split(",") //split
    var mapOptions = {
        center: new google.maps.LatLng(latLng[0],latLng[1]), //assign Seprately
        zoom: 8
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
}); 

JS FIDDLE:- http://jsfiddle.net/fJdtY/2/

Answer 2

As @Nell said new google.maps.LatLng constructor accepts 2 separate parameters (lat, lng) and not just single string.

What you tried to do was

new google.maps.LatLng('-30, 150')

but correct way to initialize LatLng is to pass lat and lng separately.

new google.maps.LatLng(-30, 150)

I would never store it in data attribute as single entity rather as

data-lat="53.488188"

data-lng="-2.373019"