Menu
I'm trying to create a little app using the Google Maps JS API. I'm using the data layer to load a bunch of points from a GeoJSON file. The file seems to be loading properly, and the map is displaying, but the icons that are set in the map.data.setstyle() won't show...
Below is my HTML, CSS, and JS. I've been looking at this for 2 days, and I can't figure out what's going wrong. Thank you in advance!
HTML
<body>
<div id="map-canvas"></div>
</body>
CSS
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0
}
#map-canvas {
height: 100%
}
JS
$(document).ready(function() {
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(37.000, -120.000),
zoom: 7
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
map.data.loadGeoJson('/map.json');
map.data.setStyle(function(feature) {
var theaterName = feature.getProperty('name');
return {
icon: "https://maps.gstatic.com/mapfiles/ms2/micons/marina.png",
visible: true,
clickable: true,
title: theaterName
};
});
}
google.maps.event.addDomListener(window, 'load', initialize);
});
JSON
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"rentrak_id": "9183", "name": "Palm Theatre", "address": "817 Palm St, San Luis Obispo, CA"},
"geometry": {
"type": "Point",
"coordinates": [35.2815558, -120.6638196]
}
},
{
"type": "Feature",
"properties": {
"rentrak_id": "8961", "name": "King City 3", "address": "200 Broadway St, King City, CA"},
"geometry": {
"type": "Point",
"coordinates": [36.21372, -121.1261771]
}
},
{"type": "Feature", "properties": {
"rentrak_id": "5549", "name": "Van Buren 3 DI", "address": "3035 Van Buren Blvd, Riverside, CA"},
"geometry": {
"type": "Point",
"coordinates": [33.9113137, -117.4364228]
}},
{"type": "Feature", "properties": {
"rentrak_id": "990802", "name": "CGV Cinemas LA", "address": "621 S Western Ave, Los Angeles, CA"},
"geometry": {
"type": "Point",
"coordinates": [34.0626656, -118.3093961]
}},
{"type": "Feature", "properties": {
"rentrak_id": "5521", "name": "Rancho Niguel 7", "address": "25471 Rancho Niguel Rd, Laguna Niguel, CA"},
"geometry": {
"type": "Point",
"coordinates": [33.5560509, -117.68533]
}}]}
EDIT::
So, my script is working when I use this file: http://earthquake.usgs.gov/earthquakes/feed/geojsonp/2.5/week
Which makes me think there is something wrong with my local json file... However when I step through the javascript, I can look at each feature and check for the properties and geometries, and they seem to be correctly loaded into the google.maps.feature objects. So, I still have no idea why the points wouldn't be showing up.
496
There are a several reasons why your google maps may not be working, the most common issue being no Google Map API key set or set incorrectly. To use the Google Maps JavaScript API, you must register your app project on the Google Cloud Platform Console and get a Google API key which you can add to your app.
Checking for key restrictions Open the Credentials page of the Google dashboard. Find your key in the list and click on the name: Check for any restrictions under API Restrictions.
You are using boolean values as strings: 'true' instead of true. So call to setStyle should be:
map.data.setStyle(function(feature) {
var theaterName = feature.getProperty('name');
return {
icon: "https://maps.gstatic.com/mapfiles/ms2/micons/marina.png",
visible: true,
clickable: true,
title: theaterName
};
});
Update: Your json file has switched lat/lng coordinates. There should be
"coordinates": [-118.3093961, 34.0626656]
instead of
"coordinates": [34.0626656, -118.3093961]
That was the reason I got objects which have values xy, -90.
See GeoJSON specs: The order of elements must follow x, y, z order (easting, northing, altitude for coordinates in a projected coordinate reference system, or longitude, latitude, altitude for coordinates in a geographic coordinate reference system).
So, Google Maps API uses lat/lng, for GeoJSON file coordinates it should be lng/lat.
170
The coordinates need to be in longitude then latitude order in the geojson... SO SILLY!!! Guess that's a good lesson in reading the documentation thoroughly.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
