I am a beginner to javascript and am trying to load a simple Google Map in my browser (firefox). However, the map does not load.
Below is my html:
<!doctype html>
<html>
<head>
<title>Can you guess the Country?</title>
<meta charset="utf-8">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key={MY_API_KEY}&sensor=true"></script>
<script src="mapGame.js"></script>
</head>
<body>
<div id="map">
</div>
</body>
</html>
Below is the linked mapGame.js:
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
Any help is much appreciated!
probably has to do with the height of the div#map, the map is there but you just don't see it.
<head>
<style>
#map {
height:500px;
}
</style>
</head>
Related
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>
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>
How can I mark multiple locations in google map. Latitude and Longitute are getting from my table as json response. Please check below code and json response and correct me?
When I alert(myCenter) latitude and longitude are showing correctly but not showing correctly on map
Json encode
[{"id":"1","lat":"9.9710364","lng":"76.2382596","address":"Ernakulam, pra"},{"id":"2","lat":"9.5946677"
,"lng":"76.5030831","address":"Kochi pra"},{"id":"3","lat":"8.8862925","lng":"76.5850831","address":"Kollam
pra"},{"id":"4","lat":"8.4998965","lng":"76.8543216","address":"Trivandrum pra"}]
Code
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<body>
<h1>Load Multiple Marker</h1>
<div id="googleMap" style="width: 800px; height: 500px;">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Map -->
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
$(function(){
$.ajax({
url: 'geo-locations.php',
success:function(data){
//Loop through each location.
$.each(data, function(){
//Plot the location as a marker
var myCenter = new google.maps.LatLng(this.lat, this.lng);
//alert(myCenter)
function initialize()
{
var mapProp = {
center: myCenter,
zoom:5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position: myCenter,
title:'Click to zoom'
});
marker.setMap(map);
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
});
}
});
});
</script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
There is no need to initialize map instance per every marker, you could change the flow to:
initialize a map
once the data is loaded, place markers on the map
Example
$(function () {
$.ajax({
url: 'https://rawgit.com/vgrem/e2dda2a255a24df92bff/raw/d9c694b635612ee405c7d16c355dca19adb6380c/geo-locations.json',
success: function (data) {
initialize(data);
}
});
});
function addMarker(map,position){
var marker = new google.maps.Marker({
position: position,
title: 'Click to zoom'
});
marker.setMap(map);
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker, 'click', function () {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
}
function initialize(data) {
var mapProp = {
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var bounds = new google.maps.LatLngBounds();
$.each(data,function(pos) {
var pos = new google.maps.LatLng(this.lat, this.lng);
bounds.extend(pos);
addMarker(map,pos);
});
map.fitBounds(bounds);
}
<h1>Load Multiple Marker</h1>
<div id="googleMap" style="width: 800px; height: 500px;">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
PhpFiddle
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>
I am new to mobile programming and trying out the google map v3 tutorial,
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript">
function initialize() {
alert('init');
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
var myKey = "mykey";
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "https://maps.googleapis.com/maps/api/js?key="+myKey+"&sensor=false&callback=initialize";
document.body.appendChild(script);
}
</script>
</head>
<body onload="loadScript()">
<div id="map_canvas" style="width: 400px; height: 400px">
</div>
</body>
</html>
I tried this using my computer in netbean, everything works, but when i download it into my android device (as an application), the callback function ( initialize ) is never called. Anyone know what is the problem to this?
Thanks
First off all download phone gap plugin
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
try to run the above code in the mobile/emulator ,then you can have sample map displayed