Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

loading a local GeoJSON file and using it with the Google Maps Javascript API v3 data layer

I have created a JSON FeatureCollection that works in the DataLayer: Drag and Drop tutorial. It is just a collection of 2 roads so far, but I cannot figure out how to get the JSON file to load. It is a local file for now, so I thought calling it up and styling it ala tutorial would put me on the right path. But it isn't working. Here are the HTML and the JSON files.

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>FMRE Main Map</title>
    <!-- Style Section for the Window -->
    <style>
    html { height: 610px; width: 575px; }
    body { height: 610px; width:575px; margin: 0; padding: 0 }
    #map-canvas { height: 604px; width: 566px;}
    }
    </style>
    <!-- Calling the Google Map API version 3 -->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <!-- Styling the Custom Main Map -->
    <script>
    var fmreMain = new google.maps.LatLng(29.681418,-95.714802);
    var MY_MAPTYPE_ID = 'custom_style';
    <!-- Styling for the Different Features on the Map from Google -->
    function initialize() {

    var featureOpts = [
      {
        "featureType": "poi.sports_complex",
        "stylers": [
          { "visibility": "off" }
        ]
      },
      {
        "featureType": "poi.attraction",
        "stylers": [
          { "visibility": "off" }
        ]
      },
      {
        "featureType": "poi.business",
        "stylers": [
          { "visibility": "off" }
        ]
      },
      {
        "featureType": "landscape.man_made",
        "stylers": [
          { "visibility": "off" }
        ]
      },
      {
        "featureType": "poi.medical",
        "stylers": [
          { "visibility": "off" }
        ]
      },
      {
        "featureType": "poi.government",
        "stylers": [
          { "visibility": "off" }
        ]
      },
      {
        "featureType": "poi.place_of_worship",
        "stylers": [
          { "visibility": "off" }
        ]
      },
      {
        "featureType": "poi.attraction",
        "stylers": [
          { "visibility": "off" }
        ]
      },
      {
        "featureType": "poi.park",
        "stylers": [
          { "visibility": "off" }
        ]
      },
      {
        "featureType": "poi.park",
        "elementType": "labels.text",
        "stylers": [
          { "visibility": "off" }
        ]
      },
      {
        "featureType": "administrative.land_parcel",
        "stylers": [
          { "visibility": "off" }
        ]
      },
      {
        "featureType": "road.local",
        "stylers": [
          { "visibility": "off" }
        ]
      },
      {
        "featureType": "road.arterial",
        "elementType": "labels.text",
        "stylers": [
          { "visibility": "off" }
        ]
      },
      {
        "featureType": "road.highway",
        "elementType": "labels.icon",
        "stylers": [
          { "visibility": "off" }
        ]
      },
      {
        "featureType": "road.highway",
        "elementType": "labels.text",
        "stylers": [
          { "visibility": "off" }
        ]
      },
      {
        "featureType": "road.highway",
        "elementType": "geometry",
        "stylers": [
          {  "visibility": "off" }
        ]
      },
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "visibility": "off" }
        ]
      },
      {
        "featureType": "road.arterial",
        "elementType": "labels.text",
        "stylers": [
          { "visibility": "off" }
        ]
      },
      {
        "featureType": "road.arterial",
        "elementType": "labels.icon",
        "stylers": [
          { "visibility": "off" }
        ]
      },
      {
        "featureType": "water",
        "elementType": "labels.text",
        "stylers": [
          { "visibility": "off" }
        ]
      },
      {
        "featureType": "water",
        "stylers": [
          { "color": "#0000ff" }
        ]
      },
      {
        "featureType": "landscape.natural.landcover",
        "stylers": [
          { "visibility": "off" }
        ]
      },
      {
        "featureType": "landscape.natural.terrain",
        "stylers": [
          { "visibility": "off" }
        ]
      },
      {
        "featureType": "administrative.locality",
        "stylers": [
          { "visibility": "off" }
        ]
      },
      {
        "featureType": "administrative.neighborhood",
        "stylers": [
          { "visibility": "off" }
        ]
      }

    ];

    <!-- Setting for the Main Map -->

    var mapOptions = {
        center: fmreMain,
        backgroundColor: "#330033",
        zoom: 11,
        maxZoom: 12,
        minZoom: 10,
        zoomControl: false,
        mapTypeControl: false,
        streetViewControl: false,
        panControl: false,
        mapTypeId: MY_MAPTYPE_ID
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);

    <!-- Settings for the Custom View Box -->

    var styledMapOptions = {
        name: 'FMRE',
        alt: 'Katy Areas'
                };

      var customMapType = new google.maps.StyledMapType(featureOpts,                 styledMapOptions);

    map.data.loadGeoJson('\JSON_MAP_COMPONENTS\Area_Main_Roads.json');

      var featureStyle = {
        strokeColor: '#ff3333',
        strokeWeight: 4
      }

    map.data.setStyle(featureStyle);

    map.mapTypes.set(MY_MAPTYPE_ID, customMapType, featureStyle);

    }

    google.maps.event.addDomListener(window, 'load', initialize);

    </script>

    </head>

    <body>
    <div id="map-canvas"></div>
    </body>
    </html>

