Hello!
Currently i'm creating a simple app.
And want to use some plugins, such as Google Maps.
I've read https://market.ionic.io/starters/google-maps starter and have some questions about using plugins with ionic.
Here the my controller
.controller('PlaylistsCtrl', function($scope, $ionicPlatform) {
$ionicPlatform.ready(function() {
var div = document.getElementById("map_canvas");
console.log(JSON.stringify(div));
// Invoking Map using Google Map SDK v2 by dubcanada
var map = plugin.google.maps.Map.getMap(div,{
'camera': {
'latLng': setPosition(-19.9178713, -43.9603117),
'zoom': 10
}
});
// Capturing event when Map load are ready.
map.addEventListener(plugin.google.maps.event.MAP_READY, function(){
// Defining markers for demo
var markers = [{
position: setPosition(-19.9178713, -43.9603117),
title: "Marker 1"
}, {
position: setPosition(-19.8363826, -43.9787167),
title: "Marker 2"
}];
// Bind markers
for (var i = 0; i < markers.length; i++) {
map.addMarker({
'marker': markers[i],
'position': markers[i].position
}, function(marker) {
// Defining event for each marker
marker.on("click", function() {
alert(marker.get('marker').title);
});
});
}
});
// Function that return a LatLng Object to Map
function setPosition(lat, lng) {
return new plugin.google.maps.LatLng(lat, lng);
}
});
$scope.playlists = [
{ title: 'Reggae', id: 1 },
{ title: 'Chill', id: 2 },
{ title: 'Dubstep', id: 3 },
{ title: 'Indie', id: 4 },
{ title: 'Rap', id: 5 },
{ title: 'Cowbell', id: 6 }
];
})
In template i have div with id map_canvas.
Plugin are installed and keys passed with installation.
Running on device with live reload.
But console.log(JSON.stringify(div)); empty
How properly use plugin in this case?
Thanks!