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 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);
    }
});

possible duplicate of [google maps move marker with lat/lng from ajax success returned data](http://stackoverflow.com/questions/17654989/google-maps-move-marker-with-lat-lng-from-ajax-success-returned-data) — geocodezip, May 01 '14 at 11:33

score 3 · Accepted Answer · answered May 01 '14 at 09:12

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/

elrado · Answer 2 · 2014-05-01T17:47:44.053

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"

edited May 01 '14 at 17:47

answered May 01 '14 at 09:20

elrado

4,960
1
17
15

Load Google Map on button click with jQuery

2 Answers2

Linked