title: Google Maps SetCenter. Focus on new location
body: <p>I'm using google maps and rendering many markers at <a href="http://www.dentalo.se/search/stockholm" rel="nofollow noreferrer">http://www.dentalo.se/search/stockholm</a> 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.</p>
  
  <p><img src="https://i.stack.imgur.com/a4RMC.jpg" alt="enter image description here"></p>
  
  <p>I have a <strong>Information</strong> button </p>
  
  <p><img src="https://i.stack.imgur.com/57Zpa.jpg" alt="enter image description here"></p>
  
  <p>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 <a href="http://www.dentalo.se/search/stockholm" rel="nofollow noreferrer">http://www.dentalo.se/search/stockholm</a>.</p>
  
  <pre><code>function showCompany(latlong) {
      map.setCenter(latlong);
      alert(latlong);
  }
  </code></pre>
  
  <p>This is the jquery code for rendering the map</p>
  
  <pre><code>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 += "&lt;div class='row buttons-page'&gt;" +
                                          "&lt;div class='col-md-8 col-sm-4'&gt;" +
                                              "&lt;h4&gt;"+ item.Name + "&lt;/h4&gt;" +
                                              "&lt;p style='margin: 1px;'&gt;" + item.Address + ", " + item.County.Name + "&lt;/p&gt;" +
                                              "&lt;p style='margin: 1px;'&gt;" + item.Phone + "&lt;/p&gt;" +
                                              "&lt;p style='margin: 1px;'&gt;Distans: " + calcRoute(from, to)  + "&lt;/p&gt;" +
                                          "&lt;/div&gt;" +
                                          "&lt;div class='col-md-3 col-sm-9'&gt;" +
                                              "&lt;div class='btn-group'&gt;" +                                                
                                                  "&lt;a href='/booking/"+ item.CompanyId +"' class='btn " + bookable(item.Status) + " " + SetDisplayClass(item.Status) +"'&gt;Boka &lt;i class='m-icon-swapright m-icon-white'&gt;&lt;/i&gt;&lt;/a&gt;" +
                                                  "&lt;button type='button' class='btn default' onClick='showCompany(&amp;apos;" + to + "&amp;apos;);return false;'&gt;Information &lt;i class='icon-info-sign m-icon-white'&gt;&lt;/i&gt;&lt;/button&gt;" +
                                              "&lt;/div&gt;" +
                                          "&lt;/div&gt;" +
                                      "&lt;/div&gt;" +
                                      "&lt;hr style='margin: 1px;' /&gt;";
                              map.addMarker({
                                              lat: item.Latitude ,
                                              lng: item.Longitude ,
                                              title: item.Address ,
                                              icon: GetMarkerImage(item.Status),
                                              infoWindow: { 
                                                  content: '&lt;div style="width: 300px"&gt;&lt;h4&gt;' + item.Name + '&lt;/h4&gt;&lt;br /&gt;&lt;p&gt;' + item.Address + ', ' + item.County.Name + '&lt;/p&gt;&lt;div class="four columns alpha"&gt;&lt;a class="btn blue ' + SetDisplayClass(item.Status) + '" href="/booking/' + item.CompanyId + '" &gt;&lt;i class="m-icon-swapright m-icon-white"&gt;&lt;/i&gt; Boka&lt;/a&gt; &lt;a href="#" onClick="showPopUp(&amp;apos;' + item.CompanyId +'&amp;apos;);return false;" class="btn default"&gt;Information&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;',
                                              }
                                  })
                          });
                           $("#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
  
              }
  </code></pre>
  
  <p>How can I set SetCenter when a user clicks on the <em>"Information"</em> button?</p>
  
  <p>Thanks in advance.</p>