I have a problem where I cannot load a KMZ file from FEMA (https://hazards.fema.gov/femaportal/kmz/FEMA_NFHL_v3.1.kmz) on Google Maps API.
When I run the JavaScript, the map is just blank. No errors. However, I can load other kmz which are not from FEMA.
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key={YOUR API KEY}">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/geocodezip/geoxml3/master/kmz/ZipFile.complete.js">
</script>
<script type="text/javascript" src="https://cdn.rawgit.com/geocodezip/geoxml3/master/kmz/geoxml3.js">
</script>
<script type="text/javascript" src="https://cdn.rawgit.com/geocodezip/geoxml3/master/ProjectedOverlay.js">
</script>
<script>
function initialize() {
var options = {
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("canvas"), options);
var parser = new geoXML3.parser({ map: map, processStyles: true });
//Download kmz from FEMA https://hazards.fema.gov/femaportal/kmz/FEMA_NFHL_v3.1.kmz and put in same folder as this html file
parser.parse("FEMA_NFHL_v3.1.kmz");
}
$(document).ready(initialize);
</script>
</head>
<body>
<div id="canvas" style="width:1000px; height:500px"></div>
</body>
</html>
Related
I am using EJS to render google maps api on a webpage.
<!DOCTYPE html>
<html>
<head>
<title></title>
</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>
I am getting 200's in my network tab but nothing is rendering on the page, am i doing something wrong with the syntax?
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
you must fix style = "height:xx";
at your html, body and #map
they are set to 0 by default
I have an HTML page with a list of buttons representing locations. When any button is clicked, I want a Google Map to appear with that location. Should the map open on a new HTML page? (because the map should take up the full page), or is it possible to display the map on the same page?
EDIT - OK, I want to open it in another HTML file. I have an external JS file which has the following Map code:
function initialize(lat, lng) {
var mapOptions = {
center: {lat: parseFloat(lat), lng: parseFloat(lng)},
zoom: 8,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize(-34.397, 150.644));
My external HTML file is given below:
<html>
<head>
<style type="text/css">
html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js" ></script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
But its not working. The external JS file cannot locate "map-canvas", it seems. Can anyone tell me how to fix this? (script.js is the external JS file)
I worked around your question try this :
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas {
width: 500px;
height: 400px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
</head>
<body>
<div>
Show Map1
</div>
<div>
Show Map2
</div>
<div>
<a href="#" class="btn cta map-trigger" data-lat="41.8911684" data-lng="12.707724100000019" targe> Show Map3 </a>
</div>
<script>
var render_map = function( lat, lng, title ) {
var mapCanvas = document.getElementById('map-canvas');
// options
var args = {
zoom : 16,
center : new google.maps.LatLng(lat, lng),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// create map
var map = new google.maps.Map( mapCanvas, args);
// create marker
var marker = new google.maps.Marker({
position: args.center,
map: map,
title: title
});
toggleMap();
}
var toggleMap = function(){
if ($('body').hasClass('-show-map')) {
mapHide();
} else {
mapShow();
};
}
$('.map-trigger').on('click', function(event) {
event.preventDefault();
var lat = $(this).data('lat');
var lng = $(this).data('lng');
render_map(lat, lng);
});
</script>
<div id="map-canvas"></div>
</body>
</html>
I followed the w3schools javascript tutorial exactly, but I can not get these google maps to load on my simple web page. Help please! Pretty new to javascript. I'm just typing more here to increase my english:code ratio for stackoverflow.
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize(){
var mapProp1 = {
center: new google.maps.LatLng(69.336822, -44.218045),
zoom:9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapProp2 = {
center: new google.maps.LatLng(39.336822, -84.218045),
zoom:9,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
var map = new google.maps.Map(document.getElementById("map1"),mapProp1);
var map2 = new google.maps.Map(document.getElementById("map2"),mapProp2);
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div class="content-inner">
<div id="map1"></div>
<div id="map2"></div>
</div>
<footer>
</footer>
</body>
</html>
you have three issues:
you need to close your initialize function
You are missing a semicolon at the end of mapProp2
You need to set the size of the map
the following should get you started:
function initialize(){
var mapProp1 = {
center: new google.maps.LatLng(39.336822, -84.218045),
zoom:9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapProp2 = {
center: new google.maps.LatLng(39.336822, -84.218045),
zoom:9,
mapTypeId: google.maps.MapTypeId.SATELLITE
}; // <-- the semicolon was missing
var map = new google.maps.Map(document.getElementById("map1"),mapProp1);
var map2 = new google.maps.Map(document.getElementById("map2"),mapProp2);
} //<-- this closing brace was missing
google.maps.event.addDomListener(window, 'load', initialize);
<div class="content-inner">
<!-- in production you should not use inline style. do this in css -->
<div id="map1" style="height:300px;width:300px;"></div>
<div id="map2" style="height:300px;width:300px;"></div>
</div>
If you aren't running your site on localhost you might be running into security issues. I would look into running python -m SimpleHTTPServer in the root of your project. It should launch an instance of localhost:8000 allowing you to develop your site without running into any security issues. There are obviously many methods to accomplish this but this is simple enough to get you started.
This should do the trick:
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize(){
var mapProp1 = {
center: new google.maps.LatLng(39.336822, -84.218045),
zoom:9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapProp2 = {
center: new google.maps.LatLng(39.336822, -84.218045),
zoom:9,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
var map = new google.maps.Map(document.getElementById("map1"),mapProp1);
var map2 = new google.maps.Map(document.getElementById("map2"),mapProp2);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div class="content-inner">
<div id="map1" style="width:500px;height:380px;"></div>
<div id="map2" style="width:500px;height:380px;"></div>
</div>
<footer></footer>
</body>
</html>
Here is an example in JsBin
I have copied a piece of code from w3schools regarding google maps api.
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
</body>
</html>
When i place it in my html file it works.
However, if i try to place this piece of code inside a javascript file
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
It does not work
Inside my html would be
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script src = "~/Scripts/JScript.js"> </Script>
I also have tried taking this function out
google.maps.event.addDomListener(window, 'load', initialize);
to become
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script src = "~/Scripts/JScript.js"> google.maps.event.addDomListener(window, 'load', initialize);</Script>
But it just doesnt seem to work
Here is the working code,
HTML
map.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="map.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
JS
map.js
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);
}
$(document).ready(function(){
initialize();
});
The order of including script tag is important. js files are loaded in the order they are included
If you check your console, you can see each js file is loaded one by one.
important piece missing from your code. check your HtML body
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
map is now on the link: http://joostudio.info/test/
As you can see, from bottom image fancybox works just fine but when I call it from map infowindow it jus doesn't work.
Here is complete page source code
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="fancybox/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("a#fb").fancybox();
});
</script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var map;
function runmap() {
var myLatlng = new google.maps.LatLng(43.154541,19.12315);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var infowindow = new google.maps.InfoWindow({});
var marker1 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(43.145086,19.090633),
});
google.maps.event.addListener(marker1, "click", function () {
infowindow.setContent('<a class="fb" href="fancybox/example/1_b.jpg"><img src="fancybox/example/1_s.jpg" alt=""/></a>');
infowindow.open(map, marker1);
});
}
</script>
</head>
<body onload="runmap()">
<div id="map_canvas" style="width: 972px; height: 500px"></div>
</br>
<a id="fb" href="fancybox/example/1_b.jpg"><img src="fancybox/example/1_s.jpg" alt=""/></a>
</body>
</html>
How can I simply call fancybox from google maps v3 marker?
Thanks a lot
The problem is your have given your FancyBox link in your infowindow a class instead of an id
infowindow.setContent('<a class="fb" href="fancybox/example/1_b.jpg">
<img src="fancybox/example/1_s.jpg" alt=""/></a>')
yet you are calling it via an id
<script type="text/javascript">
$(document).ready(function() {
$("a#fb").fancybox();
});
</script>
The reason the bottom image works is you are using an id there
<a id="fb" href="fancybox/example/1_b.jpg"><img src="fancybox/example/1_s.jpg" alt=""/></a>
look for link below:
Google map + fancybox
http://www.daimlerstr.de/berge/tests/fancyboxtest.html