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[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>