Simple GoogleMaps v3 API + angular.js demo

Developer
Batressc
Size
2,591 Kb
Views
14,168
  1. Simple GoogleMaps v3 API + angular.js demo Previews
  2. Simple GoogleMaps v3 API + angular.js demo HTML Codes
  3. Simple GoogleMaps v3 API + angular.js demo CSS Codes
  4. Simple GoogleMaps v3 API + angular.js demo JS Codes

How do I make an simple googlemaps v3 api + angular.js demo?

Simple Google Maps API + Angular.js demo.View online demo: http://ba3-angular-googlemaps.azurewebsites.net/. What is a simple googlemaps v3 api + angular.js demo? How do you make a simple googlemaps v3 api + angular.js demo? This script and codes were developed by Batressc on 03 November 2022, Thursday.

Simple GoogleMaps v3 API + angular.js demo Previews
IQ Test

Simple GoogleMaps v3 API + angular.js demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple GoogleMaps v3 API + angular.js demo</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <span ng-app="googleMapsApp" ng-controller="GoogleMapController"> <label>Centro: {{view.currentCenter}}</label> <br /> <label>Bound: {{view.currentBound}}</label> <br /> <label>Latitud:</label> <!--<input type="number" step="0.000001" ng-model="view.currentPosition.lat" ng-model-options="{ debounce: 1000 }" ng-change="setMapPosition()" />--> <input type="number" step="0.000100" ng-model="view.currentPosition.lat" ng-change="setMapPosition()" /> <br /> <label>Longitud:</label> <!--<input type="number" step="0.000001" ng-model="view.currentPosition.lng" ng-model-options="{ debounce: 1000 }" ng-change="setMapPosition()" />--> <input type="number" step="0.000100" ng-model="view.currentPosition.lng" ng-change="setMapPosition()" /> <br /> <label>Zoom:</label> <input type="number" min="0" max="21" ng-model="view.configuration.zoom" /> <br /> <button ng-click="loadKML()">Cargar KML</button> <button ng-click="loadKMZ()">Cargar KMZ</button> <div id="map"></div>
</span> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js'></script>
<script src='https://maps.googleapis.com/maps/api/js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple GoogleMaps v3 API + angular.js demo - Script Codes CSS Codes

html, body { height: calc(100% - 60px); margin: 0; padding: 0;
}
#map { height: 100%;
}

Simple GoogleMaps v3 API + angular.js demo - Script Codes JS Codes

(function() { var app = angular.module('googleMapsApp', []); app.controller('GoogleMapController', ['$scope', GoogleMapController]); function GoogleMapController($scope) { $scope.view = { map: undefined, configuration: { backgroundColor: '#F8F8F8', center: { lat: 13.676445, lng: -89.281736 }, zoom: 15 }, currentPosition: { lat: 0, lng: 0 }, currentCenter: 0, currentBound: undefined, }; InitializeComponents(); $scope.setMapPosition = setMapPosition; $scope.loadKML = loadKML; $scope.loadKMZ = loadKMZ; function InitializeComponents() { var position; $scope.view.map = new google.maps.Map(document.getElementById('map'), $scope.view.configuration); position = $scope.view.map.getCenter(); $scope.view.currentPosition = { lat: position.G, lng: position.K }; $scope.view.currentCenter = $scope.view.map.getCenter(); $scope.view.currentBound = $scope.view.map.getBounds(); google.maps.event.addDomListener($scope.view.map, 'center_changed', getCenter); google.maps.event.addDomListener($scope.view.map, 'zoom_changed', getZoom); google.maps.event.addDomListener($scope.view.map, 'bounds_changed', getBounds); } function setMapPosition() { $scope.view.map.panTo($scope.view.currentPosition); $scope.$apply(); } function getZoom() { $scope.view.configuration.zoom = $scope.view.map.getZoom(); $scope.$apply(); } function getCenter() { $scope.view.currentCenter = $scope.view.map.getCenter(); } function getBounds() { $scope.view.currentBound = $scope.view.map.getBounds(); $scope.$apply(); } function loadKML() { var kmlLayer = new google.maps.KmlLayer({ url: 'https://ba3-angular-googlemaps.azurewebsites.net/testPoligon.kml', map: $scope.view.map }); } function loadKMZ() { var kmzLayer = new google.maps.KmlLayer({ url: 'https://ba3-angular-googlemaps.azurewebsites.net/testPoligon.kmz', map: $scope.view.map }); } }
})();
Simple GoogleMaps v3 API + angular.js demo - Script Codes
Simple GoogleMaps v3 API + angular.js demo - Script Codes
Home Page Home
Developer Batressc
Username batressc
Uploaded November 03, 2022
Rating 3
Size 2,591 Kb
Views 14,168
Do you need developer help for Simple GoogleMaps v3 API + angular.js demo?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Batressc (batressc) Script Codes
Name
Angular-Material - Full height md-list
Mantenimiento simple con Angular-Material y lodash
Directivas - Primera directiva
Directivas - Enlace de datos bidireccional
Test Vue.js
Directivas - Transclude
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!