Map Marker

ionic-v1
1

Anyone know the correct way to add marker for http://codepen.io/ionic/pen/uzngt

angular.module('ionic.example', ['ionic.service.platform', 'ionic.ui.content', 'ionic.ui.list', 'ionic.service.loading'])

.controller('MapCtrl', function($scope, $ionicLoading) {
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(43.07493,-89.381388),
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"),
        mapOptions);

    // Stop the side bar from dragging when mousedown/tapdown on the map
    google.maps.event.addDomListener(document.getElementById('map'), 'mousedown', function(e) {
      e.preventDefault();
      return false;
    });

    $scope.map = map;
  }
  google.maps.event.addDomListener(window, 'load', initialize);
  
  $scope.centerOnMe = function() {
    if(!$scope.map) {
      return;
    }

    $scope.loading = $ionicLoading.show({
      content: 'Getting current location...',
      showBackdrop: false
    });

    navigator.geolocation.getCurrentPosition(function(pos) {
      $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
      $scope.loading.hide();
    }, function(error) {
      alert('Unable to get location: ' + error.message);
    });
  };
});
2

To add a marker on click, you would use something like:

google.maps.event.addListener(map, 'click', function(event) {
  marker = new google.maps.Marker({
    position: event.latLng,
    map: map
  });
});

1 Like