CODEWITHSUNDEEP
htmlgoogle-maps-api-3geojson
Troy Buerge
Troy Buerge

Reputation: 178

styling geojson point in google maps api

I'm working on a map project using google maps api, and a geojson data file. My problem is that I don't have a clue how to apply custom styles to my points. This is how i load my data:

      <script>
var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 43.15, lng: -84.75}
  });

  map.data.loadGeoJson(
      'Maps/Newark.geojson');

      map.data.loadGeoJson('Maps/Newark.geojson');
     map.data.setStyle(//* I'm not sure what to put here*//)


}
</script>

And this is a sample of my geojson file:

    {
   "type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
   "type": "Point",
   "coordinates":  [ -84.69729,43.24808 ]
},
"properties": {}
},
 {
"type": "Feature",
"geometry": {
   "type": "Point",
   "coordinates":  [ -84.58872,43.23395 ]
},
"properties": {}
}
}

Upvotes: 1

Views: 2161

Answers (1)

geocodezip
geocodezip

Reputation: 161384

To set the style of the markers to a custom icon, use a Data.StyleOptions object (if you provide a string for the icon, it treats it as a URL):

map.data.setStyle({
  icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
});

proof of concept fiddle

screenshot of resulting map

code snippet:

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 9,
    center: {
      lat: 43.15,
      lng: -84.75
    }
  });
  map.data.addGeoJson(geoJson);
  map.data.setStyle({
    icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
  });


}
google.maps.event.addDomListener(window, "load", initMap);
var geoJson = {
  "type": "FeatureCollection",
  "features": [{
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-84.69729, 43.24808]
      },
      "properties": {}
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-84.58872, 43.23395]
      },
      "properties": {}
    }
  ]
};
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

Upvotes: 4

Related Questions