CODEWITHSUNDEEP
javascriptcssgoogle-maps
Madusanka
Madusanka

Reputation: 3018

How to position Google map to particular position?

I have three map canvases on three different divs. In the javascript I have set the centre to the same position in all three. But the second and third do not get that centre. What could be the problem? Any ideas please? 

var centerPosition=new google.maps.LatLng(6.924782, 79.863643);
function initialize() {
    var map_canvas1 = document.getElementById('map_canvas1');
    var map_canvas2 = document.getElementById('map_canvas2');
    var map_canvas3 = document.getElementById('map_canvas3');
    var map_options1 = {
      center: centerPosition,
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

var map_options2 = {
  center: centerPosition,
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map_options3 = {
  center: centerPosition,
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
map1 = new google.maps.Map(map_canvas1, map_options1);
map2 = new google.maps.Map(map_canvas2, map_options2);
map3 = new google.maps.Map(map_canvas3, map_options3);

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

Upvotes: 0

Views: 96

Answers (2)

Anuradha
Anuradha

Reputation: 169

Please refer to the jsfiddle. Your code is working fine
http://jsfiddle.net/2mw6b/
var centerPosition=new google.maps.LatLng(6.924782, 79.863643);
function initialize() {
    var map_canvas1 = document.getElementById('map_canvas1');
    var map_canvas2 = document.getElementById('map_canvas2');
    var map_canvas3 = document.getElementById('map_canvas3');
    var map_options1 = {
      center: centerPosition,
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

var map_options2 = {
  center: centerPosition,
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map_options3 = {
  center: centerPosition,
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
map1 = new google.maps.Map(map_canvas1, map_options1);
map2 = new google.maps.Map(map_canvas2, map_options2);
map3 = new google.maps.Map(map_canvas3, map_options3);

}
initialize();

**Html code**
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v3&libraries=places,drawing&sensor=false"></script>
<div id="map_canvas1" class="mapCont"></div>
<div id="map_canvas2" class="mapCont"></div>
<div id="map_canvas3" class="mapCont"></div>
**Css**
.mapCont{
    height: 200px;
    width: 200px;
}

Upvotes: 2

Sulabh Agarwal
Sulabh Agarwal

Reputation: 291

Instead of using 'center' property in JSON object, you can also set the center position of each map.

Please try below code after instantiating the map object

 map1.setCenter(centerPosition);
 map2.setCenter(centerPosition);
 map3.setCenter(centerPosition);

Upvotes: 1

Related Questions