CODEWITHSUNDEEP
javascriptgoogle-maps
Cole Roberts
Cole Roberts

Reputation: 984

Google Maps Controls Hidden

I'm having problems with the Google Maps API V3. The map loads correctly but the zoomControl is partially hidden. The panControl is shown and works perfectly, although in the screenshot it's not turned on.

Google Maps SS - No zoomControl

I've tried setting: zoomControl: true and disableDefaultUI: true as well to no avail.

My javascript is as follows: 

function initializeMap(manuId, lat, lng, centerLat, centerLng,zoom){
 var latlng = new google.maps.LatLng(centerLat, centerLng);
    var myOptions = {
      zoom: zoom,
      center: latlng,
      disableDefaultUI: true,
      zoomControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scrollwheel: false,
      draggable : true
    };

    var mapDiv = document.getElementById("map_canvas");
    if(!mapDiv){
        var mapDiv = document.getElementById("map_canvas_"+manuId);
    }
    var map = new google.maps.Map(mapDiv,
        myOptions);


    var myLatlng = new google.maps.LatLng(lat,lng);

    var marker = new google.maps.Marker({
        position: myLatlng, 
        map: map
    }); 
    getPolygon(manuId, map);    
}

var map;

function showManuMap(manuId, container, manuLat, manuLon, locLat, locLon, zoom){
showManuMap(manuId, container, manuLat, manuLon, locLat, locLon, zoom, null);
}

function showManuMap(manuId, container, manuLat, manuLon, locLat, locLon, zoom, marker){
map = new google.maps.Map(jQuery("#" + container)[0], {
    zoom: zoom,
    center: new google.maps.LatLng(manuLat, manuLon),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
    zoomControl: true,
    scrollwheel: false,
    draggable : true
});

if (locLat && locLon) {
    new google.maps.Marker({
        position: new google.maps.LatLng(locLat, locLon), 
        map: map,
        icon : "https://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png"
    }); 
}
if (marker != null) {
    new google.maps.Marker({
        position: new google.maps.LatLng(manuLat, manuLon), 
        map: map,
        icon: marker
    });
} else {
    new google.maps.Marker({
        position: new google.maps.LatLng(manuLat, manuLon), 
        map: map
    }); 
}
if (manuId) {
    getPolygon(manuId, map);
}
}

Upvotes: 2

Views: 1818

Answers (2)

davertron
davertron

Reputation: 1447

Without more information it's a little hard to be sure, but I had this issue when I included Twitter bootstrap in my page. Specifically it was setting all img tags to have a max-width of 100%. I fixed the issue by doing " #my-map-canvas img { max-width: none }" where #my-map-canvas was the id of the canvas for my map.

Upvotes: 1

detailCode
detailCode

Reputation: 537

Taken from Google's API page: https://developers.google.com/maps/documentation/javascript/controls#Adding_Controls_to_the_Map

Adding Controls to the Map

You may wish to tailor your interface by removing, adding, or modifying UI behavior or controls and ensure that future updates don't alter this behavior. If you wish to only add or modify existing behavior, you need to ensure that the control is explicitly added to your application.

Some controls appear on the map by default while others will not appear unless you specifically request them. Adding or removing controls from the map is specified in the following MapOptions object's fields, which you set to true to make them visible or set to false to hide them:

{
  panControl: boolean,
  zoomControl: boolean,
  mapTypeControl: boolean,
  scaleControl: boolean,
  streetViewControl: boolean,
  overviewMapControl: boolean
}

Upvotes: 0

Related Questions