How to change Google Map Center by clicking a button

Question

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.

Solution 1

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>

Live demo is here if u need more :).

Solution 2

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

Comments

[Jeremy Thille]

Not sure "3" is a valid ID (starting with a number). Any errors in the console?

[Jeremy Thille]

Where is the "map" variable defined? It's not in your code.

[MrUpsidown]

This would work but it's ugly. Use an event listener instead.

[Ivan Belchev]

Thanks MrUpsidown! I change it to a jQuery function.

[MrUpsidown]

Yes that's already better ;) See my answer for a pure google maps API solution.

[nic]

Could you add zoom, mapTypeId, or other options as well?

[nic]

Figured it out map.setZoom(10); and map.setMapTypeId(google.maps.MapTypeId.SATELLITE); seemed to do the trick for me.

[MrUpsidown]

Yes, or event better, use map.setOptions() if you need to change multiple options at once.