I'm trying to use the Google Maps API to get a single map to show. I'm using Javascript.
It should be a single page with one header and one map below the header. I signed up for the Google Maps API recently, so I'm not sure if it takes a certain amount of time for the API key to be active or not. I've got other CSS files and a googlemaps.js file that doesn't have anything in it yet.
Here's my code. Any ideas why it's not working?
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, intial-scale=1.0;'>
<title>API(s)</title>
<link rel='stylesheet' href='styles/semantic.min.css'>
<link rel='stylesheet' href='styles/main.css'>
</head>
<body>
<div class="ui two column centered stackable grid container">
<div class="column">
<h1 class="goog-header">Location Based Image Search</h1>
</div>
</div>
<div class="ui one column stackable grid container js-images-container">
<div class="column">
<div id="map"></div>
</div>
</div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXTmorapOu1WquB3VlsLrckhE45Bgfrfw&callback=initMap" async defer></script>
<script src='javascript/googlemaps.js'></script>
</body>
</html>
Try to change your map DIV to:
<div id="map" style="width:800px;height:600px"></div>
Related
This question already has answers here:
Google Map not shown
(2 answers)
google map not displaying on my webpage
(1 answer)
Closed 1 year ago.
So maybe this mistake is pretty naïve, but I can't load a javascript map from the Google Maps API.
What I'm trying to accomplish is to make a map appear at the right side of the buttons. But...I can't.
Here's my code.
HTML
<!DOCTYPE html>
<html>
<head>
<title>salgamos</title>
<link rel="stylesheet" href="{{ url_for('static', filename= 'css/en_corto.css') }}">
<script> </script>
</head>
<body>
<div class="domainhome">
<p>salgamos.com.mx</p>
</div>
<div class="flex-container">
<div class="left-bar">
<div>
<button class="adondequieresir"><p>¿a dónde quieres ir?</p></button>
</div>
<div>
<button class="agregarubicacion">
<p style="float: left;">¡agrega tu ubicación?</p>
</button>
</div>
<div>
<button class="personasunidas">
<p style="float: left;">(n) personas unidas</p>
</button>
</div>
</div>
<div class="right-bar">
<div id="map">
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
async
></script>
</div>
</div>
</div>
JS
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});
}
I've found similar posts, but for things far more complex, and their answers only confused me. I would kindly appreciate if someone could help me.
The script tag should not be wrapped inside the div#map tag.
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAzw5lUQhZWbnyya36w_UiP-DjcdGj6Sfw&callback=initMap&libraries=&v=weekly" async></script>
Can anyone help in resolving this issue?, I am trying to create a map showing map markers of power plants in the US and also a heatmap later on. The problem with my code is that my map is not even showing when it goes live. I have attached the config, location and index files to help with finding the issue. I initially had a local csv file, which I converted to geojson which was then deployed on github.
config.js
// API key
const API_KEY = "pk.eyJ1IjoidGF1cmVhbmgiLCJhIjoiY2tmb21yc2tzMDFnYTJ0bXVuMzVub2tvYyJ9.vhUstehmvTj6HgfalepX8w";
location.js
var myMap = L.map("map", {
center: [37.7749, -122.4194],
zoom: 13
});
// Adding tile layer
L.tileLayer("https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}", {
attribution: "© <a href='https://www.mapbox.com/about/maps/'>Mapbox</a> © <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> <strong><a href='https://www.mapbox.com/map-feedback/' target='_blank'>Improve this map</a></strong>",
tileSize: 512,
maxZoom: 18,
zoomOffset: -1,
id: "mapbox/streets-v11",
accessToken: API_KEY
}).addTo(myMap);
var url = "https://taureanh.github.io/geojson/";
d3.json(url, function(response) {
console.log(response);
for (var i = 0; i < response.length; i++) {
var geometry = response[i].geometry;
if (geometry) {
L.marker([geomtery.coordinates[1], geometry.coordinates[0]]).addTo(myMap);
}
}
});
index.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Map Markers</title>
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<!-- Our CSS -->
<link rel="stylesheet" href="./static/css/style.css" />
</head>
<body>
<div id="map"></div>
<!-- API key -->
<script type="text/javascript" src="static/js/config.js"></script>
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet#1.3.3/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>
<!-- D3 CDN -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- JS -->
<script type="text/javascript" src="static/js/location.js"></script>
<!-- <script type="text/javascript" src="static/js/heatmap.js"></script> -->
<!-- Leaflet heatmap plugin-->
<script type="text/javascript" src="static/js/leaflet-heat.js"></script>
</body>
</html>
d3.json expects JSON, but your endpoint is returning HTML:
curl -I https://taureanh.github.io/geojson/
HTTP/2 200
server: GitHub.com
content-type: text/html; charset=utf-8
You should update your endpoint so that is actually returns JSON: content-type: application/json; just data, no <html> tags.
Alternatively, you could update location.js to get the endpoint (d3.request(url, function(html)), then parse the response into JSON yourself (strip the html tags, then use JSON.parse). This will work, but it's messy and not ideal.
I am trying to get on my website the gmaps with few markers but i am getting the grey screen or partially grey screen.Before, I used google maps API the same way and everythings works fine. If you can help me I would be grateful.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Zadanie 7</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY"></script>
</head>
<body>
<div class="container-fluid" id="map" style="height: 500px;">
</div>
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<h4>Zadanie 6 Martin Kranec</h4>
<ul class="nav nav-pills nav-stacked">
<li>Prvá Stránka</li>
<li>Druhá Stránka</li>
<li class="active">Tretia Stránka</li>
</ul><br>
</div>
<div class="container-fluid">
<div class='container-fluid'><div class='table-responsive'><table class='table'><thead><tr><th>Vlajka</th><th>Štát</th><th>Počet Navštevníkov</th></tr></thead><tbody><tr><td>World</td><td>World</td><td>2</td></tr><tr><td><img class='flag' src='http://www.geonames.org/flags/x/sk.gif'></td><td><a href='countrystatistics.php?countrycode=sk'>Slovensko</a></td><td>2</td></tr></tbody></table></div></div> </div>
</div>
</div>
<footer class="container-fluid">
<p>©Martin Kranec Webové technológie</p>
</footer>
<script type='text/javascript'>
var lat=[];
var lon=[];
lat.push(48.15);
lon.push(17.1167);
lat.push(48.1704);
lon.push(17.4209);
</script>
<script>
function initMap() {
//alert(lat[1]);
var mapProp = {
center: new google.maps.LatLng(89, -25),
zoom: 4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapProp);
var count = lat.length;
for (var i = 0; i < count; i++) {
var myLatLng = {lat: lat[i], lng: lon[i]};
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: ''
});
}
}
initMap();
//initMap();
</script>
<!--<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY&callback=initMap"></script>-->
</body>
</html>
and here is my website where I work on this project http://147.175.98.165/zadanie7/thirdpage.php
Google maps has a lot of race conditions. I use this code a lot to display them instead. This code should be in a ready event like jquery ready.
new Promise(function (resolve, reject) {
if (!document.getElementById('google-maps')) {
var fileref = document.createElement('script');
fileref.setAttribute("type", "text/javascript");
var link = "https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY&callback=mapsFinishedLoading";
fileref.setAttribute("async", "async");
fileref.setAttribute("defer", "defer");
fileref.setAttribute("src", link);
fileref.setAttribute("id", 'google-maps');
window.mapsFinishedLoading = resolve;
document.getElementsByTagName("body")[0].appendChild(fileref);
} else {
resolve();
}
}).then(function (result) {
//Your map should be available now
mapOptions={};//put your options here
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
});
Make sure your map div is visible before calling
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
My HTML code:
<html>
<head>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=mykeyM&callback=myMap" type="text/javascript">
</script>
</head>
<body>
<script>
function myMap() {
var mapProp= {
center:new google.maps.LatLng(37.00,22.077462),
zoom:15,
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
<div class="container" id="fh5co-contact-section">
<div class="row">
<div class="col-md-3 col-md-push-1 animate-box">
<h3>Our Address</h3>
<ul class="contact-info">
<li><i class="icon-mail"></i>test#gmail.com</li>
<li><i class="icon-globe2"></i>www.test.com</li>
</ul>
</div>
<div class="col-lg-9 col-md-6 col-sm-9 col-xs-12">
<div id="googleMap" style="width:100px;height:450px;"></div>
</div>
</div>
</div>
</body>
</html>
Check what the error is in the google console. Remove the comma after the zoom property. Make sure you specify the size of the "googleMap" div, the API does not automatically set the size. Also, ensure you signed up for the API usage and have the correct library imported:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
See a quick example here:
https://developers.google.com/maps/documentation/javascript/examples/map-simple
If you have not gotten an API key and imported their libraries, see this link:
https://developers.google.com/maps/documentation/javascript/get-api-key
I am working with the jQuery mobile google maps example here, focusing on the first "Basic Map Example".
http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html
I want to be able to dynamically add markers to the basic_map, but I am having some trouble. I'm new to jQuery mobile and JavaScript.
Here is my edited version of the basic-map example from the jQuery mobile UI website. If you save it in the jQuery mobile demos folder, then everything should render properly. I have added a button at the bottom of the map page and also the addMarkers function. When you load the page, the map shows up centered at the mobileDemo coordinates (-41, 87), which is close to chicago, but not quite there. When you click on the button, I want to update the map with another marker at the chicago point, but the screen goes blank.
This is just a mock example of what I really want to do. In my longer, more complicated program, I'm querying a database to find addresses that match the query, then I want to put those markers up on the map dynamically. What do I need to change about this source code to be able to plot the Chicago point (or other markers on the fly)?
<!doctype html>
<html lang="en">
<head>
<title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
<link type="text/css" rel="stylesheet" href="css/jquery-mobile-1.0/jquery.mobile.css" />
<link type="text/css" rel="stylesheet" href="css/mobile.css" />
<script type="text/javascript" src="js/modernizr-2.0.6/modernizr.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript" src="js/jquery-1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-mobile-1.0/jquery.mobile.min.js"></script>
<script type="text/javascript" src="js/jquery.ui-1.8.15/jquery.ui.autocomplete.min.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<script type="text/javascript" src="../ui/jquery.ui.map.js"></script>
<script type="text/javascript" src="../ui/jquery.ui.map.services.js"></script>
<script type="text/javascript" src="../ui/jquery.ui.map.extensions.js"></script>
<script type="text/javascript">
var mobileDemo = { 'center': '41,-87', 'zoom': 7 };
var chicago = new google.maps.LatLng(41.850033,-87.6500523);
var map
function addMarkers(){
map = new google.maps.Map(document.getElementById('map_canvas'));
var marker = new google.maps.Marker({
map: map,
position: chicago
});
}
$('#basic_map').live('pageinit', function() {
demo.add('basic_map', function() {
$('#map_canvas').gmap({'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':true, 'callback': function() {
var self = this;
self.addMarker({'position': this.get('map').getCenter() }).click(function() {
self.openInfoWindow({ 'content': 'Hello World!' }, this);
});
}});
}).load('basic_map');
});
$('#basic_map').live('pageshow', function() {
demo.add('basic_map', function() { $('#map_canvas').gmap('refresh'); }).load('basic_map');
});
</script>
</head>
<body>
<div id="basic_map" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
<a data-rel="back">Back</a>
</div>
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:350px;"></div>
</div>
</div>
<div data-role="content">
Add Some More Markers
</div>
</div>
</body>
</html>
Please check the below example.
In the first map load there isn't any marker. When you click the button then a marker is dynamically added without a need for page or map refresh.
<!doctype html>
<html lang="en">
<head>
<title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.min.js"></script>
<script type="text/javascript">
var chicago = new google.maps.LatLng(41.850033,-87.6500523),
mobileDemo = { 'center': '41,-87', 'zoom': 7 };
function initialize() {
$('#map_canvas').gmap({ 'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':false });
}
$(document).on("pageinit", "#basic-map", function() {
initialize();
});
$(document).on('click', '.add-markers', function(e) {
e.preventDefault();
$('#map_canvas').gmap('addMarker', { 'position': chicago } );
});
</script>
</head>
<body>
<div id="basic-map" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
<a data-rel="back">Back</a>
</div>
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:350px;"></div>
</div>
Add Some More Markers
</div>
</div>
</body>
</html>
The initial map:
The map after the button's click: