$(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"
}
}
]
}
Access to XMLHttpRequest at 'file:///<path to file>' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.. I get a similar error in Firefox. Once I get the GeoJSON to load, it is obvious that the coordinates are "backwards" (latitude and longitude are reversed, in GeoJSON, the format is[longitude, latitude]. I don't ever see the error you report (Cannot read property 'loadGeoJson' of undefined) - geocodezip