CODEWITHSUNDEEP
jquerygoogle-maps
James
James

Reputation: 2860

Load Google Map on button click with jQuery

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 called 'data-latLng' and is passed to my Javascript to then make requests to the Google API with this latLng.

The issue I am having is that the actual map is not being displayed. The zoom bar and other features are being displayed fine. it's jsut the actual map itself. I have created a jFiddle to show my code. Am I going the correct away about this? Thanks

http://jsfiddle.net/fJdtY/

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0; padding: 0 }
        #map-canvas { height: 100% }
    </style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={KEY_HIDDEN}&sensor=false">
    </script>       
</head>
<body>
    <a href="#" class="button" data-latLng="53.488188,-2.373019">Button</a>
    <a href="#" class="button" data-latLng="-34.397, 150.644">Button 2</a>
    <div id="map-canvas"></div>
</body>


<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery(document).on("click", ".button", function(e) {
        e.preventDefault();
        var latLng = jQuery(this).attr("data-latLng");          
        initialize(latLng);
    });

    function initialize(latLng) {
        var mapOptions = {
            center: new google.maps.LatLng(latLng),
            zoom: 8
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    }
});

Upvotes: 1

Views: 17569

Answers (2)

elrado
elrado

Reputation: 5272

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"

Upvotes: 2

Neil
Neil

Reputation: 412

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/

Upvotes: 3

Related Questions