Question

180

How to change Google Map Center by clicking a button

rated 0 times [ 187] [ 7] / answers: 1 / hits: 49211 / 9 Years ago, fri, february 13, 2015, 12:00:00

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

Only authorized users can answer the question. Please sign in first, or register a free account.

yulissamirandah

Add To Favorites

Follow

Total Points: 493

Total Questions: 115

Total Answers: 94

Location: Lebanon

Member since Sun, Aug 2, 2020

4 Years ago

answered 9 Years ago alfredoc · Accepted Answer

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 :).