angular country state map location with example and demo

angular country state map location with example and demo

In this post we will show you angular country state map location with example and demo , hear for angular country state map location with example and demo we will give you demo and example for implement.

you need to register your domain and get key from google developer console : https://console.developers.google.com

Hear is Git hub like for Download, Demo and for information(Read More), it will help you into development and implement for angular country state map location with example and demo . This link of git will give you document, instruction, installation and other information.

Read More Demo Download

Html for angular country state map location

this is html for Html for angular country state map location

<div ng-app="mapsApp" ng-controller="MapCtrl">
<input type="text" id="search_field" />
<div id="map"></div>
</div>

script for angular country state map location

this is script for Html for angular country state map location

ngular.module('mapsApp', []).controller('MapCtrl', function ($scope, $timeout) {
$scope.title = null;
$scope.lat = 40.6700;
$scope.lon = -73.9400;
$scope.country_selection = false;
$scope.zoomChangeRemarkerTimeout = null;
$scope.positionChangeRemarkerTimeout = null;

$scope.map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng($scope.lat, $scope.lon), // ny
mapTypeId: google.maps.MapTypeId.TERRAIN,
disableDefaultUI: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
});
$scope.center_marker = null;
$scope.geocoder = new google.maps.Geocoder();
// angular country state map location infoBox
$scope.infoBox = new InfoBox({
disableAutoPan: false,
pixelOffset: new google.maps.Size(-125, 25),
zIndex: null,
boxStyle: {
width: "200px"
},
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: true,
pane: "floatPane",
enableEventPropagation: false
});

$scope.createMapCenterMarker = function(){
var center = $scope.map.getCenter();
$scope.createMarker({
lat: center.lat(),
lon: center.lng()
});
};
// angular country state map location cleanupMarker
$scope.createMarker = function (data) {
if ($scope.marker) $scope.cleanupMarker();

$scope.marker = new google.maps.Marker({
map: $scope.map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
//fillColor: '#15C8E0',
fillColor: '#ff0000',
fillOpacity: 1,
strokeWeight: 2,
strokeColor: '#ffffff',
//scale: 8
scale: 6
},
position: new google.maps.LatLng(data.lat, data.lon),
title: data.title,
animation: google.maps.Animation.DROP
});
// angular country state map location showInfoBox
$timeout(function(){
if (typeof data['title'] !== 'undefined') {
$scope.showInfoBox(data.title);
}
else {
$scope.getLocationInfo(data.lat, data.lon, function(info){
$scope.showInfoBox(info);
});
}
}, 500);
};

$scope.showInfoBox = function(info){
$scope.infoBox.setContent('<a href="#" class="selectCityButton">' + info + '</a>');
$scope.infoBox.open($scope.map, $scope.marker);
$scope.infoBox.show();
};
// angular country state map location LatLng
$scope.getLocationInfo = function(lat, lon, callback){
var latlng = new google.maps.LatLng(lat, lon);
$scope.geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
for (i in results) {
if (results[i].types.indexOf('political') !== -1) {
if ($scope.map.zoom <= 6) {
if (results[i].types.indexOf('country') !== -1) {
callback(results[i].formatted_address);
break;
}
}
else {
callback(results[i].formatted_address);
break;
}
}
}
}
});
};

$scope.cleanupMarker = function(){
$scope.marker.setMap(null);
$scope.infoBox.hide();
};

google.maps.event.addListener($scope.map, 'dragstart', function () {
$scope.cleanupMarker();
});

google.maps.event.addListener($scope.map, 'dragend', function () {
$timeout.cancel($scope.positionChangeRemarkerTimeout);
$scope.positionChangeRemarkerTimeout = $timeout($scope.createMapCenterMarker, 300);
});

google.maps.event.addListener($scope.map, 'zoom_changed', function () {
$scope.country_selection = ($scope.map.zoom <= 6);
$timeout.cancel($scope.zoomChangeRemarkerTimeout);
$scope.zoomChangeRemarkerTimeout = $timeout($scope.createMapCenterMarker, 500);
});

$scope.autocomplete = new google.maps.places.Autocomplete(document.getElementById('search_field'), {
types: ['(regions)']
});

google.maps.event.addListener($scope.autocomplete, 'place_changed', function(){
var place = $scope.autocomplete.getPlace();
if (place.geometry) {
$scope.country_selection = (place.types.indexOf('country') !== -1);

$scope.map.panTo(place.geometry.location);
$scope.map.setZoom($scope.country_selection ? 5 : 10);
$scope.createMarker({
title: place.formatted_address,
lat: place.geometry.location.lat(),
lon: place.geometry.location.lng()
});

document.getElementById('search_field').value = '';
}
});

// Initial point
$scope.createMarker({
lat: $scope.lat,
lon: $scope.lon
});
});

NOTE  : you need to add your key in http://maps.googleapis.com javascript for Simple City and Country Selector With AngularJS and Google Maps.

YOU ALSO LIKE RELATED POSTS

Hope this code and post will helped you for implement angular country state map location with example and demo . if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve onlincode. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs onlincode.org