Angular City-Country Selector With Google Maps

Angular City-Country Selector With Google Maps

In this post we will show you Angular City-Country SelectorWith AngularJS and Google Maps, hear for Angular City-Country Selector With AngularJS and Google Maps we will give you demo and example for implement.

you need to register your domain and get key from google developer console : google developer console

Hear is Git hub like for Download, Demo and for information(Read More), it will help you into development and implement for SAngular City-Country Selector With AngularJS and Google Maps. This link of git will give you document, instruction, installation and other information. Make use of Google Places API to create a simple city-country selector on your AngularJS app.

Read More Demo Download

Html for Angular City-Country Selector With AngularJS

this is html for Html for Angular City-Country Selector With AngularJS

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

script for Angular City-Country Selector With AngularJS

this is script for Html for Angular City-Country Selector With AngularJS

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();

$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()
});
};

$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
});

$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();
};

$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;
}
}
}
}
});
};
// Angular City-Country Selector for set map
$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);
});
// Angular City-Country Selector for autocomplete
$scope.autocomplete = new google.maps.places.Autocomplete(document.getElementById('search_field'), {
types: ['(regions)']
});
// Angular City-Country Selector for addListener
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 Angular City-Country Selector With AngularJS and Google Maps.

YOU ALSO LIKE RELATED POSTS

Hope this code and post will helped you for implement Angular City-Country Selector With AngularJS and Google Maps. 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