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
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 ~
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 want to integrate google maps on my webpage
the way i am using to do that is this :
<section id="contact" class="map">
<iframe width="100%" height="500px" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=UTF8&hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&t=m&z=15&iwloc=A&output=embed"></iframe>
<br />
<small>
<!-- -->
</small>
</iframe>
</section>
Here is a live plunkr : http://plnkr.co/edit/Pakox2L63kO0i5dR9iPh?p=preview
Question: How do i change the location to something else. I mean from where on google maps can i pick the location and paste it as it is in the src section to have a new location.
( for example i want to point to this location : https://www.google.co.in/maps/place/Cafe+Coffee+Day/#18.558569,73.791647,17z/data=!3m1!4b1!4m2!3m1!1s0x3bc2bed9d33bfd3b:0x913791c91ba6cb4c )
Thanks
Don't use that code if you want to manipulate your map.
here is the basic sample code of google map.
<!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 learn more this https://developers.google.com/maps/documentation/javascript/examples/
google.maps.event.addListener(map, 'click', function(e) {
alert(e.latLng());
});
when you click the map..it will get its lat and lng
you are using an iframe wich is hard to manipulate you can use the google maps api .
its costumable and you can change a lot of settings :
Google Maps API
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