I am trying to add a basic google maps script to add a googlemap on a #map-canvas div. I’ve tried adding the below code to the controller on tab.load, just before the #map-canvas div in a and in a separate map.js file. I am already loading the google maps api js script and there are no errors.
var madison = new google.maps.LatLng(43.073052, -89.401230);
var minneapolis = new google.maps.LatLng(44.983334, -93.266670);
var map;
function initialize() {
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(43.073052, -89.401230),
scrollwheel: false
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: false,
suppressInfoWindows: true
});
directionsDisplay.setMap(map);
var request = {
origin: madison,
destination: minneapolis,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
directionsDisplay1 = new google.maps.DirectionsRenderer({
suppressMarkers: false,
suppressInfoWindows: true
});
directionsDisplay1.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
I have successfully implemented the starter map example with some more enhancements (actually have added markers of locations which come from server as json).
But the problem Now I am facing is when I tried the same examples by putting this <div id="map"> in a new html file for rendering it in <ng-view></ng-view>. It did not initialize the map.
This part did not initialize google.maps.event.addDomListener(window, 'load', initialize); the initialize() function in MapCtrl.
What’s the best way to go ? I already saw angular-google-maps but did not like it as why to add so many scripts.
I have successfully implemented it in using <ng-view></ng-view>. But the problem in my case, seems to be very strange.
I did not have anchor tag in my deisgn <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>, that is why map is not loading. I tested it by adding that tag and everything works fine. Also, When I removed this tag in the experiment using I created, there also it did not worked.
So, Now I am solved with this problem, now next problem I have now is that when I go to next view and come back on map view, map did not load up now.
I will make a plunker to show what I am saying, if you did not get it. Sorry if I am did not read any concept of angular or ionic.
How did you end up solving the problem of the initialize function not being executed? (domlistener not being hit). I can’t even get my map to initialize due to the function never being called when i hit my view.
At Last I implemented the angular-google map directive. This is a custom directive www.angular-google-maps.org you can use that it works perfectly fine.
Hey @gaurav, I’m trying to use www.angular-google-maps.org and everything is working… but I can’t drag the map around!
I already put “draggable: true” inside the options.
Did you hit this problem too?
I strongly recommend using LeafletJS and angular-leaflet-directive in combination with the Google Maps plugin. It’s awesome, powerful and very easy to use.
The app I’m building at this moment utilizes LeafletJS with support for offline maps (tiles downloaded from OpenStreetMaps or Google Maps Street HD).
Hello @antoniogiungato,
Please try using like this <google-map draggable='true'></google-map> inside the google-map. I think you are trying it setting in javascript file. I am not sure about that, as I used it like this given on api page http://angular-google-maps.org/api
I am currently using google maps - and all is well with it. However am interested to try Leaflet as have heard only good things about it.
Do you have a codepen or example you could share to get us up and running
Have u tried using Geolocation service to set the coords of the user instead of hardcoded ones?
I cannot get this to work. Even not with service injected.
Thanks Robin - ha hadn’t seen lmgtfy before but will use it myself now
leaflet does look interesting - will give it a go - like idea it can be offline
update: just had a go with the fiddle and put in my coords - very very slow to load the tiles - tried a few other coords and equally slow. is this usual?
Mine is insanely fast. Depends on your tile service I guess. I’m downloading Google Maps HD tiles using Mobile Atlas Creator and store the tiles offline in my app. This does increase the app size dramatically so be careful with offline maps.
I have a somewhat related question, please forgive me for not posting in a new thread.
If I put a google map in a view inside a navigation stack, let’s say in the pet-detail view of the seed project, this line (taken from the codepen map example):
@antoniogiungato About the legal stuff; still need to figure that out. I suspect with the correct copyright notices etc. this won’t be any problem.
It’s not like I’m pretenting it’s my data. I will show the Google logo on it and give them the credits in the about page.
Does anyone else have some insights on this subject?
I want to use Google Maps API tiles with Leaflet, can I do that?
The problem with Google is that its Terms of Use forbid any means of tile access other than through the Google Maps API.
And from our dear friends at the GooglePlex…
License Restrictions. Except as expressly permitted under the Terms, or unless you have received prior written authorization from Google (or, as applicable, from the provider of particular Content), Google’s licenses above are subject to your adherence to all of the restrictions below.
10.1 Restrictions on How You May Use the Maps API(s). Except as explicitly permitted in Section 8 (Licenses from Google to You) or the Maps APIs Documentation, you must not (nor may you permit anyone else to) do any of the following:
10.1.1. General Restrictions.
(a) No Access to Maps API(s) except through the Service. You must not access or use the Maps API(s) or any Content through any technology or means other than those provided in the Service, or through other explicitly authorized means Google may designate. For example, you must not access map tiles or imagery through interfaces or channels (including undocumented Google interfaces) other than the Maps API(s).
Come on now, if you could store the tiles offline everyone would be using that strategy. That’s the Enterprise class subscription/tiers are for.
The Angular Leaflet Directive demo website has some great examples.