Angular Google Maps directive example

Prepare assets

bower init
bower i -S angular lodash angular-simple-logger angular-google-maps

File `index.html`:

<!doctype html>
<html lang="en" ng-app="GMapApp">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Google Maps Test</title>
	<link rel="stylesheet" href="/css/style.css">
</head>
<body ng-controller="MainCtrl">

<ui-gmap-google-map center='map.center' zoom='map.zoom'>
	<ui-gmap-markers models="markers" coords="'self'"
					 options="markerOptions.options"
					 events="markerOptions.events">

		<ui-gmap-windows show="show">
			<div ng-non-bindable>
				<strong>Address:</strong> {{title}}
			</div>
		</ui-gmap-windows>

	</ui-gmap-markers>
</ui-gmap-google-map>

<script src="/bower_components/lodash/dist/lodash.min.js"></script>
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/angular-simple-logger/dist/angular-simple-logger.min.js"></script>
<script src="/bower_components/angular-google-maps/dist/angular-google-maps.min.js"></script>
<script src="/js/app.js"></script>
</body>
</html>

File `app.js`:

angular.module('GMapApp', ['uiGmapgoogle-maps'])
	.config(function (uiGmapGoogleMapApiProvider) {
		uiGmapGoogleMapApiProvider.configure({
			key: 'YOUR_API_KEY',
			language: 'ru-RU'
			// libraries: 'geometry,places,visualization'
		});
	})
	.controller('MainCtrl', function ($scope, uiGmapGoogleMapApi) {
		$scope.map = {
			center: {
				latitude: 41.319316,
				longitude: 69.234390
			},
			zoom: 12
		};

		$scope.markers = [
			{
				id: 0,
				latitude: 41.319316,
				longitude: 69.283226,
				title: 'Alay Market',
				show: false
			},
			{
				id: 1,
				latitude: 41.328809,
				longitude: 69.263402,
				title: 'Shaykhantakhur st.',
				show: false
			}
		];

		$scope.markerOptions = {
			options: {
				icon: '/images/pin-pink-flag.png' // path to custom marker
			},
			events: {
			  // use either mouseover/mouseout OR click, not both
				mouseover: function (gmMarker, eventName, model) {
					console.log('eventName=', eventName, 'model=', model);
					model.show = true;
				},
				mouseout: function (gmMarker, eventName, model) {
					console.log('eventName=', eventName, 'model=', model);
					model.show = false;
				},
				click: function (gmMarker, eventName, model) {
					console.log('eventName=', eventName, 'model=', model);
					model.show = !model.show;
				}
			}
		};

		uiGmapGoogleMapApi.then(function (maps) {
			console.log('maps=', maps);
			// google maps sdk is ready to use...
		});
	});

File `style.css`:

.angular-google-map-container {
	height: 600px;
	width: 1000px;
}

Test with http server (optional)

npm i -g http-server
cd my-gmap-app-dir
http-server

umidjons/angular-google-maps-example.md

Angular Google Maps directive example

Prepare assets

File index.html:

File app.js:

File style.css:

Test with http server (optional)

File `index.html`:

File `app.js`:

File `style.css`: