After following a tutorial demo regarding google map and angularjs directive, I have the sample code with:
HTML
<map-geo-location height="400" width="600"></map-geo-location>
And the directive JS:
function link(scope, elem, attrs) {
status = angular.element(document.getElementById('status'));
mapContainer = angular.element(document.getElementById('map'));
mapContainer.attr('style', 'height:' + scope.height +
'px;width:' + scope.width + 'px');
$window.navigator.geolocation.getCurrentPosition(mapLocation, geoError);
}
function mapLocation(pos) {
status.html('Found your location! Longitude: ' + pos.coords.longitude +
' Latitude: ' + pos.coords.latitude);
var latlng = new google.maps.LatLng(pos.coords.latitude,
pos.coords.longitude);
var options = {
zoom: 15,
center: latlng,
mapTypeControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(mapContainer[0], options);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"Your location"
});
}
return {
scope: {
height: '#',
width: '#'
},
link: link,
template: template
};
However, I noticed that, if I do NOT want to load current geoLocation and just want to load map with some given coordinates, the map is not loaded.
Why is that? Is it caused by any aync call? If so, could to address it?
Thanks a lot!
I figured it out, just remove the geo get location statement, and ensure the following is invoked directly inside the link() function.
Related
Can someone please guide me through the process of including and integrating javascript google maps api in angularjs project on webstorm. Generally I have done this by using simple html file, but when I try to include the same google maps api and code in an angularjs project, the view of maps is not rendered. Thanks, I'll be really greatefull for the help.
this is an example how to integrate google maps in your angularjs project
javascript:
angular.module('myApp', []).
directive('myMap', function() {
// directive link function
var link = function(scope, element, attrs) {
var map, infoWindow;
var markers = [];
// map config
var mapOptions = {
center: new google.maps.LatLng(50, 2),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
};
// init the map
function initMap() {
if (map === void 0) {
map = new google.maps.Map(element[0], mapOptions);
}
}
// place a marker
function setMarker(map, position, title, content) {
var marker;
var markerOptions = {
position: position,
map: map,
title: title,
icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png'
};
marker = new google.maps.Marker(markerOptions);
markers.push(marker); // add marker to array
google.maps.event.addListener(marker, 'click', function () {
// close window if not undefined
if (infoWindow !== void 0) {
infoWindow.close();
}
// create new window
var infoWindowOptions = {
content: content
};
infoWindow = new google.maps.InfoWindow(infoWindowOptions);
infoWindow.open(map, marker);
});
}
// show the map and place some markers
initMap();
setMarker(map, new google.maps.LatLng(51.508515, -0.125487), 'London', 'Just some content');
setMarker(map, new google.maps.LatLng(52.370216, 4.895168), 'Amsterdam', 'More content');
setMarker(map, new google.maps.LatLng(48.856614, 2.352222), 'Paris', 'Text here');
};
return {
restrict: 'A',
template: '<div id="gmaps"></div>',
replace: true,
link: link
};
});
html:
<div my-map=""></div>
css:
#gmaps {
width: 450px;
height: 450px;
}
i'm trying to use google map directive in my angularjs project heres the directive:
.directive("myMaps", function(){
return{
restrict:'E', //Element Type
template:'<div></div>', //Defining myApp div
replace:true, //Allowing replacing
link: function($scope, element, attributes){
$scope.title = attributes.title;
$scope.type = attributes.type;
alert('fdfd');
alert($scope.title +'ddddddd'+$scope.type);
//Initializing Coordinates
var myLatLng = new google.maps.LatLng($scope.title,$scope.type);
var mapOptions = {
center: myLatLng, //Center of our map based on LatLong Coordinates
zoom: 5, //How much we want to initialize our zoom in the map
//Map type, you can check them in APIs documentation
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Attaching our features & options to the map
var map = new google.maps.Map(document.getElementById(attributes.id),
mapOptions);
//Putting a marker on the center
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title:"My town"
});
marker.setMap(map); //Setting the marker up
}
};
})
it works good, but how i can call it inside a function to take new longitude and altitude??
Hi guys i'm working with this code below , but i don't know is is possible
and how i can do to add more one marker and set other DIV to show this position.
Anyone know what can i do or give me a tip
Its a cordova application on visual studio
angular.module('app', ['onsen']).
directive('myMap', function () {
// directive link function
var link = function (scope, element, attrs) {
var map, infoWindow;
var markers = [];
// map config
var mapOptions = {
center: new google.maps.LatLng(-29.3130754, -50.8542323),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
};
// init the map
function initMap() {
if (map === void 0) {
map = new google.maps.Map(element[0], mapOptions);
}
}
// place a marker
function setMarker(map, position, title, content) {
var marker;
var markerOptions = {
position: position,
map: map,
title: title,
icon: 'images/Maps/blue-dot.png'
};
marker = new google.maps.Marker(markerOptions);
markers.push(marker); // add marker to array
google.maps.event.addListener(marker, 'click', function () {
// close window if not undefined
if (infoWindow !== void 0) {
infoWindow.close();
}
// create new window
var infoWindowOptions = {
content: content
};
infoWindow = new google.maps.InfoWindow(infoWindowOptions);
infoWindow.open(map, marker);
});
}
// show the map and place some markers
initMap();
setMarker(map, new google.maps.LatLng(-29.3130754, -50.8542323), 'adress');
};
return {
restrict: 'A',
template: '<div id="gmaps"></div>',
replace: true,
link: link
};
});
Here is a way to add multiple markers on a google maps , u just need an array which contains your required latitude longitude values .
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
var myLatLng1={lat: -25.163, lng: 131.644};
var marker2 = new google.maps.Marker({
position: myLatLng1,
map: map,
title: 'Hello World!'
});
you could also have an array which contains the array element conataining the latutude and longitude values .
for (var i = 0; i < locations.length; i++) { //Your location contains the lat long position
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
title: 'Hello World!'
});
I am trying to have an input field that when submitted adds a marker to my Google Map. Right now when I submit the field it is creating the object but the marker is not being displayed. Right now I am able to get a location to show up if it is hard coded in but not when I add a new one. (I know that the view right now is only for the hard coded one, I have that so the current code is working)
Here is my code:
My View:
<form>
<input type="number" class="" ng-model="marker.markerLat" required="">
<input type="number" class="" ng-model="marker.markerLng" required="">
<button class="button" ng-click="addMarker(marker)">Add</button>
</form>
<google-map center="map.center" zoom="map.zoom">
<marker coords="marker.coords" options="marker.options" idkey="marker.id" >
</marker>
</google-map>
My Controller:
//Default location
$scope.map = {
center: {
latitude: 32.7833,
longitude: -79.9333
},
zoom: 11
}
$scope.options = {scrollwheel: true};
$scope.markers = [];
$scope.addMarker = function (marker) {
$scope.markers.push({
latitude: parseFloat($scope.markerLat),
longitude: parseFloat($scope.markerLng)
});
console.log('Maker add: ' + $scope.markers);
$scope.markerLat ="";
$scope.markerLng ="";
};
$scope.marker = {
id:0,
coords: {
latitude: 32.7833,
longitude: -79.9333
}
}
I would advice you to create a custom angular directive for your map.
But anyway, angular is not enough to get what you want working. You have to create google.maps objects. And set the map property of your marker to the map you have created.
Here is a little example :
.directive('map', function () {
return {
template: '<div></div>',
restrict: 'EA',
replace: true,
link: function (scope, element) {
scope.markers = [];
scope.map = new google.maps.Map(element[0], {
center: new google.maps.LatLng(32.7833, -79.9333),
zoom: 11
});
scope.addMarker = function (lat, lnt) {
var marker = new google.maps.Marker({
map: scope.map,
position: new google.maps.LatLng(lat, lng)
});
scope.markers.push(marker);
};
}
});
So you simply have to call the addMarker function with a lat and lng parameter. Use angular events to communicate between your controller and directive. More info about the methods here
I have found example if someone need however I need to get first coordinates from address so later can adjust it. Someone knows how to do it?
var geocoder = new google.maps.Geocoder();
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
function initialize() {
var latLng = new google.maps.LatLng(1.54232,-1.4353423);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Point A',
map: map,
draggable: true
});
// Update current position info.
updateMarkerPosition(latLng);
geocodePosition(latLng);
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function() {
updateMarkerAddress('Dragging...');
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerStatus('Dragging...');
updateMarkerPosition(marker.getPosition());
});
google.maps.event.addListener(marker, 'dragend', function() {
updateMarkerStatus('Drag ended');
geocodePosition(marker.getPosition());
});
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
if your browser support the geolocation you want get coordinate with this function :
navigator.geolocation.getCurrentPosition(function(position) {
geolocationCoordinates = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
//position.coords.latitude = latitude coordonates;
//position.coords.longitude = longitude coordonates;
}
after, you can create a new map whith this coordonates.
This code is functional with all browser supporting the geolocation.