Google Maps SetCenter. Focus on new location

Question

I'm using google maps and rendering many markers at http://www.dentalo.se/search/stockholm and it is working fine. What I would like to do is when someone clicks on a button I want to use map.SetCenter and focus on that location.

I have a Information button

when a user clicks on it I am calling a JavaScript function and setting the center. But is not working. When I click on information it just becomes gray. You can try it yourself and see what happpenes at http://www.dentalo.se/search/stockholm.

function showCompany(latlong) {
    map.setCenter(latlong);
    alert(latlong);
}

This is the jquery code for rendering the map

var p = $("#map_search");
        var position = p.position();
        $("#directionsPanel").css({top: position.top, position:'absolute'});

        var map;
        var addressField;
        var geocoder;
        $(document).ready(function () {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(ShowPosition);
            }
            else {
                x.innerHTML = "Geolocation is not supported by this browser.";
            }
            function showError(error) {
                switch (error.code) {
                    case error.PERMISSION_DENIED:
                        alert("User denied the request for Geolocation.");
                        break;
                    case error.POSITION_UNAVAILABLE:
                        alert("Location information is unavailable.");
                        break;
                    case error.TIMEOUT:
                        alert("The request to get user location timed out.");
                        break;
                    case error.UNKNOWN_ERROR:
                        alert("An unknown error occurred.");
                        break;
                }
            }
            function ShowPosition(position) {
                //begin rest call
                $("#latitude").val(position.coords.latitude);
                $("#longitude").val(position.coords.longitude);
                var from = $("#latitude").val() + "," + $("#longitude").val();
                var urlParts = window.location.href.split('/'),
                    Id = urlParts[(urlParts.length - 1)];
                $.ajax({
                    type: "GET",
                    cache: true,
                    async: false,
                    url: "/RestService/Dentalo.svc/CompaniesByState/" + Id,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        map = new GMaps({
                            el: 'map_search',
                            //center: Id,
                            lat: data[0].State.Latitude ,//position.coords.latitude,
                            lng: data[0].State.Longitude,
                            zoom: 14,
                            zoomControl: true,
                            mapTypeId: google.maps.MapTypeId.ROADMAP,
                            mapTypeControlOptions: {
                                style: google.maps.MapTypeControlStyle.DEFAULT,
                                position: google.maps.ControlPosition.RIGHT_RIGHT
                            },

                            panControl: true,
                            panControlOptions: {
                                position: google.maps.ControlPosition.RIGHT_TOP
                            },

                            zoomControl: true,
                            zoomControlOptions: {
                                style: google.maps.ZoomControlStyle.LARGE,
                                position: google.maps.ControlPosition.RIGHT_TOP
                            },
                            panControl: true,
                            scrollwheel: true
                        });
                        map.addMarker({
                            lat: position.coords.latitude,
                            lng: position.coords.longitude,
                            title: 'Min position',
                            icon: 'http://www.dentalo.se/assets/img/map/user_x64.png'
                        });
                        var h = "";
                        $.each(data, function (index, item) {
                            var to = item.Latitude + "," + item.Longitude;
                            h += "<div class='row buttons-page'>" +
                                        "<div class='col-md-8 col-sm-4'>" +
                                            "<h4>"+ item.Name + "</h4>" +
                                            "<p style='margin: 1px;'>" + item.Address + ", " + item.County.Name + "</p>" +
                                            "<p style='margin: 1px;'>" + item.Phone + "</p>" +
                                            "<p style='margin: 1px;'>Distans: " + calcRoute(from, to)  + "</p>" +
                                        "</div>" +
                                        "<div class='col-md-3 col-sm-9'>" +
                                            "<div class='btn-group'>" +                                                
                                                "<a href='/booking/"+ item.CompanyId +"' class='btn " + bookable(item.Status) + " " + SetDisplayClass(item.Status) +"'>Boka <i class='m-icon-swapright m-icon-white'></i></a>" +
                                                "<button type='button' class='btn default' onClick='showCompany(&apos;" + to + "&apos;);return false;'>Information <i class='icon-info-sign m-icon-white'></i></button>" +
                                            "</div>" +
                                        "</div>" +
                                    "</div>" +
                                    "<hr style='margin: 1px;' />";
                            map.addMarker({
                                            lat: item.Latitude ,
                                            lng: item.Longitude ,
                                            title: item.Address ,
                                            icon: GetMarkerImage(item.Status),
                                            infoWindow: { 
                                                content: '<div style="width: 300px"><h4>' + item.Name + '</h4><br /><p>' + item.Address + ', ' + item.County.Name + '</p><div class="four columns alpha"><a class="btn blue ' + SetDisplayClass(item.Status) + '" href="/booking/' + item.CompanyId + '" ><i class="m-icon-swapright m-icon-white"></i> Boka</a> <a href="#" onClick="showPopUp(&apos;' + item.CompanyId +'&apos;);return false;" class="btn default">Information</a></div></div>',
                                            }
                                })
                        });
                         $("#search_panel").html(h).show(); 
                    },
                    error: function (msg, url, line) {
                        //alert('error trapped in error: function(msg, url, line)');
                        alert('msg = ' + msg + ', url = ' + url + ', line = ' + line);
                    }
                });
                //end rest call

                // Define Gecoder
                geocoder = new google.maps.Geocoder();

                // Init searchbox
                initSearchBox();

                // main directions

            }

How can I set SetCenter when a user clicks on the "Information" button?

Thanks in advance.

Solution

map.setCenter(latlong);

latlong must be a google.maps.LatLng object but in your case you are passing a string to your function.

<button onclick="showCompany('59.3618356,18.0140273');return false;">Information</button>

So that won't work.

Instead try:

<button onclick="showCompany('59.3618356','18.0140273');return false;">Information</button>

And

function showCompany(lat, lng) {
    var position = new google.maps.LatLng(lat, lng);
    map.setCenter(position);
    alert(lat, lng);
}