How to change Google Map Center by clicking a button

I am using Google Map API v3 and jQuery 1.11.0.

I have a Google Map in the following div:

<div id="googleMap" class="map_div"></div>

The map.js is outside html file, it is linked.

Now I have a button in another part of the html (outside map) like this:

<button id="3">Change center</button>

Now I want to add a on click event which will change the center of the map to new latitude and longitude.

So, I have JavaScript in HTML like this:

<script>
    $(document).ready(function()
    {
        $("#3").click(function(){
            var center = new google.maps.LatLng(10.23,123.45);
            map.panTo(center);
        });
    });
</script>

Can anyone help me please? Thanks in advance for helping.

Answers


Here is the code for ur problem:

var map;
function initialize()
{
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(48.1293954,12.556663),//Setting Initial Position
    zoom: 10
  });
}

function newLocation(newLat,newLng)
{
	map.setCenter({
		lat : newLat,
		lng : newLng
	});
}

google.maps.event.addDomListener(window, 'load', initialize);

//Setting Location with jQuery
$(document).ready(function ()
{
    $("#1").on('click', function ()
    {
	  newLocation(48.1293954,11.556663);
	});
  
	$("#2").on('click', function ()
    {
	  newLocation(40.7033127,-73.979681);
	});
  
    $("#3").on('click', function ()
    {
	  newLocation(55.749792,37.632495);
	});
});
html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>

<button id="1" style="padding:10px; cursor:pointer;">Munich</button>
<button id="2" style="padding:10px;cursor:pointer;">New York</button>
<button id="3" style="padding:10px;cursor:pointer;">Moscow</button>
<br>
<br>
<div style="height:100%;" id="map-canvas"></div>

In your initialize function (or where you create the map) add the following code after you created the map object:

google.maps.event.addDomListener(document.getElementById('3'), 'click', function () {

    map.setCenter(new google.maps.LatLng(10.23,123.45));
});

Need Your Help

Chrome loading forces float:right to new line

css google-chrome css-float

I'm having a loading issue in chrome only where certain times it loads it all at once and the float looks fine in the menu, but other times it loads it slower than usual and it causes the float to ...