GoogleMapsV3

GEO IP Geolocation and inset shadow

by marcoscarfagna

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=true&amp;dummy=.js"></script>
<!--  YOU NEED TO ALLOW LOCATION REPORTING TO SEE THE MAP -->

<div id="container">
    <div id="sometext">
        <h2>Fusce nec sodales tellus.</h2>
        <p>Quisque semper viverra eros. Nullam rutrum tortor nec enim varius pulvinar. In at eros a magna sollicitudin vulputate. Ut sed nulla blandit, fringilla mauris non, commodo ipsum. Nam commodo vestibulum eros nec ultricies. Donec lobortis arcu eget turpis lobortis pellentesque. Nulla facilisi. Vestibulum euismod mauris nibh, ac luctus ante pretium id. Aenean non elit accumsan, dignissim nisl in, sodales leo. Donec sed faucibus tellus. Etiam blandit adipiscing quam quis pulvinar.</p>
    </div>
    <div id="map-canvas">loading map</div>
</div>

CSS

* {box-sizing:border-box;}
html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }

#container{
    padding:30px;
    background:#999;
    display:inline-block;
}

#sometext{
    width:50%;
    background:#fff;
    padding:0 15px;
    float:left;
    min-height:300px;
}

#map-canvas{
height:300px;
width:50%;
float:right;
}

#map-canvas:before {
    box-shadow: 4px 0 4px -4px rgba(0, 0, 0, 0.5) inset;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    width: 5px;
    z-index: 1000;
}

JavaScript

var map;

function initialize() 
{
  var mapOptions = 
  {
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
    
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  // Try HTML5 geolocation
  if(navigator.geolocation) 
  {
    navigator.geolocation.getCurrentPosition(function(position) 
    {
      var pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);

      var infowindow = new google.maps.InfoWindow(
      {
        map: map,
        position: pos,
        content: 'Location found using HTML5, don\'t panic ;)'
      });

      map.setCenter(pos);
    }, function() 
    {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }
}

function handleNoGeolocation(errorFlag) 
{
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }

  var options = {
    map: map,
    position: new google.maps.LatLng(60, 105),
    content: content
  };

  var infowindow = new google.maps.InfoWindow(options);
  map.setCenter(options.position);
}
initialize();
//google.maps.event.addDomListener(window, 'load', initialize);