Blank screen Google Maps API V3 - maps

As title say, i just have blank screen when trying to add the geocoding Function to my Map. If i leave the map alone with the marker it works fine. But in the moment i add the geocode Function it just send me a Blank Screen. Here is the code :
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API v3: esempio base</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
<script type="text/javascript">
var initialize = function() {
var latlng = new google.maps.LatLng(42.745334,12.738430);
var options = { zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), options);
var marker = new google.maps.Marker({ position: latlng,
map: map,
title: 'W Le DONNE' });
var createMap = function() {
searchAddress();
var address = document.getElementById("address").value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode( {'address': address}, function(results,status) {
if (status == google.maps.GeocoderStatus.OK) {
var options = {
zoom: 12,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
else {
alert("Problema nella ricerca dell'indirizzo: " + status);
}
});
}
var searchAddress = function(){
document.getElementById("submit").onclick = function() {
createMap();
}
}}
window.onload = createMap;
</script>
</head>
<body style="margin:0; padding:0;">
<div>
<input id="address" type="textbox" value="Viale Franco Angeli, 5 - Roma">
<input id="submit" type="button" value="trova indirizzo sulla mappa">
</div>
<div id="map" style="width:100%; height:100%"></div>
</body>
</html>

You have the wrong URL. V3 is http://maps.googleapis.com/maps/api/js?

Related

Getting __ is not a function invalidvalue error while trying googlemaps with angularjs

I want to display map in my angularJS page like below.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/angular.min.js"></script>
</head>
<body ng-app="abc">
<div id="controller" ng-controller="def as ctrl">
<div id="googlemap" style="height:100%; width:100%"></div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=displayMap"></script>
</body>
</html>
And my scripts.js file is as follows.
var mainApp = angular.module('abc',[]);
mainApp.controller('def', function($scope,$http) {
this.displayMap=function() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.0000, -98.0000),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
$scope.googlemap = new google.maps.Map(document.getElementById('googlemap'), mapOptions);
}
}
I am getting displayMap is not a function InvalidValueError message. How can it be resolved?
displayMap function passed via callback parameter is expected to be visible from the global scope but in the provided example it is only accessible in the scope of def controller.
In Angular app instead of invoking displayMap function via callback parameter you could invoke it from the contoller like this:
google.maps.event.addDomListener(window, 'load', displayMap);
Example
angular.module('mapApp', [])
.controller("mapCtrl", function ($scope, $http) {
var displayMap = function (data) {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(48.209500, 16.370691),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_div"), mapOptions);
};
google.maps.event.addDomListener(window, 'load', displayMap);
});
#map_div {
height: 280px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://maps.google.com/maps/api/js"></script>
<script src="app.js"></script>
<div ng-app="mapApp" ng-controller="mapCtrl">
<div id="map_div" ></div>
</div>

google map application passing latitude and longitude so that the user can then navigate to the place

