I am currently working on integrating Angular with Google Maps. I need to add some markers along with location search functionality. Additionally, I am including location information in a form. When the addMarker button is clicked, a form opens and the map size is reduced by 50%.
After reducing the map size by 50%, when searching for a location, the marker is displayed for that location, but it may be hidden in the map due to the change in size.
<div ng-style="{ 'width' : width + '%' , 'height': height + '%' }" id="IndiaMap">
<ui-gmap-google-map center='map.center' zoom='map.zoom' control='map.control' id="map-canvas" events="map.events">
<ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" events="markerEvents" icon="'icon'" fit="true">
</ui-gmap-markers>
</ui-gmap-google-map>
</div>
Controller
$scope.addLandMarkForm=function(){
$scope.markers='';
document.getElementById('IndiaMap').className='col-md-6';
$scope.map.zoom=5;
$scope.width = 50;
$scope.height= 50;
};
$scope.closeForm will close the form and map will return into origin form.
$scope.closeForm=function () {
document.getElementById('IndiaMap').className='col-md-12';
$scope.width = 100;
$scope.height= 100;
$scope.map.zoom=5;
};
Search Location
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
google.maps.event.addListener(searchBox, 'places_changed', function(){
var places = searchBox.getPlaces()
var marker_search = {
id:store_index,
coords: {
latitude: places[0].geometry.location.lat(),
longitude: places[0].geometry.location.lng()
},
$scope.latitude=marker_search.latitude;
$scope.longitude=marker_search.longitude;
$scope.map.center =
{
latitude: marker_search.latitude,
longitude: marker_search.longitude
};
$scope.map.zoom=17;
$scope.$apply();
}