Google map markers with Lat Lng

Question

Hi

I've created a property list associated to a user which is working nicely thanks to your demo on CC6.

I would like to add a Google map with markers to show the location of the list items.
To get the list of properties i have a read database function - {var:read_properties} - to return all the rows associated with the user. Included in this data are 3 fields that are not displayed but read, these are:
"Address" - {var:read_properties.Prop.address}
"Lat" - {var:read_properties.Prop.lat}
"Long" - {var:read_properties.Prop.lng}

I have added the Google Maps widget but cant work out how to add the pins - I presume I need to populate the Places provider field with the correct syntax, I've tried a few variations but cant get any markers.

I can see various results for :

var plcs = JSON.parse('        ');

So i created a new function type Modify data and simply added the following manual key value pairs:

id:0
lat:51.644682
lng:-0.475019

Which did result in:

var plcs = JSON.parse('{"id":"0","lat":"51.644682","lng":"-0.475019"}');

But then i get the following console error:

Uncaught Error: Missing parameter. You must specify placeId.

Any idea what I'm dong wrong or do i need to add some custom code?

Thanks

Ben

bensonley · Accepted Answer

I worked it out - placeID is the GMaps ID it gives for each place registered or known on Google Maps, no good for me as I require house addresses which don't have a PlaceID. I have LngLat co-ords howeve.
So i found a script online and modified to be used in the LatLng co-ords contained in the Model array and used the repeater area for the array output of the markers. I even managed to create the markers into a Map route based on array date order. Happy to share if anyone is looking for a similar, the code maybe a little rough, but works for me:

Created a Repeater and called it map_route
Data Provider {var:read_properties} - function to read properties table.
Where Model = Property and fields are address, lat and lng
In Content:

['{var:map_route.row.Property.address}','{var:map_route.row.Property.lat}','{var:map_route.row.Property.lng}',{var:map_route.key}],

Header:

<div class="ui segment">
<div id="map_wrapper" style="width:100%;height:500px">
    <div id="map_canvas" class="mapping" style="width:100%;height:500px"></div>
</div>
</div>
<script type="text/javascript"> 

jQuery(function($) {
    // Asynchronously Load the map API 
    var script = document.createElement('script');
    script.src = "//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY HERE&callback=initialize";
    document.body.appendChild(script);
});
function initialize() {
var geocoder;
var map;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
  var locations = [

Footer:

 ];


  directionsDisplay = new google.maps.DirectionsRenderer();


  var map = new google.maps.Map(document.getElementById('map_canvas'));
  directionsDisplay.setMap(map);
  var infowindow = new google.maps.InfoWindow();

  var marker, i;
  var request = {
    travelMode: google.maps.TravelMode.DRIVING
  };
  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
icon: {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 0
        }
    });
   
    if (i == 0) request.origin = marker.getPosition();
    else if (i == locations.length - 1) request.destination = marker.getPosition();
    else {
      if (!request.waypoints) request.waypoints = [];
      request.waypoints.push({
        location: marker.getPosition()
        
      });
    }

  }
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
    }
  });
}

</script>

Google map markers with Lat Lng

How to add Google Map markers using latitude and longitude coordinates in ChronoForms.

Overview