I am looking for a solution where I need to have Ionic sidemenu and the main page should have Google map with current location.
Can someone please let me know how this can be achieved?
UPDATED
I have found something similar on codepen here and have tried to adopt the same to achieve my requirement. But still facing some issue.
My codepen link is http://codepen.io/guruprasadvenkatarao/pen/zGdYNr
I think the problem is somewhere in this code
google.maps.event.addDomListener(window, 'load', function() {
.....
}
This function is never executed.
Can someone point what am I doing wrong?
I had the exact same problem and I assume you are probably a angular/ionic newbie like me. The reason, as you already figured out, is that the addDomListener
is never triggered, so if you want the map to be initialized when you fire the view, instead of doing
google.maps.event.addDomListener(window, 'load', function() {
// ....
}
just do
$scope.initMap = function() {
// your code here
}
and add the function to your map div like so:
<ion-view view-title="Map View">
<ion-content>
<div id="map" data-tap-disabled="true" ng-init="initMap()"></div>
</ion-content>
</ion-view>
p.s. after looking at your code, the first problem you need to fix is the google api key. If you look at line 24, you'll see
<script src="http://maps.googleapis.com/maps/api/js?key=<Google API key>=true"></script>
and you need to replace that with a valid key. Check out Obtaining an API Key.
Let me know if you still have problems!