Google Maps GeoComplete with GeoJson

Question

I am struggling to get Google Maps to show me the data stored in a GeoJSON object. If I use a click event on the polygon it works first time. Code below:

// Get the GeoJSON file from the server
HTTP.get(Meteor.absoluteUrl("/geo.json"), function(err,result) {
    GoogleMaps.maps.fibreMap.instance.data.loadGeoJson("/geo.json");
});

// Add style and colouring to the map
GoogleMaps.maps.fibreMap.instance.data.setStyle(function(feature) {
    // Get the Fibrehood Status
    var status = feature.getProperty('status');
    // Add colour accoring to status
    if (status == "live") {
        opacity = 0.65;
    } else if (status == "build") {
        opacity = 0.4;
    } else if (status == "register_i") {
        opacity = 0.2;
    }
    // Return the correct styling 
    return ({
        fillColor: '#ec008c',
        strokeColor: '#ec008c',
        strokeOpacity: 0.35,
        strokeWeight: 0,
        fillOpacity: opacity
    });
});

GoogleMaps.maps.fibreMap.instance.data.addListener('click', function(event) {
    var hood = event.feature.getProperty('name');
    var status = event.feature.getProperty('status');
    console.log(hood + " : " + status);
});

However, when trying to use GeoComplete to drop a pin on an address, it does not run. I know that this should be triggered with some sort of event, like a marker dropping on the map or a Dom Element changing, but I cannot figure it out.

Does anyone have any insight into how to trigger events from the DOM or dropping a marker onto the map? I am a bit of a noob and would really appreciate any help.

Thanks Mike

is there a relation between that `geo.json` and geocomplete? I don't believe you can make said plugin geolocate addresses other than through google — ffflabs, Jun 01 '16 at 00:22

ReyAnthonyRenacia · Answer 1 · 2016-06-03T01:23:48.120

Does anyone have any insight into how to trigger events from the DOM or dropping a marker onto the map?

Sure, there is. Google Maps JS API has a well-documented example of working with map events and map markers.

In this example a marker will drop on the map where you clicked using the 'click event'.

// This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng, map);
  });

  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location, map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  var marker = new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    map: map
  });
}

Full demo is here.

Here's a link to a sample for Listening to DOM Events:

https://developers.google.com/maps/documentation/javascript/examples/event-domListener

Google Maps GeoComplete with GeoJson

1 Answers1