GeoJSON File

        { "type": "FeatureCollection",
        "features": [

    { "type": "Feature",
     "geometry": 
    { "type": "LineString",   "coordinates": [
     [ -95.499287099037943, 29.633775903201652 ],
     [ -95.510219429084501, 29.6295756444228 ],
     [ -95.518154168081537, 29.62651674184098 ],
     [ -95.528712867431707, 29.622445431000013 ],
     [ -95.53826064293483, 29.618771022138741 ],
     [ -95.541035517360555, 29.617702728232437 ],
     [ -95.544447072307435, 29.616381372726607 ],
     [ -95.544625899177007, 29.616307579994842 ],
     [ -95.545790211351189, 29.61607301050708 ],
     [ -95.547077549792974, 29.615738432024486 ],
     [ -95.547631713233685, 29.615622392826097 ],
     [ -95.547932671532564, 29.614939407889889 ],
     [ -95.548190053370064, 29.615522451738965 ],
     [ -95.548392624456909, 29.614769174869338 ],
     [ -95.548751780273136, 29.615438758779774 ],
     [ -95.548862903461526, 29.614619498527343 ],
     [ -95.549316099095989, 29.615371466668105 ],
     [ -95.549340348276871, 29.614490639557527 ],
     [ -95.5498249417235, 29.614383114417095 ],
     [ -95.549883013326678, 29.615320575455101 ],
     [ -95.550315113633715, 29.614296882540973 ],
     [ -95.550453893576616, 29.615268752955089 ],
     [ -95.55080927908358, 29.614232245311893 ],
     [ -95.55102561034731, 29.615238786782307 ],
     [ -95.551307430876705, 29.614189377168234 ],
     [ -95.551598948336235, 29.615230699957547 ],
     [ -95.551806412103673, 29.614168537600264 ],
     [ -95.552172327563156, 29.615244792636013 ],
     [ -95.552307012242224, 29.614169749750467 ],
     [ -95.552763416973363, 29.615270518318706 ],
     [ -95.553058820618347, 29.614214575493488 ],
     [ -95.553353931280569, 29.615313248914024 ],
     [ -95.553809129103215, 29.614280510927649 ],
     [ -95.553942307619963, 29.615372775130719 ],
     [ -95.554557172864406, 29.614367016572341 ],
     [ -95.554528537407847, 29.615449264399285 ],
     [ -95.555111047097768, 29.615542680453746 ],
     [ -95.555301363729981, 29.614474399507031 ],
     [ -95.555689851816069, 29.615652678600238 ],
     [ -95.556040927782462, 29.614602293331057 ],
     [ -95.556264162521359, 29.615779239979805 ],
     [ -95.556775872895187, 29.614750525044794 ],
     [ -95.556914987297333, 29.615947833035133 ],
     [ -95.557513696889401, 29.61495351117193 ],
     [ -95.557558910652602, 29.616134470634488 ],
     [ -95.558195929479282, 29.616339158422026 ],
     [ -95.558244516212099, 29.615177634544775 ],
     [ -95.55882527144017, 29.616561525865681 ],
     [ -95.558965972396251, 29.615422665572016 ],
     [ -95.559446153132754, 29.616801386697823 ],
     [ -95.559678076574173, 29.615688428594837 ],
     [ -95.56005779629821, 29.617058544935759 ],
     [ -95.560379265263265, 29.615974542661295 ],
     [ -95.560660212691673, 29.6173326586934 ],
     [ -95.561069548740193, 29.616280664480282 ],
     [ -95.561251836156302, 29.617623517388921 ],
     [ -95.561747370087133, 29.616606407670673 ],
     [ -95.562413519747608, 29.616951622268932 ],
     [ -95.563065649760588, 29.617315904414909 ],
     [ -95.563703776057594, 29.617698739141304 ],
     [ -95.56462444620395, 29.618434632015283 ],
     [ -95.564638543026348, 29.6192325281466 ],
     [ -95.564638543026348, 29.6192325281466 ],
     [ -95.565080417160374, 29.618780282365936 ],
     [ -95.565514827960186, 29.619111791125349 ],
     [ -95.565963136743335, 29.619428009036451 ],
     [ -95.566426136988952, 29.619728781651517 ],
     [ -95.566519062703364, 29.620125805523074 ],
     [ -95.56690227793402, 29.620013381609613 ],
     [ -95.567390000454211, 29.620281425067887 ],
     [ -95.568576457132423, 29.621074319946569 ],
     [ -95.578485692451835, 29.625641315413901 ],
     [ -95.582059571463262, 29.627295409183905 ],
     [ -95.582617864632084, 29.627503465784848 ],
     [ -95.583183011429838, 29.627695016524143 ],
     [ -95.583755809341227, 29.62786973515307 ],
     [ -95.58433468413331, 29.628027584218472 ],
     [ -95.584919639771357, 29.628168389078326 ],
     [ -95.585509904497698, 29.628291787667514 ],
     [ -95.5861038967318, 29.62839791284178 ],
     [ -95.586701627753513, 29.628486418319529 ],
     [ -95.5873509877663, 29.628561276422992 ],
     [ -95.588003404720268, 29.628615404919724 ],
     [ -95.588657308534394, 29.628648589079546 ],
     [ -95.589311906879814, 29.62866098196168 ],
     [ -95.589967209257679, 29.628652238688996 ],
     [ -95.590621634725139, 29.62862266269488 ],
     [ -95.59127360570767, 29.628572215226772 ],
     [ -95.591923911225422, 29.628500915015181 ],
     [ -95.592570183447307, 29.628408875067063 ],
     [ -95.593022365434578, 29.628329427128524 ],
     [ -95.593212423695576, 29.628296092665561 ],
     [ -95.593849824907792, 29.628163067126376 ],
     [ -95.602800151029271, 29.626368306235111 ],
     [ -95.610891907803705, 29.624767694460097 ],
     [ -95.625224916235595, 29.621939980261459 ],
     [ -95.634517408208879, 29.620070079842652 ],
     [ -95.635014643769196, 29.619982856001396 ],
     [ -95.635506248525559, 29.619875372000127 ],
     [ -95.635992202157595, 29.619748138730863 ],
     [ -95.636470931269827, 29.619601292790396 ],
     [ -95.636940847307386, 29.619435138043109 ],
     [ -95.638217695436722, 29.618980092021609 ],
     [ -95.644537160190339, 29.61593975812249 ],
     [ -95.64960728492747, 29.613468133017431 ],
     [ -95.65397244331723, 29.61134013018523 ],
     [ -95.658734971501758, 29.609017636540109 ],
     [ -95.659466967381306, 29.608705257324765 ],
     [ -95.664612770257676, 29.60678590420169 ],
     [ -95.668899343482266, 29.605238729038675 ],
     [ -95.673659861122317, 29.603514234231668 ],
     [ -95.674279320628358, 29.603295442145924 ],
     [ -95.674907530204976, 29.603097842026244 ],
     [ -95.675543707446778, 29.602921414302404 ],
     [ -95.676187839833972, 29.602766505066402 ],
     [ -95.676837557108954, 29.60263339761941 ],
     [ -95.67749364733173, 29.602522108625568 ],
     [ -95.678152946896418, 29.602433080627023 ],
     [ -95.678816242279922, 29.602366330273291 ],
     [ -95.679629410164338, 29.602265123824868 ],
     [ -95.680438556809278, 29.602142318442688 ],
     [ -95.681243680105766, 29.601997914157767 ],
     [ -95.682042408873755, 29.601832197361649 ],
     [ -95.682524911891221, 29.601758191155536 ],
     [ -95.684382714550139, 29.60155287116272 ],
     [ -95.686148878959756, 29.60135780522381 ],
     [ -95.687394682172112, 29.601311978523462 ],
     [ -95.688868539646464, 29.601271959226128 ],
     [ -95.690151710856952, 29.601165818517412 ],
     [ -95.698436609669059, 29.600298147924665 ],
     [ -95.712948752171997, 29.59875592069745 ],
     [ -95.727425360877163, 29.59722673715499 ],
     [ -95.730063955308495, 29.596938957087566 ],
     [ -95.733949727649971, 29.596558989801441 ],
     [ -95.734716388953416, 29.596481248015291 ],
     [ -95.735480483982258, 29.596385213220991 ],
     [ -95.736241235157195, 29.596270693242214 ],
     [ -95.736997847446304, 29.596137840603774 ],
     [ -95.737749521913926, 29.59598698101151 ],
     [ -95.73849705276551, 29.595817963476087 ],
     [ -95.739238860822695, 29.595630917208315 ],
     [ -95.73968443239518, 29.595503361007395 ],
     [ -95.740122787199525, 29.595355337874917 ],
     [ -95.740550761628128, 29.595187287767285 ],
     [ -95.740968339140522, 29.594999723117724 ],
     [ -95.741374717120607, 29.594793142843816 ],
     [ -95.741766726672736, 29.594568155863318 ],
     [ -95.742093732206811, 29.594357919000753 ],
     [ -95.742508361097521, 29.594065218109517 ],
     [ -95.742855573975135, 29.593788755497702 ],
     [ -95.750206098838916, 29.587548561310111 ],
     [ -95.751466043158246, 29.586506730798465 ],
     [ -95.751857497869452, 29.586223240166547 ],
     [ -95.752919092797981, 29.585454276032923 ],
     [ -95.752332555445463, 29.586032739095078 ],
     [ -95.752781576627385, 29.585819596241389 ],
     [ -95.753240303706107, 29.585622849869605 ],
     [ -95.753708727547192, 29.585442843356951 ],
     [ -95.754232524054274, 29.585327974696803 ],
     [ -95.754419439776129, 29.584571635851244 ],
     [ -95.754752115637473, 29.585196836809061 ],
     [ -95.755265130273273, 29.585049720136446 ],
     [ -95.755720322722468, 29.583898388332575 ],
     [ -95.755773130277575, 29.58488700212299 ],
     [ -95.756272977435572, 29.584708437697859 ],
     [ -95.75891159982973, 29.582198694619247 ],
     [ -95.75906409080406, 29.582129484034105 ],
     [ -95.759225393537392, 29.582080088954392 ],
     [ -95.75927259966933, 29.582973477205726 ],
     [ -95.759393901483193, 29.582051676194759 ],
     [ -95.75956486788715, 29.582044985761208 ],
     [ -95.759735932037046, 29.58205996468255 ],
     [ -95.759902380762256, 29.582096497382661 ],
     [ -95.760060305871676, 29.582153628555439 ],
     [ -95.76020817712552, 29.582230118214955 ],
     [ -95.760357528359791, 29.582284634055643 ],
     [ -95.760514581097794, 29.582319734057446 ],
     [ -95.760675408970371, 29.582334979412288 ],
     [ -95.760849516833545, 29.582353297161845 ],
     [ -95.760959473467196, 29.582310223675165 ],
     [ -95.761150730824212, 29.582259144313557 ],
     [ -95.761295968859798, 29.58219525903268 ],
     [ -95.765552916998928, 29.580582433023139 ],
     [ -95.767076118205168, 29.579966382782494 ],
     [ -95.768940736875379, 29.579202955841627 ],
     [ -95.769483236697695, 29.578992703569618 ],
     [ -95.769997353311567, 29.578734306430583 ],
     [ -95.770477495042314, 29.578430549788173 ],
     [ -95.770501802324446, 29.578411530287852 ],
     [ -95.770919621229197, 29.578084608651736 ],
     [ -95.771317318501048, 29.577700450164933 ],
     [ -95.771668089531943, 29.577282144469216 ],
     [ -95.771966292450813, 29.576834195707111 ],
     [ -95.773099190489546, 29.574945349522867 ],
     [ -95.774064863551587, 29.573367639187669 ],
     [ -95.774723904953774, 29.57240515181789 ],
     [ -95.776611536181179, 29.570631460929519 ],
     [ -95.780736452570778, 29.566817647533409 ],
     [ -95.785517680620927, 29.562412860334042 ],
     [ -95.786727193299015, 29.561301919475817 ],
     [ -95.787283531731745, 29.56087235224237 ],
     [ -95.787870323208821, 29.56047498103619 ],
     [ -95.788485142993864, 29.560111809430662 ],
     [ -95.789125585802864, 29.559784328756468 ],
     [ -95.789789254084369, 29.559493685448658 ],
     [ -95.79047296270376, 29.559241174696368 ],
     [ -95.791231046099909, 29.559000077095959 ],
     [ -95.792006569278925, 29.558804787300932 ],
     [ -95.792404626619032, 29.558729911970136 ],
     [ -95.792795562398197, 29.558656412734425 ],
     [ -95.793594076568965, 29.558555550083788 ],
     [ -95.794398954219844, 29.558502636200263 ],
     [ -95.80262437541198, 29.558360041418904 ],
     [ -95.80886477983374, 29.558222529246301 ],
     [ -95.8107218610362, 29.55818156452592 ],
     [ -95.816922824807619, 29.558046345186472 ],
     [ -95.817265073981048, 29.558095590863523 ],
     [ -95.817597531863811, 29.558181398005637 ],
     [ -95.817836213232013, 29.558272366670142 ],
     [ -95.817915512085534, 29.558302625483968 ],
     [ -95.818213581157977, 29.558457080526612 ],
     [ -95.819194084814839, 29.559054548455535 ],
     [ -95.819497850086577, 29.55920294521766 ],
     [ -95.819746221093439, 29.559286059686418 ],
     [ -95.81982329796827, 29.559311965459216 ],
     [ -95.820162627658732, 29.55937935996042 ],
     [ -95.820509582324561, 29.559403948782403 ],
     [ -95.820857889108325, 29.55938506580496 ],
     [ -95.824718063094679, 29.558959426854781 ],
     [ -95.831361084271393, 29.558192160024365 ],
     [ -95.844477944847185, 29.556699418003522 ],
     [ -95.85819677636924, 29.555135983488686 ],
     [ -95.871929703883254, 29.553559444692421 ],
     [ -95.88329102370966, 29.552248793884623 ],
     [ -95.888322559339912, 29.55167222500237 ],
     [ -95.892815691972388, 29.551157061377207 ],
     [ -95.897736248978021, 29.550578763556558 ],
     [ -95.910399305959999, 29.549116867213961 ],
     [ -95.923855636410593, 29.547576437107175 ],
     [ -95.937298627214119, 29.546046220812695 ],
     [ -95.945273176362306, 29.54514221201439 ],
     [ -95.951137220130576, 29.544476059357219 ],
     [ -95.964236136938482, 29.543007002970786 ],
     [ -95.970188404070598, 29.542353888884303 ],
     [ -95.975688436918546, 29.541750285267089 ],
     [ -95.987234139258348, 29.540462888259988 ],
     [ -95.989329192556497, 29.540230695528845 ],
     [ -95.991688089357012, 29.539959187914096 ],
     [ -96.000130574944478, 29.538993683647849 ],
     [ -96.014157906295239, 29.537433042387075 ],
     [ -96.027336767808151, 29.535959535239698 ],
     [ -96.041364054438176, 29.534396055545262 ],
     [ -96.048154640748862, 29.533570949334194 ],
     [ -96.055404650675584, 29.532808847648162 ]
     ]
     },
    "properties": {
     "name": "US90A"
     }
     },

    { "type": "Feature",
     "geometry": 
    { "type": "LineString",   "coordinates": [
    [ -95.443899579354223, 29.596551757594483 ], 
    [ -95.450711550556974, 29.596484410458228 ], 
    [ -95.45277832877342, 29.596462723335119 ], 
    [ -95.45356724676536, 29.596499811907325 ], 
    [ -95.454353644075795, 29.596564170654567 ], 
    [ -95.455136735454545, 29.596655778795721 ], 
    [ -95.45591495406353, 29.59677442440762 ], 
    [ -95.456686734752026, 29.596919892830492 ], 
    [ -95.457381279038472, 29.59709116724034 ], 
    [ -95.458067954181161, 29.597285101420141 ], 
    [ -95.458745995832203, 29.597501158248217 ], 
    [ -95.459414622832455, 29.597739145305841 ], 
    [ -95.460072268112356, 29.597998849392376 ], 
    [ -95.460718162351412, 29.598279734717035 ], 
    [ -95.461351533466939, 29.598581437290846 ], 
    [ -95.463276789092376, 29.599511264356774 ], 
    [ -95.464685045741405, 29.600188541465812 ], 
    [ -95.46854040288855, 29.601866776479294 ], 
    [ -95.473923714541257, 29.604273032904768 ], 
    [ -95.476934942436216, 29.605718447810595 ], 
    [ -95.480400133276476, 29.607309524771566 ], 
    [ -95.483843080659824, 29.608909555267655 ], 
    [ -95.486513278910948, 29.610116556280001 ], 
    [ -95.489106794010056, 29.611312031891693 ], 
    [ -95.493886416648991, 29.613552388324642 ], 
    [ -95.495670092148671, 29.61438838323145 ], 
    [ -95.496562499795544, 29.6148320294066 ], 
    [ -95.500388952514228, 29.617062606614923 ], 
    [ -95.501303319592438, 29.617555805086603 ], 
    [ -95.502232662657988, 29.618025656379043 ], 
    [ -95.503177768799176, 29.618472184994413 ], 
    [ -95.504137084846761, 29.618894830235377 ], 
    [ -95.505109046665112, 29.619293208653353 ], 
    [ -95.506094454690611, 29.619666998584208 ], 
    [ -95.510863881626875, 29.621520540100246 ], 
    [ -95.511482803464602, 29.62179255826964 ], 
    [ -95.512088445235847, 29.622084688405721 ], 
    [ -95.512681608069855, 29.622396612064549 ], 
    [ -95.513260731305806, 29.622727768933142 ], 
    [ -95.513825827437429, 29.623077987650749 ], 
    [ -95.514374555254321, 29.623446522783393 ], 
    [ -95.514906935766419, 29.623832856677883 ], 
    [ -95.516322721289569, 29.624977836241506 ], 
    [ -95.518154168081537, 29.62651674184098 ], 
    [ -95.520811518798681, 29.628749287154772 ], 
    [ -95.524148403078357, 29.631583919128758 ], 
    [ -95.537081997353297, 29.642482136629464 ] 
    ]
    },
    "properties": {
     "name": "beltway8"
     }
     }
    ]
    }