I am a new to Ionic. I have done some google search but I am still a bit confused.
From my android Ionic app I would like to launch the google map application passing latitude and longitude so that the user can then navigate to the place.
Is is possible? Any help is very appreciated.
Thanks in advance,
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter" ng-controller="main">
<div ui-view>
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Login App</h1>
</ion-header-bar>
<ion-content>
<div>
</div>
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Email" ng-model="data.email">
</label>
<label class="item item-input">
<input type="password" placeholder="Password" ng-model="data.password">
</label>
</div>
<button class="button button-block button-calm" ng-click="postLogin()">Login</button>
</ion-content>
</ion-pane>
</div>
</body>
</html>
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
var app = angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
}).config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'index.html',
controller: 'main'
})
.state('userPositionInMap', {
url: '/userPositionInMap',
templateUrl: 'map.html',
controller: 'MapController'
})
$urlRouterProvider.otherwise('/login');
});
app.controller('main', function ($scope,$http,$stateParams,$ionicPopup,$location)
{
$scope.data = {};
$scope.postLogin = function ()
{
var data =
{
email: $scope.data.email,
password: $scope.data.password,
latitude,
langitude
};
$http.post("http://localhost/authproject/public/api/auth/login", data)
.then(
function(response){
// success callback
console.log('success');
data.latitude=response.latitude;
data.langitude=response.langitude;
$location.path("/userPositionInMap");
},
function(response){
// failure callback
console.log('error');
var alertPopup = $ionicPopup.alert({
title: 'Login failed!',
template: 'Please check your credentials!'
});
}
);
}
});
app.controller('MapController', function ($scope,$stateParams)
{
});
map.html
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBsiDiIzQjg7U9JYPDVl8hnfZ7MwDcHDHg&signed_in=true&libraries=places&callback=initMap" async defer></script>
<script>
function initMap() {
var position = new google.maps.LatLng({lat: 48.85661400000001 , lng: 2.3522220000000177 });
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 48.85661400000001 , lng: 2.3522220000000177 },
zoom: 15
});
var marker = new google.maps.Marker({
position: position,
map: map,
title: ""
});
//var input = document.getElementById('address');
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var types = document.getElementById('type-selector');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);
var autocomplete = new google.maps.places.Autocomplete(myLatlng);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map,
//anchorPoint: new google.maps.Point(0, -29)
});
autocomplete.addListener('place_changed', function () {
marker.setVisible(false);
var place = autocomplete.getPlace();
if (place != undefined) {
var lat = place.geometry.location.lat();
var lng = place.geometry.location.lng();
console.log(place.geometry.location.toString());
$('#lat').val(lat);
$('#lng').val(lng);
}
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(16);
}
marker.setPosition(place.geometry.location);
marker.setVisible(true);
});
}
</script>
<ion-view view-title="Map">
<ion-content class="padding">
<div class="list card">
<div class="item item-divider">Map</div>
<div class="item item-body">
<div id="map" style="width:100%; height:100%;"></div>
</div>
</div>
</ion-content>
</ion-view>
I have a rough idea of what you are tying to achieve. You can wrap your code for the map in a directive, then via the link function you can access $rootScope which you can use to hold the lat and lng from the database. Here is the doc for directives: https://docs.angularjs.org/guide/directive
Try to use Angular-maps : https://angular-maps.com/
#Component({
selector: 'app-root',
styles: [`
agm-map {
height: 300px;
}
`],
template: `
<agm-map [latitude]="lat" [longitude]="lng"></agm-map>
`
})
export class AppComponent {
lat: number = 51.678418;
lng: number = 7.809007;
}

Angularjs + Yandex Maps

