Search Posts

Category: google-maps

Setting up a static navbar/info box over a Google Map

I have a web app where I’m plotting weather information on a Google Map using the API. Currently I’m just using markers, popup infoboxes etc. I want to set up a nav bar / big info box off to the left side. This will have a search tool, info about currently selected map object, and other global utilities for the app. I’m wondering about the best strategy to accomplish this. Should I do it through […]

Google maps autocomplete not working inside modal popup

I am using google maps api.I am trying to implement autocomplete address feature for input box.But the problem is in the page everything seems to work but the same is not working inside a modal popup. Here is the html <div class=”col-xs-5 col-sm-2 col-md-2″> <a href=”javascript:void(0)” data-ng-click=”addlocationpopup()”>+New Location</a> </div> <!–button which calls popup –> Here is the modal popup <div class=”modal right fade addlocation” id=”myModal_5″ tabindex=”-1″ role=”dialog” aria-labelledby=”myModalLabel2″ data-keyboard=”false”> <div class=”modal-dialog” role=”document”> <div class=”modal-content”> <div […]

Variable Scope in Google Maps API and Angular 1

So I have a Google Maps API event listener for on click the map. But I don’t think the variable scope is working. google.maps.event.addListener(map, ‘click’, function (event) { $scope.closeBox(); }); $scope.closeBox = function () { $scope.showBox = false; } If I have $scope.showBox = true on the map and click the map it doesn’t close. $scope.showBox is an ng-class that shows/hides the information box. Source: AngularJS

googleplace call of all inputs inside form

i want that googleplace directive call only for input in which i am typing when i change the value it always update the value of (endpoint) not the start point HTML <div class=”row”> <div class=”col-md-6″> <div class=”form-group”> <label class=”col-sm-4 control-label” for=””>Start Point</label> <div class=”col-sm-8″> <input type=”text” class=”form-control” ng-model=”Point.startpoint” googleplace name=”startpoint” placeholder=”Start Point”/> </div> </div> </div> </div> <div class=”row”> <div class=”col-md-6″> <div class=”form-group”> <label class=”col-sm-4 control-label” for=””>End Point</label> <div class=”col-sm-8″> <input type=”text” class=”form-control” ng-model=”Point.endpoints.endpoint0″ googleplace name=”endpoint0″ […]

How do I add a new button to the infowindow on the marker?

This JS code function initMap() { var uluru = {lat: -25.363, lng: 131.044}; var map = new google.maps.Map(document.getElementById(‘map’), { zoom: 4, center: uluru }); var contentString = ‘<div id=”content”>’+ ‘<div id=”siteNotice”>’+ ‘</div>’+ ‘<h1 id=”firstHeading” class=”firstHeading”>Uluru</h1>’+ ‘<div id=”bodyContent”>’+ ‘<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ‘ + ‘sandstone rock formation in the southern part of the ‘+ ‘Northern Territory, central Australia. It lies 335 km (208 mi) ‘ </p>’+ ‘<p>Attribution: Uluru, <a href=”″>’+ ‘</a> ‘+ […]

How to switch between street map to satellite map in Angular 4

I am Working in an Angular 4 application ,Here I would like to add a map view for that I have developed the map with street view by default . Now I want to add a option to the user that they can able to switch between street view to satellite view . HTML <div class=”container”> <agm-map [latitude]=”lat” [longitude]=”lng” [zoom]=”zoom”> <agm-marker [latitude]=”lat” [longitude]=”lng”> <agm-info-window> <strong>XYZ Company</strong> </agm-info-window> </agm-marker> </agm-map> </div> TypeScript export class ContactusComponent implements […]

Can’t remove marker Google Map

When I try to remove device’s marker they are removed successfully but when I try to remove the gateways of device it doesn’t work. What is expected is to have map without Marker. for(var cnt in devinfo) { for(cnt2 in gtwMarker){ console.log(gtwMarker[cnt2]); gtwMarker[cnt2].setMap(null); // does not work } console.log(devinfo[cnt]); devinfo[cnt].setMap(null); // works successfully } What I have from the beginning: And the result is: Source: AngularJS

Next Page »