Twitter Bootstrap Question posted in

Not centering around the map marker – Twitter bootstrap

I have created a page with a google map and it displays the general location but it is not centered around the marker. I have gone over several tutorial and the problem persist. I sized the #map container div both inline and on the style sheet and get the same results. I am using twitter bootstrap to style my page.

Here is my HTML/JS

...
<div class="col-sm-6">
   <div id="map" style="height:300px">
   </div>
</div>
...

<script>
    var map;
    function initMap() {
      var mapOptions = {
        center: new google.maps.LatLng(31.7717067, -106.3308777),
        zoom: 15,
        mapTypeId: 'roadmap'
        };
      map = new google.maps.Map(document.getElementById('map'), mapOptions);
      addMarker();
      }
</script>
<script>
      function addMarker(){
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(31.7717067, -106.3308777),
          map: map
        });
</script>

My CSS

#map {
    height: 100%;
  }
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I hacked the view and used the panTo method. Not sure if this is the correct thing to do but I got the view needed. 

    var map;   
function initMap() {
    var location = {lat: 51.513347, lng: -0.088986};
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: location
    });
    var marker = new google.maps.Marker({
      position: location,
      map: map
    });
    var latLng = new google.maps.LatLng(31.777423, -106.341530);
    map.panTo(latLng); 
}

  2. 0

    You can have it all in one function

     function initMap() {
    var location = {lat: 51.513347, lng: -0.088986};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: location
    });
    var marker = new google.maps.Marker({
      position: location,
      map: map
    });
 }

    For CSS try this: 

    #map {
 height: 400px;
 width: 100%;
 border-radius: 10px;
 background: #000;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search