Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html>
​
  <head>
<meta name="description" content="Reporting Issues Bin Example">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.underscore.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
    <script src="http://cdn.rawgit.com/nmccready/angular-simple-logger/0.0.1/dist/index.js"></script>
    <script src="https://cdn.rawgit.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.js"></script>
  </head>
​
  <body data-ng-app="example">
    <h1>Reporting Issues example</h1>
    <a href="https://twitter.com/ddpelayo">@ddpelayo if you have queries</a>
    <h2>Map</h2>
    <div data-ng-controller="ExampleCtrl">
      <ui-gmap-google-map id="map"
                            center="map.center"
                            pan="map.pan"
                            zoom="map.zoom"
                            draggable="true"
                            refresh="map.refresh"
                            options="map.options"
                            events="map.events"
                            bounds="map.bounds">
        <ui-gmap-drag-zoom keyboardkey="'alt'"></ui-gmap-drag-zoom>
      </ui-gmap-google-map>
    </div>
  </body>
</html>
​
 
body {
    font-family: 'Open Sans', sans-serif;
}
​
.angular-google-map-container {
    width: 100%;
    height: 600px;
}
​
/* fix for Twitter Bootstrap handling of responsive images */
.angular-google-map img {
    max-width: none;
}
​
.angular-google-map {
    top: 80px;
​
}
​
.shrink {
    font-size: 8;
}
​
.true:hover {
    background-color: lightgreen;
}
​
.false:hover {
    background-color: lightpink;
}
​
.marker-labels {
    color: red;
    background-color: white;
    font-family: "Lucida Grande", "Arial", sans-serif;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    border: 1px solid black;
    white-space: nowrap;
}
​
/** FIX for Bootstrap and Google Maps Info window styes problem **/
img[src*="gstatic.com/"], img[src*="googleapis.com/"] {
  max-width: none;
}
​
​
/* uncomment this if you are using the <google-map> element instead of a div
.angular-google-map {
  display: block;
  }*/
​
.custom-info-window{
    background: rgba(0,0,0,0.5);
    color: white;
    padding: 20px;
    /*border: 1px solid white;*/
    box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
    border-radius: 5px;
    width: 200px;
    margin-top: 15px;
    margin-left: -130px;
}
.custom-info-window a{
    color: white;
    text-decoration: underline;
}
.custom-info-window:after
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 15px 15px;
    border-color: rgba(0,0,0,0.5) transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: -15px;
    left: 118px;
}
​
 
(function() {
angular.module('example', ['uiGmapgoogle-maps'])
      .controller('ExampleCtrl', ['$scope', "uiGmapLogger", "uiGmapGoogleMapApi",
        function ($scope, $log, GoogleMapApi) {
          $scope.map = {
            dragZoom: {options: {}},
            center: {
              latitude: 26.153215225012733,
              longitude: -81.80121597097774
            },
            pan: true,
            zoom: 16,
            refresh: false,
            events: {},
            bounds: {}
          };
          GoogleMapApi.then(function () {
            $scope.map.dragZoom = {
              options: {
                visualEnabled: true,
                visualPosition: google.maps.ControlPosition.LEFT,
                visualPositionOffset: new google.maps.Size(35, 0),
                visualPositionIndex: null,
                visualSprite: "http://maps.gstatic.com/mapfiles/ftr/controls/dragzoom_btn.png",
                visualSize: new google.maps.Size(20, 20),
                visualTips: {
                  off: "Turn on",
                  on: "Turn off"
                }
              }
            };
          });
        }]);
})();
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
davidpelayopro
0viewers