CODEWITHSUNDEEP
javascriptjsongoogle-mapsgoogle-maps-api-3geojson
Thamara Gerig
Thamara Gerig

Reputation: 23

Load geojson on google maps api

 $(document).ready(function(){
  $("button").click(function(){
    $("#apartado-api").toggle();
  });
});

           function initMap() {
             var map = new google.maps.Map(document.getElementById('map'), {
             center: {lat:  40.416775, lng:-3.703790},
             zoom: 14
           });
 
 
 
 map.data.loadGeoJson('map.json');
 
 
 ////////////////////////////////////////////this would be on a separate json file called map.json. I want to bring this file to the js one and add the marker to the map
 {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [ -3.717451,  40.469264 ]
      },
      "properties": {
       "name": "Peluquería Canina Pet Shop",
         "address": "Calle Valdesangil, 9, 28039 Madrid"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [ -3.649130, 40.476251 ]
      },
      "properties": {
        "name": "Zoolife Veterinaria",
        "address": "Av. de Menéndez Pelayo, 9, 28009 Madrid"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-3.668233, 40.478529 ]
      },
      "properties": {
        "name": "La Caseta",
           "address": "Calle de Arturo Soria, 320, 28033 Madrid"
      }
    }
  ]
}
 /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
       #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #boton-mapa-api{
        z-index: 1000;
        position: absolute;
        top: 60px;
        left: 15px;
        width: 400px;
        margin: 0;
        cursor: pointer;
      }

      #apartado-api{
        width: 400px;
        height: 400px;
        z-index: 900;
        position: absolute;
        top: 70px;
        left: 15px;
        background: rgb(255, 255, 255);
        border-radius: 20px;
        -webkit-box-shadow: 2px 9px 11px 0px rgba(0,0,0,0.07);
        -moz-box-shadow: 2px 9px 11px 0px rgba(0,0,0,0.07);
        box-shadow: 2px 9px 11px 0px rgba(0,0,0,0.07);
      }

      /*comienzo botón estandar*/
.boton-general {
    font-family: 'ABeeZee', sans-serif;
    font-size: 1em;
    color: white;
    letter-spacing: 1px;
    padding: 15px;
    margin: 20px;
    font-weight: 900;
    border: none;
    border-radius: 50px;
    /*gradiente*/
    background: rgb(123, 228, 149);
    background: linear-gradient(175deg, rgba(123, 228, 149, 1) 32%, rgba(64, 185, 184, 1) 100%);
    transition: all 0.3s ease-in-out;
    /*sombras*/
    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: 7px 6px 14px 0px rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 7px 6px 14px 0px rgba(0, 0, 0, 0.12);

}

/*estados del botón*/
.boton-general:hover {
    letter-spacing: 2.5px;
    border-radius: 10px;
}



.boton-general:focus {
    outline: 0;

}
<!DOCTYPE html>
<html>
  <head>
    <title>Animal Rooms</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <button id="boton-mapa-api" class="boton-general">¿Qué buscas?</button>

    <div id="apartado-api"></div>
    <!-- div del mapa -->
    <div id="map"></div>
    <!-- div del mapa -->

    <!-- link API -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap">
    </script>
    <script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"></script>
     <!-- js de la API -->
    <script src="script.js"></script>
  </body>
</html>

I've been reading the documentation for the google maps js API and I can't figure this out. I want to load a geojson file to the map so it can show all the markers, but in the documentation (shown below) it uses a url. How can I do the same but with a local file (using my own geojson)?

This is the google api documentation

var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: new google.maps.LatLng(2.8,-187.3),
      mapTypeId: 'terrain'
    });


    map.data.loadGeoJson('google.json');

This is my geojson. According to the console, the error is in "type": "FeatureCollection" (the ":")

 {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [ -3.717451,  40.469264 ]
      },
      "properties": {
       "name": "Peluquería Canina Pet Shop",
         "address": "Calle Valdesangil, 9, 28039 Madrid"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [ -3.649130, 40.476251 ]
      },
      "properties": {
        "name": "Zoolife Veterinaria",
        "address": "Av. de Menéndez Pelayo, 9, 28009 Madrid"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-3.668233, 40.478529 ]
      },
      "properties": {
        "name": "La Caseta",
           "address": "Calle de Arturo Soria, 320, 28033 Madrid"
      }
    }
  ]
}

