CODEWITHSUNDEEP
google-maps-api-3
overlander
overlander

Reputation: 9

How to put a border around a google map

How to put a border around a google map? I have used:

mapcanvas.style.style='border:10px solid #0b0';

Is this correct? I am new to Google maps.

I think I have found the reason for it not displaying but can any one have a look and let me know the correct format.

<section id="wrapper">
Click the allow button on the top of the page to let the browser find your location.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<article>
</article>
<script>
function initialize() {
  var mapOptions = {
    zoom: 12,
    center: new google.maps.LatLng(-28.643387, 153.612224),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.BOTTOM_CENTER
    },
    panControl: true,
    panControlOptions: {
        position: google.maps.ControlPosition.TOP_RIGHT
    },
    zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.LEFT_CENTER
    },
    scaleControl: true,
    scaleControlOptions: {
        position: google.maps.ControlPosition.TOP_LEFT
    },
    streetViewControl: true,
    streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    }
  }
  var map = new google.maps.Map(document.getElementById("map-canvas"),
      mapOptions);
}
function success(position) {
  var mapcanvas = document.createElement('div');
  mapcanvas.id = 'mapcontainer';
  mapcanvas.style.height = '250px';
  mapcanvas.style.width = 'auto';
  mapcanvas.style.style='border:10px solid #0b0';
  document.querySelector('article').appendChild(mapcanvas);
  var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var options = {
    zoom: 15,
    center: coords,
    mapTypeControl: true,
    navigationControlOptions: {
        style: google.maps.NavigationControlStyle.SMALL
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
  var marker = new google.maps.Marker({
      position: coords,
      map: map,
      title:"You are here!"
  });
}
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success);
} else {
  error('Geo Location is not supported');
}
</script>
</section>

Upvotes: 0

Views: 16694

Answers (2)

Kyle
Kyle

Reputation: 410

super late to the party, but there is no doubt in my mind that the actual correct way to do this is by simply stylizing the wrapper with some basic css. 

#wrapper{
  border:10px solid #0b0;
  min-height:250px;
  height:100%;
  width: 100%;
}

Put #wrapper inside a specific height & width element to make the map fit specific dimensions.

Upvotes: 0

Michael Geary
Michael Geary

Reputation: 28850

This has nothing to do with Google Maps; that's a red herring.

Your problem is simply how to put a border on a DIV or other DOM element. If you try your code without Google Maps involved at all, it still won't put a border on your DIV.

Instead of:

mapcanvas.style.style = 'border:10px solid #0b0';

you could use:

mapcanvas.style.border = '10px solid #0b0';

Or, using jQuery, you could simplify this section of code:

var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '250px';
mapcanvas.style.width = 'auto';
mapcanvas.style.style='border:10px solid #0b0';
document.querySelector('article').appendChild(mapcanvas);

to:

$('<div id="mapcontainer">').css({
    height: 250,
    width: 'auto',
    border: '10px solid #0b0'
}).appendTo('article');

Upvotes: 2

Related Questions