2016-04-01 11 views
1

Ich benutze eckige Google-Karte und standardmäßig Zoom-in-out-Option kommt auf der unteren rechten Ecke, aber ich brauche diese Kontrolle in der unteren linken Ecke platziert werden. Es kann in Google Map API getan werden, aber ich verwende eckige Google Maps. Und Schwierigkeiten bei der Positionierung von Kartensteuerelementen.Angular google map map-control Ändern der Position

+1

jede Demo? ('PLNK/Geige/Codepen') – manish

Antwort

2

Wie in angular-google-maps docs angezeigt können Sie MapOptions Objekt der Richtlinie über options Attribut übergeben:

<ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options"></ui-gmap-google-map> 

und die MapOption die ZoomControlOptions enthalten.

Überprüfen Sie das folgende Snippet:

angular.module('appMaps', ['uiGmapgoogle-maps']) 
 
    .controller('mainCtrl', function($scope) { 
 
    $scope.map = { 
 
     center: { 
 
     latitude: 51.219053, 
 
     longitude: 4.404418 
 
     }, 
 
     zoom: 14, 
 
     options: { 
 
     scrollwheel: false, 
 
     zoomControlOptions: { 
 
      position: google.maps.ControlPosition.BOTTOM_LEFT 
 
     } 
 
     } 
 
    }; 
 
    });
#map_canvas { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.angular-google-map-container { 
 
    height: 400px; 
 
}
<html ng-app="appMaps"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Map</title> 
 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script> 
 
    <script src="//rawgit.com/lodash/lodash/3.10.1/lodash.min.js"></script> 
 
    <script src='//maps.googleapis.com/maps/api/js?sensor=false'></script> 
 
    <script src="//rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script> 
 
    <script src="//rawgit.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <h1 class="title">Google Maps Example</h1> 
 
    <div id="map_canvas" ng-controller="mainCtrl"> 
 
    <ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options"></ui-gmap-google-map> 
 
    </div> 
 
</body> 
 

 
</html>

+0

Danke für Ihre Mühe, aber es funktioniert nicht, es sagt Google nicht definiert .... Wenn ich es mit $ Scope dann ändern, ist 'BOTTOM_LEFT' Eigenschaft undefiniert .... Können Sie nur erstellen eine Geige für deinen Code nur eine eckige Karte mit Steuerelementen unten links ?? – Neha

+1

Also teilen Sie Ihren Code, weil das obige Snippet perfekt funktioniert. Hast du versucht, es hier auszuführen? – beaver

+0

Hallo Beaver, Danke für Ihre Mühe, aber diese Lösung hat ein Problem .... Es funktioniert nur, wenn ich ohne google map api es funktioniert nicht und in meinem fall benutze ich eckige google map api .... Wenn ich beides behalten werde, dann passiert viel message ... Kannst du mir einfach mit einer Lösung helfen, die nur eckig sein wird google Karte????? – Neha