Is there a way to allow users to create their own markers on a google maps API?

Ionic Framework Ionic Angular
1

I am attempting to make a fishing location map. That will allow logged-in users to add in their own fishing locations to the map. My hope to do this is through a button which will pop up a page that will allow them to fill out information on the location and through Longitude + Latitude display it to the map which then you can click on the new icon on the map and it will bring the user to the detailed page of information that was filled out. This is a mock-up design I made for a better idea of what it would look like.

Creation Page: https://imgur.com/m7FBxhe
View Page: https://imgur.com/kvlhYUz

I am wondering is this possible to do? I am struggling to find any resources that could be of help with Ionic for doing something like this. I am going to be using a firebase database for the user registration/login. I am not the most experienced when it comes to any of this if I will be able to use firebase to store icon information? Or am I better off using something like SQL Lite? and in general, is this possible to do with Ionic/Angular?

2

Greetings,

I’m confused which one is your issue exactly. Do you need help on:
1- displaying/using custom markers with Javascript Maps API or
2- storing custom markers somewhere or
3- both?

I can help with issue number 1. What you can do is:

    initMap() {
      // Create a map after the view is ready and the native platform is ready.
      let latLng = new google.maps.LatLng(yourLat, yourLng);
      let mapOptions = {
        center: latLng,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoomControl: false,
        fullscreenControl: false
      };
      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

      //Load the markers
      let markerIcon = {
          url: "customIconUrl",
          scaledSize: new google.maps.Size(60, 60),
          origin: new google.maps.Point(0, 0), // used if icon is a part of sprite, indicates image position in sprite
          anchor: new google.maps.Point(20,40) // lets offset the marker image
      }

      let marker = new google.maps.Marker({
          map: this.map,
          animation: google.maps.Animation.DROP,
          icon: markerIcon,
          position: latLng
      });

      let infoWindow = new google.maps.InfoWindow({
          content: "Help Me!"
      });

      google.maps.event.addListener(marker, 'click',() => {
          infoWindow.open(this.map, marker);
      });

    }