Google Map not loading with separate files - javascript

I can't see the google map on my monitor, but when I put all the code in a single html file and use script tags it works.
Index.html file is:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIpWlWVDAqVEyW20SX6MfThL-iz9IWeQA&callback=initMap"
></script>
</body>
</html>
Script.js file is:
function initMap() {
var map;
map = new google.maps.Map(document.getElementById('map'),
{
center: { lat: -34.397,
lng: 150.644
},
zoom: 8
}
);
}
style.css file is:
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}

#map { width:100%; height:200px;}
or to fill whole window:
#map { width:100%; min-height:100%;}
if it's first child with min-height property. PS. You can also try to add overflow:hidden; for second example.

According to the documentation : Google Maps APIs, just put your JavaScript (script.js) after your map.
<div id="map"></div>
<script src="script.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIpWlWVDAqVEyW20SX6MfThL-iz9IWeQA&callback=initMap" async defer></script>
Edit : Don't forget "async defer" at the end of the second script.

I consolidated your HTML and it works fine. For some reason, your callback function is not working when in a separate file.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
function initMap() {
var map;
map = new google.maps.Map(document.getElementById('map'),
{
center: { lat: -34.397, lng: 150.644},
zoom: 8
}
);
}
</script>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIpWlWVDAqVEyW20SX6MfThL-iz9IWeQA&callback=initMap"
></script>
</body>
</html>

When you execute script.js it tries to find the div with the id="map". But it's not initialized yet .So, you need to do two things:
Include the script.js file after your <div id="map"></div>
Call initMap() after the page has loaded. E.g. like this (at the end) <script>initMap()</script>

Related

How to add an array of markers using Lat/Lng - google maps api

Would someone be able to explain what I need to do to add an array of markers using javascript. I understand that basics of displaying the map and adding a marker or even multiple markers but they have to be hard coded in. I want to display a list of markers from an API.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>test</h3>
<div id="map"></div>
<style>
#map {
height: 800px;
width: 100%;
}
</style>
<script>
// Initialize and add the map
function initMap() {
// The location of L.A
var L.A = {
lat: 34.0503743841965,lng: -118.24525401223457
};
// The map, centered at L.A
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 8,
center: L.A,
mapId: "hidden"
});
//here is where i am having trouble
//how can i turn this into an array of lat/lng that add a marker for each lat/lng?
var markerView = new google.maps.marker.AdvancedMarkerView({
map: map,
position: {
lat: 37.4239163,
lng: -122.0947209
},
});
}
window.initMap = initMap;
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=hiddenE&v=beta&libraries=marker&callback=initMap">
</script>
</body>
</html>

Javascript use onclick and geolocation to retrieve current location

I have to add a click handler to the button provided that will retrieve the users current location using the geolocation api.
Here's my code, I'm trying to use geolocation to set the current location of the user to the map but the button for some reasons does not work. Can anyone point out what I'm doing wrong and help me out?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
<style>
#mapid { height: 600px; }
</style>
<script>
const Mapping = {
map : null,
initializeMap : () => {
Mapping.map = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap',
subdomains: ['a','b','c']
}).addTo( Mapping.map );
},
resetLocation : ({lat,lon}) => {
Mapping.map.setView([lat,lon], 13);
}
}
window.onload = () => {
Mapping.initializeMap();
userCode();
}
function userCode() {
// JS CODE START
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
let pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
Mapping.setPosition(pos);
Mapping.open(Mapping.map);
Mapping.map.setPosition(pos);
})
}
// JS CODE END
}
</script>
</head>
<body>
<!-- HTML CODE GOES HERE-->
<button onclick="userCode()">Get Location</button>
<div id="mapid" style="width: 600px; height: 400px;"></div>
</body>
</html>
Use
Mapping.resetLocation({lat:pos.lat,lon:pos.lng});
Instead of
Mapping.setPosition(pos);

Getting App Inventor 2 variable values in an HTML/Javascript file