Console error

Console error geoJSON

View on http://geojson.io/

View on my local server

Upvotes: 1

Views: 3704

Answers (1)

evan
evan

Reputation: 5699

There's no problem with your json file nor with the way you load it. Try running this codesandbox for demonstration in vanilla JS.

As for your own jquery code, it works fine if you format it properly and use the right files, placed correctly at root-level. Please try the code below for each file. Hope this helps!

index.html

<!DOCTYPE html>
<html>

<head>
    <title>Animal Rooms</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <button id="boton-mapa-api" class="boton-general">¿Qué buscas?</button>

    <div id="apartado-api"></div>
    <!-- div del mapa -->
    <div id="map"></div>
    <!-- div del mapa -->

    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
    </script>

    <!-- js de la API -->
    <script src="script.js"></script>
</body>

</html>

script.js

$(document).ready(function() {
    $("button").click(function() {
        $("#apartado-api").toggle();
    });
});

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 40.416775, lng: -3.703790 },
        zoom: 12
    });
    map.data.loadGeoJson('map.json');
}

style.css

#map {
    height: 100%;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#boton-mapa-api {
    z-index: 1000;
    position: absolute;
    top: 60px;
    left: 15px;
    width: 400px;
    margin: 0;
    cursor: pointer;
}

#apartado-api {
    width: 400px;
    height: 400px;
    z-index: 900;
    position: absolute;
    top: 70px;
    left: 15px;
    background: rgb(255, 255, 255);
    border-radius: 20px;
    -webkit-box-shadow: 2px 9px 11px 0px rgba(0, 0, 0, 0.07);
    -moz-box-shadow: 2px 9px 11px 0px rgba(0, 0, 0, 0.07);
    box-shadow: 2px 9px 11px 0px rgba(0, 0, 0, 0.07);
}

/*comienzo botón estandar*/

.boton-general {
    font-family: 'ABeeZee', sans-serif;
    font-size: 1em;
    color: white;
    letter-spacing: 1px;
    padding: 15px;
    margin: 20px;
    font-weight: 900;
    border: none;
    border-radius: 50px;
    /*gradiente*/
    background: rgb(123, 228, 149);
    background: linear-gradient(175deg, rgba(123, 228, 149, 1) 32%, rgba(64, 185, 184, 1) 100%);
    transition: all 0.3s ease-in-out;
    /*sombras*/
    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: 7px 6px 14px 0px rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 7px 6px 14px 0px rgba(0, 0, 0, 0.12);
}

/*estados del botón*/

.boton-general:hover {
    letter-spacing: 2.5px;
    border-radius: 10px;
}

.boton-general:focus {
    outline: 0;
}

map.json

 {
     "type": "FeatureCollection",
     "features": [{
             "type": "Feature",
             "geometry": {
                 "type": "Point",
                 "coordinates": [-3.717451, 40.469264]
             },
             "properties": {
                 "name": "Peluquería Canina Pet Shop",
                 "address": "Calle Valdesangil, 9, 28039 Madrid"
             }
         },
         {
             "type": "Feature",
             "geometry": {
                 "type": "Point",
                 "coordinates": [-3.649130, 40.476251]
             },
             "properties": {
                 "name": "Zoolife Veterinaria",
                 "address": "Av. de Menéndez Pelayo, 9, 28009 Madrid"
             }
         },
         {
             "type": "Feature",
             "geometry": {
                 "type": "Point",
                 "coordinates": [-3.668233, 40.478529]
             },
             "properties": {
                 "name": "La Caseta",
                 "address": "Calle de Arturo Soria, 320, 28033 Madrid"
             }
         }
     ]
 }

Upvotes: 1

Related Questions