I'm trying to use Yandex Maps with this AngularJS module.
Here they have demonstrations, and here's my code:
index.html
<!DOCTYPE html>
<html lang="ru" xmlns:vml="urn:schemas-microsoft-com:vml" ng-app="myApp" ng-controller="myController">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1" />
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="style.css">
<script src="angular.min.js"></script>
<script src="ya-map-2.1.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<div id="map" class="w3-col s10 w3-dark w3-border">
<!--
<ya-map ya-zoom="8" ya-center="[37.64,55.76]" style="width:400px;height:500px;"></ya-map>
-->
</div>
</body>
</html>
script.js
console.log("script starts");
var myApp = angular
.module('myApp', ['yaMap'])
.controller("myController", function ($scope) {
console.log("In the controller");
var _map;
$scope.afterMapInit = function (map) {
_map = map;
};
$scope.del = function () {
_map.destroy();
};
console.log("After $scope ops");
$scope.initialize = function () {
var mapOptions = {
center: [50.5, 30.5],
zoom: 8
};
ymaps.ready(function () {
$scope.map = new ymaps.Map("map", mapOptions);
})
}
});
style.css
body {
background-color: #fff;
margin: 40px;
}
#body {
margin: 0 15px 0 15px;
}
#frmMain {
width: 100%;
height: 100%;
}
Please, if you know why I can't load the map and what's wrong with that code, (I suppose it's all wrong though), tell me about it!
I'm total novice in AngularJS and Yandex Maps, so, it may appear a silly question for you, but I cannot find anything useful on the Internet.
Promblem here in style for non-standard tag ya-map. By default browser set it display property to "inline", so without text element collapse to width:0, height:0.
Also, you not use any functions declared in controller.
You can see samples in Demo Page
var myApp = angular
.module('myApp', ['yaMap'])
.controller("myController", function($scope) {
var _map;
$scope.afterMapInit = function(map) {
_map = map;
};
$scope.del = function() {
_map.destroy();
};
});
ya-map {
display: block;
width: 400px;
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//rawgit.com/tulov/angular-yandex-map/master/ya-map-2.1.min.js"></script>
<div id="map" class="w3-col s10 w3-dark w3-border" ng-app="myApp" ng-controller="myController">
<ya-map ya-zoom="8" ya-center="[37.64,55.76]" ya-after-init="afterMapInit($target)"></ya-map>
<button ng-click="del()">Удалить</button>
</div>

how to create context menu when right clicking on marker on a map using angular-leaflet-directive

I am new to angular-leaflet-directive.
I want to have a context menu when i right click on a marker.
I couldn't find any examples in angular way.
Can anyone please guide to achieve it.
Is that functionality exists in angular-leaflet-directive ?, because I couldn't find anything about in the documentation.
first download required files for angular context menu from this link
here is the example,
<!DOCTYPE html>
<html ng-app="demoapp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
<script src="http://tombatossals.github.io/angular-leaflet-directive/dist/angular-leaflet-directive.min.js"></script>
<script src=" leaflet.contextmenu-src"></script>
<link rel="stylesheet" href="leaflet.contextmenu.css" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />
<script>
var app = angular.module("demoapp", ["leaflet-directive"]);
app.controller('MarkersSimpleController', ['$scope', function($scope) {
$scope.showCoordinates = function(e) {
alert(e.latlng);
}
var mainMarker = {
lat: 51,
lng: 0,
focus: true,
draggable: true,
message: "hey marker",
contextmenu: true,
contextmenuWidth: 140,
contextmenuItems: [{
text: 'Show coordinates',
callback: $scope.showCoordinates
}]
};
angular.extend($scope, {
london: {
lat: 51.505,
lng: -0.09,
zoom: 8
},
markers: {
mainMarker: angular.copy(mainMarker)
},
position: {
lat: 51,
lng: 0
},
events: { // or just {} //all events
markers: {
enable: ['dragend']
//logic: 'emit'
}
}
});
$scope.$on("leafletDirectiveMarker.dragend", function(event, args) {
$scope.position.lat = args.model.lat;
$scope.position.lng = args.model.lng;
});
}]);
</script>
</head>
<body ng-controller="MarkersSimpleController">
<!-- <leaflet lf-center="london" markers="markers" height="480px" width="100%"></leaflet> EVENTS WILL STILL FIRE but all will for each directive-->
<!-- NOTICE events attribute is optional it is more for options in whitelisting (enable), blacklisting (disable), and logic (emit or broadcast) -->
<leaflet lf-center="london" event-broadcast="events" markers="markers" height="480px" width="100%"></leaflet>
<h1>Markers simple example</h1>
<p>Initial marker position (lat/lng): <strong ng-bind="markers.mainMarker.lat"></strong> / <strong ng-bind="markers.mainMarker.lng"></strong></p>
<p>Actual marker position (lat/lng): <strong ng-bind="position.lat"></strong> / <strong ng-bind="position.lng"></strong></p>
</p>
</body>
</html>
Plunker link for the same

Angular Google Maps $scope issue

I'm trying to learn angular, and using Angular-Google-Maps with Angular Seed.
I'm just trying to get the map to show up, but I don't think it's receiving the latitude, longitude and zoom parameters, and thus nothing is there. I am not showing any errors in the web developer inspector in Chrome.
I do believe the issue is in adding this
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
To my scope like the angular-google-maps documentation reads.
If I skip the above instruction and do this in my index.html file instead, it works.
<ui-gmap-google-map center='{ latitude: 45, longitude: -73 }' zoom='zoom: 8'></ui-gmap-google-map>
This is my app.js file:
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.view3',
'myApp.version',
'uiGmapgoogle-maps'
])
.controller('mapCtrl', function($scope, uiGmapGoogleMapApi){
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
})
.config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
This is my index.html file:
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Project R</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="app.css">
</head>
<body>
<ui-gmap-google-map id="map-container" center='map.center' zoom='map.zoom'></ui-gmap-google-map>
<ul class="menu">
<li>Add Memory</li>
<li>Profile</li>
<li>Search</li>
</ul>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="view3/view3.js"></script>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
<script src='bower_components/lodash/dist/lodash.min.js'></script>
<script src='bower_components/angular-google-maps/dist/angular-google-maps.min.js'></script>
</body>
</html>
my app.css file includes these styles:
#map-container{
height:400px;
width:100%;
position: absolute;
z-index: -1;
left:0;
top:0;
}
.ng-isolate-scope{
height:400px;
width:100%;
}
.angular-google-map{
height:400px;
width:100%;
}
.angular-google-map-container{
position: absolute;
height:400px;
width:100%;
}
It does not look like you declared ng-app or ng-controller in your html. Try the below at the beginning of your code (and obviously close out that div wherever you want that controller's scope to end):
<body ng-app="myApp">
<div ng-controller="mapCtrl">
<ui-gmap-google-map id="map-container" center='map.center' zoom='map.zoom'></ui-gmap-google-map>
/**
* itSimpleGoogleMap Module
*
* Just a google maps api wrapper
*/
(function(){
'use strict';
angular.module('itSimpleGoogleMap', [])
.directive('itSimpleGoogleMap', function($compile, $timeout){
// Runs during compile
var _currentMarkers = [];
var _overlays = [];
var newdiv = document.createElement('div');
newdiv.style.width = "100%";
newdiv.style.height = "100%";
var map = new google.maps.Map(newdiv, {
center: {lat: 41.90, lng: -87.65},
zoom: 10,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
return {
// name: '',
// priority: 1,
// terminal: true,
scope: {
markers:'=',
overlays:'=',
triggerResize:'='
}, // {} = isolate, true = child, false/undefined = no change
// controller: function(scope, $element, $attrs, $transclude) {},
// require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
// restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
// template: '',
// templateUrl: '',
// replace: true,
// transclude: true,
// compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
link: function(scope, iElm) {
iElm[0].appendChild(newdiv);
_.each(_currentMarkers, function(marker){
marker.setMap(null);
})
_.each(_overlays, function(overlay){
overlay.setMap(null);
})
google.maps.event.trigger(map, 'resize');
scope.$watch('triggerResize', function(){
google.maps.event.trigger(map, 'resize');
});
$timeout(function(){
var mapOptions = {
center: {lat: 41.90, lng: -87.65},
zoom: 10
};
// scope.$watchCollection('options', function(){
// if(!scope.options || !map){
// return ;
// }
// map.setCenter({lat:scope.options.center.lat,lng:scope.options.center.lng});
// });
scope.$watch('overlays', function(){
if(!scope.overlays || !map){
return ;
}
_.forEach(_overlays, function(curOverlay){
curOverlay.setMap(null);
});
_.forEach(scope.overlays, function(overlayData){
var newOverlay = new google.maps.KmlLayer({
url: overlayData,
map:map
});
_overlays.push(newOverlay);
});
});
scope.$watchCollection('markers', function(){
if(!scope.markers || !scope.markers[0] || !scope.markers[0].coords.latitude)
{
return;
}
_.forEach(_currentMarkers, function(curMarker){
curMarker.setMap(null);
google.maps.event.clearInstanceListeners(curMarker);
});
_currentMarkers = [];
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
if(scope.markers.length==0){
map.setCenter({lat: 41.90, lng: -87.65});
return;
}
_.forEach(scope.markers, function(markerData){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(markerData.coords.latitude,markerData.coords.longitude),
map: map,
icon:markerData.icon
// title:markerData.data['Growing Site Name'].answer
});
bounds.extend(marker.position);
var infoWindowElement;
$compile(markerData.infoWindow)(scope, function(cloneElm){
infoWindowElement = cloneElm[0];
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
infowindow.setContent(infoWindowElement);
infowindow.open(map,marker);
});
_currentMarkers.push(marker);
});
map.fitBounds(bounds);
});
},100)
}
};
});
})();
Usage would be something like:
<it-simple-google-map
overlays="model.mapOpts.overlays"
markers="model.mapOpts.markers"
trigger-resize="resizeMap">
</it-simple-google-map>
In my implementation here I'm actually only ever creating 1 map object and just appending it wherever this directive is found, so this can't work with more than one on screen but was an optimization that was good for my project. If you move the creation of the map object inside the link function then you'd get one created every time the directive is encountered for compiling.
The trigger-resize is a bit of a hack to make a call on the maps function for resizing itself when the directive is being re-used with different container sizes on different pages.
Just noticed I also only had this deal with taking a set of markers and then fitting to bounds as the means to set the location but if you're interested in building on this let me know and can help add the parts to deal with center/zoom appropriately.

Resources