CODEWITHSUNDEEP
javascriptphpjquerywordpressgoogle-maps
Alex
Alex

Reputation: 1

Show users submited address in google map infowindow when clicked (Wordpress and ACF plugin)

guys I hope you can help me out with this issue. Bassically I'm trying to achive next goal: Users fills out form (Buddyform + ACF plugin)-> Automatically post are being created from users submited form information

But there is a problem with that since one if the forms fields is Google Map field (created in ACF). Transaction from form to post is very nice. But for some reason information about selected address is missing. Meaning that you can see marker on map and you can move map, but you can't see what is exact address.

The idea was to include address in infowindow which would open onclick. But so far I understood just how to include manually written text (content : "text here"). But I want that in infowindow would appear address from Buddyform that user submited.

Is there a way to do so? You can see my testing here Since am not really good with coding I use plugins for custom fields creation (ACF plugin) and in order to show custom fields in post (wpView plugin)

Upvotes: 0

Views: 473

Answers (1)

Franco Vizcarra
Franco Vizcarra

Reputation: 426

OK from what I can see from the documentation link in your comments. You have to add the code from the Helpers section into your page template.

In the add_marker($marker, map) method you can make another api call to get a human readable address of the marker location. 

function add_marker( $marker, map ) {

  // var
  var latlng = new google.maps.LatLng( $marker.attr('data-lat'), 
      $marker.attr('data-lng') ),
      formatAddress = "";

  // create marker
  var marker = new google.maps.Marker({
      position  : latlng,
      map       : map
  });

Using the latLng variable to make request to the Geocoding service in order to get a formatted address from the variable's lat/lang coordinates.

  var geocoder = new google.maps.Geocoder();
  geocoder.geocode( { 'location': latLng}, function(results, status) 
    {  
      if (status == 'OK') {
      formatAddress = results[0].formatted_address;
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });

// add to array
map.markers.push( marker );

Then you when add the infowindow you can put the formatted address as it's body content.

  // if marker contains HTML, add it to an infoWindow
  if( $marker.html() )
  {
      // create info window
    var infowindow = new google.maps.InfoWindow({
        content     : formatAddress
    });

    // show info window when marker is clicked
    google.maps.event.addListener(marker, 'click', function() {

        infowindow.open( map, marker );

    });
  }

}

Upvotes: 0

Related Questions