I am trying to use google maps JS API v3 in one of my projects everything was working fine until day before yesterday, then suddenly it stopped working when i tried to debug using console it showed that the url for loading map script main.js was failing
<!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://maps.googleapis.com/maps/api/js?key={API_KEY}&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
I have used a real API key in place of {API_KEY}
How can I achieve my objective?
I pasted your code into a file named test.html, inserted a valid api key and tested the following browsers in MAC OS X 10.9:
Safari
Chrome
Firefox
It works in all these browser without any error. Please check the following:
Validation period of your api key
invisible characters
Related
everyone, I have uploaded my google map KML file to my website then I have used google map javascript API key. if you notice once you run the map you will see all my markers in white( transparent ) is there a way to have my map exactly the same way like I had it before saving. the code below, Thank you in advance:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<title>KML Layers</title>
<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>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: new google.maps.LatLng(35.5715, -97.66704),
});
var ctaLayer = new google.maps.KmlLayer({
url: 'https://rogerslimos.com/KML.kml',
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
HTML with JS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="~/css/custom.css" />
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map">
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCQKR41AqiPXn-2WfLS-ksdsad&callback=initMap"></script>
<script>
function initMap() {
var uluru = { lat: 51.957244, lng: 4.570751 };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
</div>
</body>
</html>
CSS
#map {
width: 100%;
height: 400px;
background-color: grey;
}
The specific problem is that when I put CSS in the HTML with #map the map shows and works but from the separate file it just doesn't show. Why?
EDIT: Making a MVC application via Visual Studio
EDIT 2: Something with the file location was wrong. I created a new project and put the CSS in a file that was already made. Now it's working.
First things first - put your script tags into head and try again. I suspect that there's some funky stuff with google maps replacing contents of #map and removing scripts in the process.
It should be <link rel="stylesheet" type="text/css" href="./css/custom.css" /> Use . insteads of ~
I am modifying a vb.net desktop project in which through a WebBrowser create a html file in which I use the Google Maps Javascript v3, to display a map in which among other things is needed to show a kml file roads, show them the html file
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8">
<style type "text/css"> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px}</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=visualization&key=KEY"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {zoom: 9, center: { lat: 13.775203, lng: -88.873150}};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var ctaLayer = new google.maps.KmlLayer('http://localhost/Red_pavimentada.kml');
ctaLayer.setMap(map);
google.maps.event.addListener(marker1, 'click', function() { info5.open(map,marker1);});
}
google.maps.event.addDomListener(window, 'load', initialize); </script>
</head
<body>
<div id="map-canvas"> </div>
</body
</html>
Into ctaLayer i'm setting an url of kml file ubicated on my webserver local wamp, but i had add the next lines into apache file httpd.conf,because the webserver need to know the kind of file contains
AddType application/vnd.google-earth.kml+xml .kml
AddType application/vnd.google-earth.kmz .kmz
But it is not enough to load the kml on the map, what could be failing ?, what changes should do?
thank you for your help
am struggling the last 3 hours
am trying to update my google maps markers positions from database without refresh the page so the user can track updated movement
i used jquery to extract all the data from database from page called data.php that give me everything i need to type it directly into the javascript code to add the markers.
but when i put or inside the javascript initialization function everything is not working
so i don't know how to get the html.(output).show to div without crashing the whole code
here is the code of the page that i want to display google markers
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>GLOBAL CLEANERS</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script type="text/javascript" src="jquery.js"> </script>
<script type="text/javascript">
function get()
{
$.post('data.php',function(output)
{$('#age').html(output).show();}
);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(33.3146996,44.3772661);
var mapOptions = {
zoom: 11,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var image = 'zbala.png';
<?php echo '<div id="age">var myLatlng500 = new google.maps.LatLng(33.3146996,44.3772661);</div>'; ?>
}
google.maps.event.addDomListener(window, 'load', initialize);
// ??? ????? ????? ???? ???????
</script>
</head>
<body bgcolor="002022">
<form name="form"><input type="button" name="submit-button"value="submit-button"onclick="get();"></form>
<img src="logo-global.jpg" style="height: 100px;width:90%;position: absolute;left:150px;top:0%; opacity: 1.0;"/>
<div id="map-canvas" style="width:100%;height:100%px;top: 100px;left:150px"></div>
</body>
</html>
I'm really stuck so any help would be appreciated. TIA!
I have a Quartz Composition in which I want to display a Streetview (from Google Maps) and be able to control the navigation (as in be able to advance forward, etc.). This would mean I need a JavaScript for it and I've got no idea on how to link the JavaScript Patch in QC with the Google Maps API.
So how could I add two strings, representing Lat and Long and display the Streetview?
Here is a sample HTML from Google doing that:
<!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="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var bryantPark = new google.maps.LatLng(37.869260, -122.254811);
var panoramaOptions = {
position:bryantPark,
pov: {
heading: 90,
pitch:0,
zoom:0
}
};
var myPano = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
myPano.setVisible(true);
}
</script>
</head>
<body onload="initialize()">
<div id="pano" style="width: 1280px; height: 1024px"></div>
</body>
</html>
How could I do this in Quartz Composer JavaScript Patch or any other patch?
Thanks a lot!
P.S.: It already works partially by loading the page with CoGe Webkit Plugin for QC. But I have no idea on how to control the JavaScript inside the HTML via QC. Any other way to send variables from QC to a HTML page or anything similar?
Really easy actually, hope it will help others as well.
HTML:
function initialize(x, y) {
var pos = new google.maps.LatLng(x, y);
// whatever else you need it to do
}
QC:
initialize(x, y)
Thanks to the creator of the CoGe WebKit plugin, Tamas Nagy for the answer!