like image 745
Zack Miller Avatar asked Aug 15 '14 22:08

Zack Miller


People also ask

How do I load a GeoJSON file into Google Maps?

With the Data layer, you can add GeoJSON data to a Google map in just one line of code. map. data. loadGeoJson('google.

What is GeoJSON API?

Introduction. GeoJSON is an extension of the JSON data format and represents geographical data. Using this utility, you can store geographical features in GeoJSON format and render them as a layer on top of the map.


2 Answers

I wouldn't expect loadGeoJSON to work with a local file (for security reasons most browsers prohibit access to the local filesystem by default). If you want to use local data, use the addGeoJSON method:

var data = {... your GeoJSON ...};

map.data.addGeoJson(data);
var featureStyle = {
    strokeColor: '#ff3333',
    strokeWeight: 4
}

map.data.setStyle(featureStyle);

working fiddle

This works for me on my local computer in Chrome:

  • in the head (SO_20140815_data.js is below):

    <!-- Calling the Google Map API version 3 -->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script src="SO_20140815_data.js"></script>
    
  • at the end of initialize

    map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);
    
    <!-- Settings for the Custom View Box -->
    
    var styledMapOptions = {
        name: 'FMRE',
        alt: 'Katy Areas'
                };
    
      var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
    
    map.data.addGeoJson(data);
    
      var featureStyle = {
        strokeColor: '#ff3333',
        strokeWeight: 4
      }
    
    map.data.setStyle(featureStyle);
    
    map.mapTypes.set(MY_MAPTYPE_ID, customMapType, featureStyle);
    
  • SO_20140815_data.js

    var data = { "type": "FeatureCollection",
                 "features": [
                 { "type": "Feature",
                   "geometry": 
                   { "type": "LineString",   
                     "coordinates": [[ -95.499287099037943, 29.633775903201652 ],[ -95.510219429084501, 29.6295756444228 ],[ -95.518154168081537, 29.62651674184098 ],[ -95.528712867431707, 29.622445431000013 ],[ -95.53826064293483, 29.618771022138741 ],[ -95.541035517360555, 29.617702728232437 ],[ -95.544447072307435, 29.616381372726607 ],[ -95.544625899177007, 29.616307579994842 ],[ -95.545790211351189, 29.61607301050708 ],[ -95.547077549792974, 29.615738432024486 ],[ -95.547631713233685, 29.615622392826097 ],[ -95.547932671532564, 29.614939407889889 ],[ -95.548190053370064, 29.615522451738965 ],[ -95.548392624456909, 29.614769174869338 ],[ -95.548751780273136, 29.615438758779774 ],[ -95.548862903461526, 29.614619498527343 ],[ -95.549316099095989, 29.615371466668105 ],[ -95.549340348276871, 29.614490639557527 ],[ -95.5498249417235, 29.614383114417095 ],[ -95.549883013326678, 29.615320575455101 ],[ -95.550315113633715, 29.614296882540973 ],[ -95.550453893576616, 29.615268752955089 ],[ -95.55080927908358, 29.614232245311893 ],[ -95.55102561034731, 29.615238786782307 ],[ -95.551307430876705, 29.614189377168234 ],[ -95.551598948336235, 29.615230699957547 ],[ -95.551806412103673, 29.614168537600264 ],[ -95.552172327563156, 29.615244792636013 ],[ -95.552307012242224, 29.614169749750467 ],[ -95.552763416973363, 29.615270518318706 ],[ -95.553058820618347, 29.614214575493488 ],[ -95.553353931280569, 29.615313248914024 ],[ -95.553809129103215, 29.614280510927649 ],[ -95.553942307619963, 29.615372775130719 ],[ -95.554557172864406, 29.614367016572341 ],[ -95.554528537407847, 29.615449264399285 ],[ -95.555111047097768, 29.615542680453746 ],[ -95.555301363729981, 29.614474399507031 ],[ -95.555689851816069, 29.615652678600238 ],[ -95.556040927782462, 29.614602293331057 ],[ -95.556264162521359, 29.615779239979805 ],[ -95.556775872895187, 29.614750525044794 ],[ -95.556914987297333, 29.615947833035133 ],[ -95.557513696889401, 29.61495351117193 ],[ -95.557558910652602, 29.616134470634488 ],[ -95.558195929479282, 29.616339158422026 ],[ -95.558244516212099, 29.615177634544775 ],[ -95.55882527144017, 29.616561525865681 ],[ -95.558965972396251, 29.615422665572016 ],[ -95.559446153132754, 29.616801386697823 ],[ -95.559678076574173, 29.615688428594837 ],[ -95.56005779629821, 29.617058544935759 ],[ -95.560379265263265, 29.615974542661295 ],[ -95.560660212691673, 29.6173326586934 ],[ -95.561069548740193, 29.616280664480282 ],[ -95.561251836156302, 29.617623517388921 ],[ -95.561747370087133, 29.616606407670673 ],[ -95.562413519747608, 29.616951622268932 ],[ -95.563065649760588, 29.617315904414909 ],[ -95.563703776057594, 29.617698739141304 ],[ -95.56462444620395, 29.618434632015283 ],[ -95.564638543026348, 29.6192325281466 ],[ -95.564638543026348, 29.6192325281466 ],[ -95.565080417160374, 29.618780282365936 ],[ -95.565514827960186, 29.619111791125349 ],[ -95.565963136743335, 29.619428009036451 ],[ -95.566426136988952, 29.619728781651517 ],[ -95.566519062703364, 29.620125805523074 ],[ -95.56690227793402, 29.620013381609613 ],[ -95.567390000454211, 29.620281425067887 ],[ -95.568576457132423, 29.621074319946569 ],[ -95.578485692451835, 29.625641315413901 ],[ -95.582059571463262, 29.627295409183905 ],[ -95.582617864632084, 29.627503465784848 ],[ -95.583183011429838, 29.627695016524143 ],[ -95.583755809341227, 29.62786973515307 ],[ -95.58433468413331, 29.628027584218472 ],[ -95.584919639771357, 29.628168389078326 ],[ -95.585509904497698, 29.628291787667514 ],[ -95.5861038967318, 29.62839791284178 ],[ -95.586701627753513, 29.628486418319529 ],[ -95.5873509877663, 29.628561276422992 ],[ -95.588003404720268, 29.628615404919724 ],[ -95.588657308534394, 29.628648589079546 ],[ -95.589311906879814, 29.62866098196168 ],[ -95.589967209257679, 29.628652238688996 ],[ -95.590621634725139, 29.62862266269488 ],[ -95.59127360570767, 29.628572215226772 ],[ -95.591923911225422, 29.628500915015181 ],[ -95.592570183447307, 29.628408875067063 ],[ -95.593022365434578, 29.628329427128524 ],[ -95.593212423695576, 29.628296092665561 ],[ -95.593849824907792, 29.628163067126376 ],[ -95.602800151029271, 29.626368306235111 ],[ -95.610891907803705, 29.624767694460097 ],[ -95.625224916235595, 29.621939980261459 ],[ -95.634517408208879, 29.620070079842652 ],[ -95.635014643769196, 29.619982856001396 ],[ -95.635506248525559, 29.619875372000127 ],[ -95.635992202157595, 29.619748138730863 ],[ -95.636470931269827, 29.619601292790396 ],[ -95.636940847307386, 29.619435138043109 ],[ -95.638217695436722, 29.618980092021609 ],[ -95.644537160190339, 29.61593975812249 ],[ -95.64960728492747, 29.613468133017431 ],[ -95.65397244331723, 29.61134013018523 ],[ -95.658734971501758, 29.609017636540109 ],[ -95.659466967381306, 29.608705257324765 ],[ -95.664612770257676, 29.60678590420169 ],[ -95.668899343482266, 29.605238729038675 ],[ -95.673659861122317, 29.603514234231668 ],[ -95.674279320628358, 29.603295442145924 ],[ -95.674907530204976, 29.603097842026244 ],[ -95.675543707446778, 29.602921414302404 ],[ -95.676187839833972, 29.602766505066402 ],[ -95.676837557108954, 29.60263339761941 ],[ -95.67749364733173, 29.602522108625568 ],[ -95.678152946896418, 29.602433080627023 ],[ -95.678816242279922, 29.602366330273291 ],[ -95.679629410164338, 29.602265123824868 ],[ -95.680438556809278, 29.602142318442688 ],[ -95.681243680105766, 29.601997914157767 ],[ -95.682042408873755, 29.601832197361649 ],[ -95.682524911891221, 29.601758191155536 ],[ -95.684382714550139, 29.60155287116272 ],[ -95.686148878959756, 29.60135780522381 ],[ -95.687394682172112, 29.601311978523462 ],[ -95.688868539646464, 29.601271959226128 ],[ -95.690151710856952, 29.601165818517412 ],[ -95.698436609669059, 29.600298147924665 ],[ -95.712948752171997, 29.59875592069745 ],[ -95.727425360877163, 29.59722673715499 ],[ -95.730063955308495, 29.596938957087566 ],[ -95.733949727649971, 29.596558989801441 ],[ -95.734716388953416, 29.596481248015291 ],[ -95.735480483982258, 29.596385213220991 ],[ -95.736241235157195, 29.596270693242214 ],[ -95.736997847446304, 29.596137840603774 ],[ -95.737749521913926, 29.59598698101151 ],[ -95.73849705276551, 29.595817963476087 ],[ -95.739238860822695, 29.595630917208315 ],[ -95.73968443239518, 29.595503361007395 ],[ -95.740122787199525, 29.595355337874917 ],[ -95.740550761628128, 29.595187287767285 ],[ -95.740968339140522, 29.594999723117724 ],[ -95.741374717120607, 29.594793142843816 ],[ -95.741766726672736, 29.594568155863318 ],[ -95.742093732206811, 29.594357919000753 ],[ -95.742508361097521, 29.594065218109517 ],[ -95.742855573975135, 29.593788755497702 ],[ -95.750206098838916, 29.587548561310111 ],[ -95.751466043158246, 29.586506730798465 ],[ -95.751857497869452, 29.586223240166547 ],[ -95.752919092797981, 29.585454276032923 ],[ -95.752332555445463, 29.586032739095078 ],[ -95.752781576627385, 29.585819596241389 ],[ -95.753240303706107, 29.585622849869605 ],[ -95.753708727547192, 29.585442843356951 ],[ -95.754232524054274, 29.585327974696803 ],[ -95.754419439776129, 29.584571635851244 ],[ -95.754752115637473, 29.585196836809061 ],[ -95.755265130273273, 29.585049720136446 ],[ -95.755720322722468, 29.583898388332575 ],[ -95.755773130277575, 29.58488700212299 ],[ -95.756272977435572, 29.584708437697859 ],[ -95.75891159982973, 29.582198694619247 ],[ -95.75906409080406, 29.582129484034105 ],[ -95.759225393537392, 29.582080088954392 ],[ -95.75927259966933, 29.582973477205726 ],[ -95.759393901483193, 29.582051676194759 ],[ -95.75956486788715, 29.582044985761208 ],[ -95.759735932037046, 29.58205996468255 ],[ -95.759902380762256, 29.582096497382661 ],[ -95.760060305871676, 29.582153628555439 ],[ -95.76020817712552, 29.582230118214955 ],[ -95.760357528359791, 29.582284634055643 ],[ -95.760514581097794, 29.582319734057446 ],[ -95.760675408970371, 29.582334979412288 ],[ -95.760849516833545, 29.582353297161845 ],[ -95.760959473467196, 29.582310223675165 ],[ -95.761150730824212, 29.582259144313557 ],[ -95.761295968859798, 29.58219525903268 ],[ -95.765552916998928, 29.580582433023139 ],[ -95.767076118205168, 29.579966382782494 ],[ -95.768940736875379, 29.579202955841627 ],[ -95.769483236697695, 29.578992703569618 ],[ -95.769997353311567, 29.578734306430583 ],[ -95.770477495042314, 29.578430549788173 ],[ -95.770501802324446, 29.578411530287852 ],[ -95.770919621229197, 29.578084608651736 ],[ -95.771317318501048, 29.577700450164933 ],[ -95.771668089531943, 29.577282144469216 ],[ -95.771966292450813, 29.576834195707111 ],[ -95.773099190489546, 29.574945349522867 ],[ -95.774064863551587, 29.573367639187669 ],[ -95.774723904953774, 29.57240515181789 ],[ -95.776611536181179, 29.570631460929519 ],[ -95.780736452570778, 29.566817647533409 ],[ -95.785517680620927, 29.562412860334042 ],[ -95.786727193299015, 29.561301919475817 ],[ -95.787283531731745, 29.56087235224237 ],[ -95.787870323208821, 29.56047498103619 ],[ -95.788485142993864, 29.560111809430662 ],[ -95.789125585802864, 29.559784328756468 ],[ -95.789789254084369, 29.559493685448658 ],[ -95.79047296270376, 29.559241174696368 ],[ -95.791231046099909, 29.559000077095959 ],[ -95.792006569278925, 29.558804787300932 ],[ -95.792404626619032, 29.558729911970136 ],[ -95.792795562398197, 29.558656412734425 ],[ -95.793594076568965, 29.558555550083788 ],[ -95.794398954219844, 29.558502636200263 ],[ -95.80262437541198, 29.558360041418904 ],[ -95.80886477983374, 29.558222529246301 ],[ -95.8107218610362, 29.55818156452592 ],[ -95.816922824807619, 29.558046345186472 ],[ -95.817265073981048, 29.558095590863523 ],[ -95.817597531863811, 29.558181398005637 ],[ -95.817836213232013, 29.558272366670142 ],[ -95.817915512085534, 29.558302625483968 ],[ -95.818213581157977, 29.558457080526612 ],[ -95.819194084814839, 29.559054548455535 ],[ -95.819497850086577, 29.55920294521766 ],[ -95.819746221093439, 29.559286059686418 ],[ -95.81982329796827, 29.559311965459216 ],[ -95.820162627658732, 29.55937935996042 ],[ -95.820509582324561, 29.559403948782403 ],[ -95.820857889108325, 29.55938506580496 ],[ -95.824718063094679, 29.558959426854781 ],[ -95.831361084271393, 29.558192160024365 ],[ -95.844477944847185, 29.556699418003522 ],[ -95.85819677636924, 29.555135983488686 ],[ -95.871929703883254, 29.553559444692421 ],[ -95.88329102370966, 29.552248793884623 ],[ -95.888322559339912, 29.55167222500237 ],[ -95.892815691972388, 29.551157061377207 ],[ -95.897736248978021, 29.550578763556558 ],[ -95.910399305959999, 29.549116867213961 ],[ -95.923855636410593, 29.547576437107175 ],[ -95.937298627214119, 29.546046220812695 ],[ -95.945273176362306, 29.54514221201439 ],[ -95.951137220130576, 29.544476059357219 ],[ -95.964236136938482, 29.543007002970786 ],[ -95.970188404070598, 29.542353888884303 ],[ -95.975688436918546, 29.541750285267089 ],[ -95.987234139258348, 29.540462888259988 ],[ -95.989329192556497, 29.540230695528845 ],[ -95.991688089357012, 29.539959187914096 ],[ -96.000130574944478, 29.538993683647849 ],[ -96.014157906295239, 29.537433042387075 ],[ -96.027336767808151, 29.535959535239698 ],[ -96.041364054438176, 29.534396055545262 ],[ -96.048154640748862, 29.533570949334194 ],[ -96.055404650675584, 29.532808847648162 ]]
                   },
                   "properties": {"name": "US90A"}
                  },
                  { "type": "Feature",
                    "geometry":{ 
                      "type": "LineString",   
                      "coordinates": [[ -95.443899579354223, 29.596551757594483 ],[ -95.450711550556974, 29.596484410458228 ],[ -95.45277832877342, 29.596462723335119 ],[ -95.45356724676536, 29.596499811907325 ],[ -95.454353644075795, 29.596564170654567 ],[ -95.455136735454545, 29.596655778795721 ],[ -95.45591495406353, 29.59677442440762 ],[ -95.456686734752026, 29.596919892830492 ],[ -95.457381279038472, 29.59709116724034 ],[ -95.458067954181161, 29.597285101420141 ],[ -95.458745995832203, 29.597501158248217 ],[ -95.459414622832455, 29.597739145305841 ],[ -95.460072268112356, 29.597998849392376 ],[ -95.460718162351412, 29.598279734717035 ],[ -95.461351533466939, 29.598581437290846 ],[ -95.463276789092376, 29.599511264356774 ],[ -95.464685045741405, 29.600188541465812 ],[ -95.46854040288855, 29.601866776479294 ],[ -95.473923714541257, 29.604273032904768 ],[ -95.476934942436216, 29.605718447810595 ],[ -95.480400133276476, 29.607309524771566 ],[ -95.483843080659824, 29.608909555267655 ],[ -95.486513278910948, 29.610116556280001 ],[ -95.489106794010056, 29.611312031891693 ],[ -95.493886416648991, 29.613552388324642 ],[ -95.495670092148671, 29.61438838323145 ],[ -95.496562499795544, 29.6148320294066 ],[ -95.500388952514228, 29.617062606614923 ],[ -95.501303319592438, 29.617555805086603 ],[ -95.502232662657988, 29.618025656379043 ],[ -95.503177768799176, 29.618472184994413 ],[ -95.504137084846761, 29.618894830235377 ],[ -95.505109046665112, 29.619293208653353 ],[ -95.506094454690611, 29.619666998584208 ],[ -95.510863881626875, 29.621520540100246 ],[ -95.511482803464602, 29.62179255826964 ],[ -95.512088445235847, 29.622084688405721 ],[ -95.512681608069855, 29.622396612064549 ],[ -95.513260731305806, 29.622727768933142 ],[ -95.513825827437429, 29.623077987650749 ],[ -95.514374555254321, 29.623446522783393 ],[ -95.514906935766419, 29.623832856677883 ],[ -95.516322721289569, 29.624977836241506 ],[ -95.518154168081537, 29.62651674184098 ],[ -95.520811518798681, 29.628749287154772 ],[ -95.524148403078357, 29.631583919128758 ],[ -95.537081997353297, 29.642482136629464 ]]
                   },
                     "properties": {"name": "beltway8"}
                   }]};
    
