Buy Now
Sign in

Google map markers with Lat Lng

bensonley , November 20 2017
Answered
B
bensonley
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
B
bensonley
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[1], locations[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>