I am setting up a simple map program for a user to see locations on an embedded Google map. I have the map working, but I was wondering if there is a way for the user to input coordinates in AI2 then have the map center there.
Here is the HTML file I am using to display the map.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&sensor=true&language=en"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// Add a listener for the click event
google.maps.event.addListener(map, 'click', showPosition);
}
function showPosition(event) {
// display a marker on the map
marker = new google.maps.Marker({
position: event.latLng,
map: map,
icon: "./marker.png"
});
// print the selected position to the page title
var position = event.latLng.lat().toFixed(6) + ", " + event.latLng.lng().toFixed(6);
window.document.title = position;
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Yes, that's possible.
You can use WebViewString to communicate values back and forth between your App and the WebViewer. In your App, you get and set the WebViewer.WebViewString properties. In your webviewer, you open to a page that has Javascript that references the window.AppInventor object, using its getWebViewString() and setWebViewString(text) methods.
See also the following snippet for a complete example.
<!doctype html>
<head>
<meta name="author" content="puravidaapps.com">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
</head>
<body>
<script>
document.write("The value from the app is<br />" + window.AppInventor.getWebViewString());
window.AppInventor.setWebViewString("hello from Javascript")
</script>
</body>
</html>

Popup window does't work with google maps

I have a script that opens a popup windows every time the page is loaded. The script is:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>ColorBox demo</title>
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
</head>
<body>
<h1>Hello, there!</h1>
<h2>This is some content</h2>
<p>The popup will open in five seconds</p>
<div class="test">
<p>testtest</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script>
function openColorBox(){
$.colorbox({iframe:true, width:"60%", height:"60%", href: "http://www.sitepoint.com"});
}
setTimeout(openColorBox,0);
</script>
</body>
</html>
It works fine, but if I use it with google maps, the popup windows resizes unexpectedly and the background color that surrounds the popup disappears. The code is:
<!DOCTYPE html>
<html>
<html lang="ro">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
</script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100%; width: 100%; }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7_q4j3wbRGmQr3V-wtKZrlv7Uz_-G7Dk&sensor=true">
</script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng( 44.4325, 26.1039),
zoom: 12
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div id="map-canvas">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script>
function openColorBox(){
$.colorbox({iframe:true, width:"30%", height:"30%", href: "http://www.sitepoint.com"});
}
setTimeout(openColorBox,0);
</script>
</body>
</html>
I can't figure out why it won't display properly. Does anyone have an idea?
Thanks a lot!
I'm not sure about that api colorbox but I would go with the jQuery ui modal and just customize the look from there. Run this code below. Note: I added the reference to the jQuery ui css and code base. Then I append a new div to the body with an iframe in it then call the dialog method on that element. Hope this helps.
<!DOCTYPE html>
<html>
<html lang="ro">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7_q4j3wbRGmQr3V-wtKZrlv7Uz_-G7Dk&sensor=true"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100%; width: 100%; }
</style>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng( 44.4325, 26.1039),
zoom: 12
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div id="map-canvas">
</div>
<script>
function openColorBox(){
$('body').append("<div id='modalBox'><iframe style='height:300px; width:350px;' src='http://www.sitepoint.com'></iframe></div>");
$('#modalBox').dialog({
height:400,
width: 400
});
}
setTimeout(openColorBox,0);
</script>
</body>
</html>

Uncaught ReferenceError: google is not defined (index):21 initialize ( Google Maps API )

Keep on getting this error in the console "Uncaught ReferenceError: google is not defined". Been doing it for a while now but no luck. Any help greatly appreciated. Thanks in advance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"</script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize(location) {
console.log(location);
var mapOptions = {
center: new google.maps.LatLng(location.coords.latitude, location.coords.longitude),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
$(document).ready(function()
{
navigator.geolocation.getCurrentPosition(initialize);
});
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
There was problem in script declaration in your code. You missed to close script tag for jquery and hence google map js wasn't load properly.
Just change below...
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"**[[Problem is here]]**</script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
to
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
and it should work fine.
Here's Demo
For me
Adding this line
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
Before this line.
<script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>
worked

Categories