Splitting page into JS/CSS/HTML - javascript

I would like to break this code into one JS, CSS and HTML file each. How could I do that?
<!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"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
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>


You can move the Javascript (contents between scripts tags) to a separate file, for example
<script src="scripts/myscripts.js"></script>
Similarly you can move the CSS (contents between style tags and embed it like this:
<link rel="stylesheet" href="my.css" />
So your Javascript file would look like this:
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
and your CSS file like this:
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}

Related

Google map not showing without css part

i am working on demo code
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script src="js/index.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC7CfuQy1peyVRH0y2ejWQfXVq3_JMi1xE&callback=initMap">
</script>
</body>
</html>
and js file
function initMap() {
alert("Inside initMap");
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
if i am removing (from html file)
<style>
#map {
height: 400px;
width: 100%;
}
</style>
then map is not showing but a error in console is coming (in image)
any body can please tell me how style or css can effect this
(with style tags)

Why Can't I load google map? [duplicate]

This question already has an answer here:
Responsive Google Maps v3 - Cannot get 100% height
(1 answer)
Closed 5 years ago.
I am new to programming and trying to learn it. For a projecti wanted to load a google map but i have been trying since hours but cant seem to load the google map and yet I dont see any javascript errors in the console. Can anyone points me to what mistake I am doing
<!DOCTYPE html>
<html>
<head>
<title>BART</title>
<style>
body
{
height: 100%;
}
#map
{
height: 80%;
width: 60%;
}
</style>
<script src = "https://maps.googleapis.com/maps/api/js?key=mykey</script>
<script>
var map ;
//function to initialize map
var initialize = function()
{
var mapOptions = {
center :{lat: 37.775362, lng: -122.417564},
zoom : 12,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
}
window.onload = initialize;
</script>
</head>
<body>
<div id ="map">
</div>
</body>
</html>

You should add CSS as
#map {
height: 400px;
width: 400px;
}
<!DOCTYPE html>
<html>
<head>
<title>BART</title>
<style>
body {
height: 100%;
}
#map {
height: 400px;
width: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?"></script>
<script>
var map;
//function to initialize map
var initialize = function() {
var mapOptions = {
center: {
lat: 37.775362,
lng: -122.417564
},
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
}
window.onload = initialize;
</script>
</head>
<body>
<div id="map">
</div>
</body>
</html>

Please use the code provided in google map documentation.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* 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;
}
</style>
</head>
<body>
<div id="map"></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=YOUR_API_KEY&callback=initMap"
async defer></script>
</body>
</html>

No errors but map is not showing in website in js only background part is visible ,

