Using gmaps.js to place markers from geoJSON file

Question

I need to, using gmaps.js, grab marker information from a .json file and display the marker locations on my local html page.

I have been able to do this successfully with the standard Google Maps Platform API using the example given here: https://developers.google.com/maps/documentation/javascript/importing_data

My geojson file is in the same format as the one in the example above. However I would like to use gmaps.js because of its simplicity and ease of use. How can the above code be adapted and used with gmaps.js?

Here is my very basic code so far:

var mapObj = new GMaps({
  el: '#map',
  lat: 30.267283,
  lng: -90.554560,
  zoom: 2, 
  minZoom: 2 
})

/*attempting to place markers from geojson file*/

/*managed to add markers manually*/
mapObj.addMarker({
  lat: 30.267283,
  lng: -90.554560,
  title: 'Marker with InfoWindow',
  infoWindow: {
    content: '<p>HI!</p>'
  },
  click: function(e) {
    mapObj.map.panTo(e.position);
  }
});

I have attempted to use: https://hpneo.dev/gmaps/examples/json.html

However my webpage seems to result in a blank white screen.

evan · Accepted Answer · 2019-09-29T09:04:35.060

The gmaps example on Working with JSON works fine; you just need to modify it based off of your own JSON file. If it looks like the one from Google's documentation then you can just load it directly with getJSON like gmaps.js does.

Take a look at this jsbin for demonstration and guidance. Full code below. Hope it helps!

<!DOCTYPE html>
<html>

<head>
    <style>
        #map {
            height: 100%;
        }

        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="map"></div>

    <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key="></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.25/gmaps.js"></script>

    <script>
        var map;

        function loadResults(data) {
            var markers_data = [];

            for (var i = 0; i < data.features.length; i++) {
                var coords = data.features[i].geometry.coordinates;
                markers_data.push({
                    lat: coords[1],
                    lng: coords[0],
                    infoWindow: {
                        content: '<p>HI!</p>'
                    },
                    click: function(e) {
                        map.map.panTo(e.position);
                    }
                });
            }
            map.addMarkers(markers_data);

        }

        $(document).on('click', '.pan-to-marker', function(e) {
            e.preventDefault();

            var position, lat, lng, $index;

            $index = $(this).data('marker-index');

            position = map.markers[$index].getPosition();

            lat = position.lat();
            lng = position.lng();

            map.setCenter(lat, lng);
        });

        $(document).ready(function() {
            map = new GMaps({
                el: '#map',
                lat: 30.267283,
                lng: -90.554560,
                zoom: 2,
                minZoom: 2
            });

            map.on('marker_added', function(marker) {
                var index = map.markers.indexOf(marker);
                if (index == map.markers.length - 1) {
                    map.fitZoom();
                }
            });

            var xhr = $.getJSON('https://api.myjson.com/bins/11fqjv');
            xhr.done(loadResults);
        });
    </script>
</body>

</html>

Using gmaps.js to place markers from geoJSON file

1 Answers1