CODEWITHSUNDEEP
google-mapseventsgoogle-maps-markers
ploddingOn
ploddingOn

Reputation: 133

centering on marker, Google maps api

I'm trying to display a couple of markers on a Google map, and allow the user to center the map on a marker when they click that marker.

However, when the user clicks on any marker, the map always centers on the last marker I create in my code.

Here is the full code I am using:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
  src="http://maps.googleapis.com/maps/api/js?key=MY_API_KEY&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myOptions = {
  center: new google.maps.LatLng(-34, 150),
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

var myLatLng = new google.maps.LatLng(34,-150);

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title:'test' + 1
});

google.maps.event.addListener(marker, 'click', function(){map.setCenter(marker.getPosition());});

myLatLng = new google.maps.LatLng(20,-87);

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title:'test' + 2
});

google.maps.event.addListener(marker, 'click', function(){map.setCenter(marker.getPosition());});

}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

Spent a while on this, consulting the Google maps api references, but just cannot figure out why it is not working.

Any insights appreciated - thanks.

Upvotes: 0

Views: 253

Answers (1)

Yogesh Jadhav
Yogesh Jadhav

Reputation: 21

mMap.setOnMarkerClickListener(new OnMarkerClickListener() 
      {
          @Override
          public boolean onMarkerClick(Marker marker)
          {
              int yMatrix = 200, xMatrix =40;

              DisplayMetrics metrics1 = new DisplayMetrics();
              getWindowManager().getDefaultDisplay().getMetrics(metrics1);
              switch(metrics1.densityDpi)
              {
              case DisplayMetrics.DENSITY_LOW:
                  yMatrix = 80;
                  xMatrix = 20;
                  break;
              case DisplayMetrics.DENSITY_MEDIUM:
                  yMatrix = 100;
                  xMatrix = 25;
                  break;
              case DisplayMetrics.DENSITY_HIGH:
                  yMatrix = 150;
                  xMatrix = 30;
                  break;
              case DisplayMetrics.DENSITY_XHIGH:
                  yMatrix = 200;
                  xMatrix = 40;
                  break;
              case DisplayMetrics.DENSITY_XXHIGH:
                  yMatrix = 200;
                  xMatrix = 50;
                  break;
              }

              Projection projection = mMap.getProjection();
              LatLng latLng = marker.getPosition();
              Point point = projection.toScreenLocation(latLng);
              Point point2 = new Point(point.x+xMatrix,point.y-yMatrix);

              LatLng point3 = projection.fromScreenLocation(point2);
              CameraUpdate zoom1 = CameraUpdateFactory.newLatLng(point3);
              mMap.animateCamera(zoom1);
              marker.showInfoWindow();
              return true;
          }
      });

Upvotes: 2

Related Questions