after tried a lot , I had apply previous answer but not got proper solution . Actually I want that when user enter address of location then my code must show that address on map in web . But it is not happening .
convert.js :-
geocoder=new google.maps.Geocoder();
function getCoordinates(address,callback)
{
var coordinates;
geocoder.geocode({address:address},function(results,status){
alert('Called');
coordsx=results[0].geometry.location;
//coords1=results[0].geometry.location;
coordinates=[coordsx.lat(),coordsx.lng()];
callback(coordinates);
//alert(coordinates)
})
}
testmap.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#map-canvas {
width: 700px;
height: 600px;
position: absolute;
top: 40px;
left: 360px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="convert.js"></script>
<script>
google.maps.visualRefresh=true;
function initialize() {
var mapOptions;
getCoordinates('J-24 MIG colony indore',function(coords){
mapOptions = {
center: new google.maps.LatLng(coords[0],coords[1]),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
//map=new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
alert('Func')
alert(mapOptions.center);
});
map=new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" height="100%" width="100%%"></div>
</body>
</html>

The line map=new google.maps.Map(document.getElementById('map-canvas'),mapOptions); needs to be inside the anonymous function function(coords){.. where mapOptions is defined. This should work:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#map-canvas {
width: 700px;
height: 600px;
position: absolute;
top: 40px;
left: 360px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="convert.js"></script>
<script>
google.maps.visualRefresh=true;
function initialize() {
var mapOptions;
getCoordinates('J-24 MIG colony indore',function(coords){
mapOptions = {
center: new google.maps.LatLng(coords[0],coords[1]),
zoom: 8,
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" height="100%" width="100%%"></div>
</body>
</html>

The problem is that you had not put map object so it happens try to put these in your code ,
map=new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
It will surely work

google maps not loading new tiles on drag

New tiles are not being loaded on drag and release. Instead just the blank background is shown.
Zoom in or out will load a new map.
I'm loading the current release: http://maps.google.com/maps/api/js
<style type="text/css"> .single_map_canvas img { max-width: none; } </style>
<div class="single_map_canvas" id="single_map" style="height: 225px; width: 450px;"></div>
<script type="text/javascript">
function initialize() {
var singleLatlng = new google.maps.LatLng(37.5364,-122.2455);
var mapOptions = {
zoom: 12,
center: singleLatlng,
draggable: true
}
var map = new google.maps.Map(document.getElementById('single_map'), mapOptions);
var marker = new google.maps.Marker({
position: singleLatlng,
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
UPDATE: This has to be inside the <head> tag.
<style type="text/css"> .single_map_canvas img { max-width: none; } </style>

<!DOCTYPE html>
<html>
<head>
<!-- <title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
-->
<style type="text/css"> .single_map_canvas img { max-width: none; } </style>
</head>
<body>
<div class="single_map_canvas" id="single_map" style="height: 225px;width:450px;"></div>
<script>
var map;
function initMap() {
var singleLatlng = new google.maps.LatLng(37.5364, -122.2455);
map = new google.maps.Map(document.getElementById('single_map'), {
center: singleLatlng,
zoom: 8
});
var marker = new google.maps.Marker({
position: singleLatlng,
map: map
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
</body>
</html>
hope this helps
most probably ur network is slow, i guess

need the search box to not refresh the page so the function will load the marker

// html
<!DOCTYPE html>
<head>
<title>
</title>
<link rel="stylesheet" type="text/css" href="style2.css">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
// load google map
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js? key=&sensor=true">
</script>
<script type="text/javascript">
var myLatlng = new google.maps.LatLng(33.319914, 44.304771);
var marker = new google.maps.Marker({map: map, position:myLatlng, title:"Hello World!"});
var map = null;
function initialize()
{
var mapOptions =
{
center: new google.maps.LatLng(33.319914, 44.304771),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// marker.setMap(map);
}
// second map with marker
function initialize2()
{
var mapOptions =
{
center: new google.maps.LatLng(33.319914, 44.304771),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<head>
<body>
<div id="map-canvas"/>
</div>
// button works to load second map
<button onclick="initialize2()">Enter ID</button>
// form will load second map but refreshs page and goes back to first map without marker
<form name="searchbox">
<input type="text" class="searchbox" name="searchterm"/>
<input type="image" src="images/opacbox1.png" class="searchbox_submit" value="Search"" ONCLICK="Javascript:doSearch()" onsubmit="javascript:doSearch()" />
<script type="text/javascript">
function doSearch()
{
searchvalue = document.searchbox.searchterm.value
if (searchvalue == "1")
{
initialize2();
}
else
{
alert("no good");
}
}
</script>
</body>
</html>
// if there is a better way to load markers with the seachbox or button im all ears been trying all day
// css
body
{
}
#map-canvas
{
height: 500px;
width: 500px;
margin: 50px 50px 50px 50px;
}
#searchwrapper
{
width:310px;
height:40px;
background-image:url('images/searchbox6.png');
background-repeat:no-repeat;
padding:0px;
margin:0px;
position:relative;
}
#searchwrapper form
{
display: inline;
}
.searchbox
{
border:0px;
background-color:transparent;
position:absolute;
top:4px;
left:9px;
width:256px;
height:28px;
color: #fff;
}
.searchbox_submit
{
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:4px;
left:265px;
width:32px;
height:28px;
}

stop the form from summiting, like this:
$('#upload').submit(function(e){
e.preventDefault();
...
});
Hope this helps :/

Categories