I am trying to show a google map on my AngularJs app. I used below code and when run, map not displayed. Just a blank page. No errors on browser console.
Here is the Fiddle
HTML Code
<div class="row">
<div id="google-maps"></div>
</div>
Controller Code
function initialize() {
var mapCanvas = document.getElementById('google-maps');
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(mapCanvas, mapOptions);
}
$timeout(function(){
initialize();
}, 100);
Also I have this code in index.html file
<script src="https://maps.googleapis.com/maps/api/js?key=my_key&libraries=places"></script>
Try calling initialize() inside document.ready:
$(initialize);
Also give a width and height to your container div.
Working Fiddle
Related
I have created an angularJS directive to call the google maps api. The directive looks like that:
angular.module('sbAdminApp')
.directive('allWash', function () {
return {
templateUrl: 'static/app/scripts/directives/googleMap/allWash.html',
restrict: 'E',
replace: true,
controller: function ($scope, WashService) {
$scope.initMap = new function () {
var locations = [
['Bondi Beach', 52.229676, 21.012228999999934, 4],
['Coogee Beach', 52.14276459999999, 21.02135450000003, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
}
}
});
The google also demands to create a key which I actually created and put it into the index.html file, like that:
<script src="http://maps.google.com/maps/api/js?key=AIzaSyD5bgIqM-C7WVWkaGDa0AE2luY-dbF6nBA"
async defer
type="text/javascript"></script>
My html file (allWash.html file which is connected to the directive) looks like:
<script type="text/ng-template" id="allWash.html">
<div>
<div id="map" style="width: 600px; height: 600px;" ng-init="initMap()"></div>
</div>
</script>
When I want to call the diretive at diffrent html page I do <all-wash></all-wash>
The whole code creates a fail:
I think it is connected to the google key which I put into index.html file, but I'm not sure so that I don't know how to solve this issue.
You may refer with this thread. This error might happen if you load the script before the DOM was loaded. Try to move the script to the end of body and check if it works.
Also, it might be due to the map div not being rendered before the javascript runs that needs to access it. Check it here. "You should put your initialization code inside an onload function or at the bottom of your HTML file, just before the tag, so the DOM is completely rendered before it executes (note that the second option is more sensitive to invalid HTML)."
I am using Leaflet to display map in my Hybrid app. In the map I have multiple markers. I want to redirect to next page when user click on the marker and also display details regarding the marker.
Below is my JSON data from where I am getting the lat and long for the marker.
Below is my JSON data
[{"store_id":"1","store_name":"Wall Mart","store_address":"Forum Mall, Kormangala","store_latitude":"12.929328","store_longitude":" 77.605117","store_phone":"9848484848"},
{"store_id":"2","store_name":"Lifestyle","store_address":"K R pooram","store_latitude":"12.961398","store_longitude":"77.553128","store_phone":"858585858"},
{"store_id":"3","store_name":"More","store_address":"Katriguppe","store_latitude":"12.989943","store_longitude":"77.689106","store_phone":"8796543210"}]
HTML Code
<div id="map" style="width: 100%; height: 100%"></div>
Controller
var map = L.map('map', {
center: new L.LatLng(12.96340871,77.59699345),
zoom: 12,
maxZoom: 18,
minZoom: 6
});
mapLink =
'OpenStreetMap';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(map);
$http.get('json.php').success(function(data) {
// Loop through the 'locations' and place markers on the map
console.log(JSON.stringify(data));
angular.forEach(data, function(location, key){
// alert(location.store_name);
var marker = L.marker([location.store_latitude, location.store_longitude]).addTo(map);
});
});
Thanks
You should use marker's click event to bind some ridirect functionality. The routing manipulation can be achivied of $location service in angular:
angular.forEach(data, function(location, key){
var marker = L.marker([location.store_latitude, location.store_longitude]).addTo(map);
marker.click(function(e) {
$location.path('/some_route');
})
});
Hi guys i have problems trying to run a google map example into a routed view, map is not displayed and no errors are displayed, i read some thing about initialize in a directive, i don't know how to do it, any help will be very apreciated:
app.conf
app.controller( 'viewCtrl', function( $http, $location ) {
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
} );
In my view i have:
<div id="map-canvas"></div>
It worked into my view adding a size to div:
<div id="map-canvas" style="height:200px;width:200px;"></div>
Sry for this questión and hoppe thiscan help to others
What happened past weeks i don't know if google messed things up again. My map stopped working.
I transferred the app Angular for routes. When the contact page loads, initializeMap function called.
I got new browser api key from google console which is not like old. I enabled Javascript Map Api. I entered my URLs in credential.
Sometimes it gives error invalidkey*** but only sometimes.
It works on my domain if i put everything in one single file.
It also works on codepen. I don't know why? There is no error to debug this thing. My beloved javascript.
http://codepen.io/emrahatilkan/pen/bVwzrR
Edit: This is about angular definitely.
Google Map Link in index.html:
<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY"></script>
My URL: index.html/#/contact
I don't know if it is relevant but contact.html is inside pages/ folder.
My Code is in main.js:
function initializeMap() {
console.log('init map'); //this outputs to console
var mapOptions = {
center: { lat: 39.7944417, lng: 30.4935026 },
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: false,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Some Title'
});
var infowindow = new google.maps.InfoWindow({
content: '<h5>Some Title</h5>'
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}
I'm having trouble rendering Google Maps (V3) with Backbone.js.
It fails to load when I navigate to map view (/#/map); however, the map somehow loads perfectly fine when I hit refresh in that map view url.
Relevant Code Below:
<body>
Home
<div id="content"></div>
<script type="text/template" id="home_template">
Go !
</script>
<script type="text/template" id="map_template">
<div id="map"></div>
</script>
</body>
var MapView = Backbone.View.extend({
el: '#content',
render: function() {
var template = _.template($('#map_template').html());
var init = function() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', init);
this.$el.html(template);
}
});
var Router = Backbone.Router.extend({
routes: {
"" : "home",
"map" : "map"
}
});
var router = new Router;
var homeView = new HomeView();
router.on('route:home', function() {
homeView.render();
});
var mapView = new MapView();
router.on('route:map', function() {
mapView.render();
});
Backbone.history.start();
It seems that 'something' is missing when I'm switching views between home and map, but I'm not sure what that 'something' is. I believe I have combed through relevant questions, but cannot find the missing point.
Any help would be much appreciated.
Thank you!
(P.S The Mapview part is taken from : https://developers.google.com/maps/documentation/javascript/tutorial
)
Problem is here I guess
google.maps.event.addDomListener(window, 'load', init);
you are calling init on window.load, but when you switch between view, it will not refresh the page, and window.load never get triggered. I guess you need to change the way init happening, I could be able to suggest better if I have more information about DOM structure of the page.