like image 72
geocodezip Avatar answered Oct 10 '22 02:10

geocodezip


Using this example as a guide, I was able to put GeoJSON data in a local file, and load it.

The html file:

<!DOCTYPE html>
<html style="height:100%;margin:0;padding:0">
    <body style="height:90%;margin:10;padding:0">
        <h1>Google Maps</h1>

        <div id="gmap" style="width:100%;height:80%;"></div>

        <script>
var coordinates;
function showMap() {
    var script = document.createElement("script");
    script.src = "my_geojson.js";
    document.getElementsByTagName("head")[0].appendChild(script);
}

window.geojson_callback = function(results) {
    console.log(results.geometry.coordinates);
    coordinates = results.geometry.coordinates;
    var centerCoord = new google.maps.LatLng(coordinates[0], coordinates[1]);
    var mapCanvas = document.getElementById("gmap");
    var mapOptions = {center: centerCoord, zoom: 8};
    var map = new google.maps.Map(mapCanvas, mapOptions);
    var marker = new google.maps.Marker({position:centerCoord});
    marker.setMap(map);
}
        </script>

        <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=showMap"></script>

    </body>
</html>

The my_geojson.js file:

geojson_callback({
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [44.6294281206632,-123.060811758041]
  },
  "properties": {
    "name": "In London"
  }
});

Notes:

  1. I tested by having both the html and GeoJSON file in the same folder.
  2. The GeoJSON data is wrapped inside geojson_callback() - you could use any name there - and stored as a JavaScript file (note the .js extension).
  3. Replace YOUR_API_KEY with your actual key value.

Tested on Firefox 51.0.1 and Opera 42.0.

like image 2
Antony Avatar answered Oct 10 '22 00:10

Antony