Search code examples
wordpressmapsgoogle-maps-markersmarkervs-web-site-project

google marker based on users marker


i'm trying to build a website with ability for user to submit a post and with that post i want the users to add the location by marker on map or by search address and in the post form page
and i want to add another map with marker of the users in the posts page
for example this airbnb website

do you think this is possible? i already built my website and used wordpress and multiple plugins but for post i used wpforms


Solution

  • This suggestion in not entirely specific to WordPress. However, if this is applicable to your implementation, you can add markers on a map using the Maps JavaScript API

    So in your form, you can include a Place Autocomplete to search for an address in your form page. Then get the place's details using the getPlace() function including the coordinates of the selected address to plot onto your map which looks something like this:

    var autocomplete = new google.maps.places.Autocomplete(input);
    var marker;
    
    autocomplete.addListener('place_changed', function() {
    
              var place = autocomplete.getPlace();
              if (!place.geometry) {
                // User entered the name of a Place that was not suggested and
                // pressed the Enter key, or the Place Details request failed.
                window.alert("No details available for input: '" + place.name + "'");
                return;
              }
    
              marker.setPosition(place.geometry.location);
              marker.setVisible(true);
          });
    

    Here's acomplete example you can follow: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete

    You can checkout this link for more information: https://developers.google.com/maps/documentation/javascript/places-autocomplete