Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
Hi I am working on a small web application that is using the Google maps java script API to display a map. I am passing in the html5 object of latitude and longitude to place a marker onto the map that displays the current location of the user. I have a kml layer that I am passing in as well. I am trying to display the current user location in relation to my kml layer. Well really I would just like the kml layer and the current user location both displayed. I have been trying to follow the google maps api to get this up and running. I was able to get the kml layer displayed in one test application and then I got the current user location displayed in another. When I attempted to combine the two the kml layer stopped displaying. This is a node js app using express js. I understand the kml layer element will not work on local host and I am deploying to a test location on heroku. Below I have included my relevant code:
<section id="wrapper">
Click the allow button to let the browser find your location.
<script src="https://maps.googleapis.com/maps/api/js?key=MYGOOGLEMAPDEVKEY&sensor=true"> </script>
</article>
<script>
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '400px';
mapcanvas.style.width = '600px';
document.querySelector('article').appendChild(mapcanvas);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var centerLL = new google.maps.LatLng(33.439346,-86.88312500000001);
var options = {
zoom: 15,
center: centerLL,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
var marker = new google.maps.Marker({
position: coords,
map: map,
title:"You are here!"
});
var georssLayer = new google.maps.KmlLayer({
url: 'https://www.google.com/maps/d/edit?mid=zrvhKWbQZI6E.kyr3RvQ9DprE'
});
georssLayer.setMap(map);
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
</script>
</section>
Thank you for your time in advance.
Sincerely,
Fredk
EDIT: I changed the src script tags to remove error I was getting on console about having too many google api src's
You are using the wrong URL.
This is a map: https://www.google.com/maps/d/edit?mid=zrvhKWbQZI6E.kyr3RvQ9DprE
If I download the KML (and choose the option "Keep up to date with network link KML (only useable online); the link in there is:
http://mapsengine.google.com/map/kml?mid=zrvhKWbQZI6E.kyr3RvQ9DprE&lid=zrvhKWbQZI6E.kNpsmD-YyCYc
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var georssLayer = new google.maps.KmlLayer({
url: 'http://mapsengine.google.com/map/kml?mid=zrvhKWbQZI6E.kyr3RvQ9DprE&lid=zrvhKWbQZI6E.kNpsmD-YyCYc'
});
georssLayer.setMap(map);
google.maps.event.addListener(georssLayer, 'status_changed', function(){
document.getElementById('info').innerHTML = georssLayer.getStatus();
});
}
google.maps.event.addDomListener(window, "load", initialize);
Include that as the URL for the KmlLayer and it works for me
working code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var georssLayer = new google.maps.KmlLayer({
url: 'http://mapsengine.google.com/map/kml?mid=zrvhKWbQZI6E.kyr3RvQ9DprE&lid=zrvhKWbQZI6E.kNpsmD-YyCYc'
});
georssLayer.setMap(map);
google.maps.event.addListener(georssLayer, 'status_changed', function(){
document.getElementById('info').innerHTML = georssLayer.getStatus();
});
}
google.maps.event.addDomListener(window, "load", initialize);
html, body, #map_canvas {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
<div id="info"></div>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I'm working on google maps api.The map shows the latitude and longtitude by mouse click
event. Now I want to make a google marker.
Here is my Javascript code:
<script>
function initMap() {
var myLatlng = {lat: 23.133899799999995, lng: 14.812842999999999};
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 16, center: myLatlng});
// Create the initial InfoWindow.
var infoWindow = new google.maps.InfoWindow(
{content: 'Click the map to get Lat/Lng!', position: myLatlng});
infoWindow.open(map);
// Configure the click listener.
map.addListener('click', function(mapsMouseEvent) {
// Close the current InfoWindow.
infoWindow.close();
// Create a new InfoWindow.
infoWindow = new google.maps.InfoWindow({position: mapsMouseEvent.latLng});
infoWindow.setContent(mapsMouseEvent.latLng.toString());
infoWindow.open(map);
//Show latitude and longtitude on the site
var l =mapsMouseEvent.latLng.toString();
document.getElementById("latlng").innerHTML=l;
});
}
</script>
See the example on adding markers:
https://developers.google.com/maps/documentation/javascript/examples/marker-simple
var marker;
// Configure the click listener.
map.addListener('click', function(mapsMouseEvent) {
// Close the current InfoWindow.
infoWindow.close();
if (marker && marker.setPosition)
// if the marker already exists, move it
marker.setPosition(mapsMouseEvent.latLng);
else
// create a blue marker
marker = new google.maps.Marker({
position: mapsMouseEvent.latLng,
map: map,
icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
});
});
function initMap() {
var myLatlng = {
lat: 23.133899799999995,
lng: 14.812842999999999
};
var map = new google.maps.Map(
document.getElementById('map'), {
zoom: 16,
center: myLatlng
});
var marker;
// Create the initial InfoWindow.
var infoWindow = new google.maps.InfoWindow({
content: 'Click the map to get Lat/Lng!',
position: myLatlng
});
infoWindow.open(map);
// Configure the click listener.
map.addListener('click', function(mapsMouseEvent) {
// Close the current InfoWindow.
infoWindow.close();
if (marker && marker.setPosition)
marker.setPosition(mapsMouseEvent.latLng);
else
marker = new google.maps.Marker({
position: mapsMouseEvent.latLng,
map: map,
icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
});
//Show latitude and longtitude on the site
var l = mapsMouseEvent.latLng.toString();
document.getElementById("latlng").innerHTML = l;
});
}
html,
body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
#map {
height: 90%;
width: 100%;
}
<div id="latlng"></div>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I want to use 84MB KML file to show KML layer on google map but Google map not support more than 10MB KML file.
Google Map Developer Link about Size and complexity restrictions for KML rendering
https://developers.google.com/maps/documentation/javascript/kmllayer
Please check below code which is I am using to show KML layer in google map. Its working fine with small KML file.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<title>KML Layer</title>
<style>
#map {
height: 80%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div>
Red Fibre<br>
Green Fibre<br>
Blue Fibre<br>
</div><br>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAWsZy8xWxT9yNBvYcO1dpxBzDttr7DqLA&sensor=false">
</script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
jQuery(document).ready(function() {
var defaultu = 'cta.kml';
initMapp(defaultu);
jQuery(document).on("click", ".button", function(e) {
e.preventDefault();
var url = jQuery(this).attr("data-latLng");
initMapp(url);
});
function initMapp(url) {
var myLatLng = {lat: 41.876, lng: -87.624}
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello David!'
});
var kmlurl = url;
var ctaLayer = new google.maps.KmlLayer({
url: kmlurl,
map: map
});
}
});
</script>
</body>
</html>
One option would be to use a third party KML parser like geoxml3 or geoxml-v3. Note that due to the size and complexity of the KML file there may be performance issues and it will take a long time to load.
var geoXml = null;
var map = null;
var myLatLng = null;
function initialize() {
myLatLng = new google.maps.LatLng(37.422104808,-122.0838851);
var myOptions = {
zoom: 18,
center: new google.maps.LatLng(37.422104808,-122.0838851),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
geoXml = new geoXML3.parser({
map: map,
singleInfoWindow: true,
});
geoXml.parse('cta.xml');
};
live example (with a small KML file)
I have been struggling how to solve a problem with how google maps renders a KML polygon. In Good Earth, it renders the polygon correctly like this:
But in Google maps, when I add this to the map, it incorrectly looks like this:
Surprisingly, this is made of 32 points which go across Africa, NOT the Pacific Ocean!
Why in the world is this being rendered inversely when I specifically indicate the points? Is it just simply ignoring them?
I created a JSFiddle for this here: https://jsfiddle.net/qsz5ec5y/1/
The KML file is here: https://dl.dropboxusercontent.com/u/27946381/testzone.kml
Any ideas as to why this is happening?
Thanks!
I would say the Google Maps KML parser is broken.
Your bug report on the issues list
You KML has a well defined polygon with several points on each side (which should be more than enough to tell it which way the polygon goes):
142.207023447954498,-24.785157829137347 112.016594491497187,-24.785157829137347 81.826165535039934,-24.785157829137347 51.635736578582652,-24.785157829137347 21.44530762212537,-24.785157829137347 -8.745121334331884,-24.785157829137347 -38.935550290789166,-24.785157829137347 -69.125979247246434,-24.785157829137347 -99.316408203703702,-24.785157829137347 -99.316408203703702,-19.291993899650947 -99.316408203703702,-13.798829970164547 -99.316408203703702,-8.305666040678148 -99.316408203703702,-2.812502111191748 -99.316408203703702,2.680661818294652 -99.316408203703702,8.173825747781052 -99.316408203703702,13.666989677267452 -99.316408203703702,19.160153606753852 -69.125979247246434,19.160153606753852 -38.935550290789166,19.160153606753852 -8.745121334331884,19.160153606753852 21.44530762212537,19.160153606753852 51.635736578582652,19.160153606753852 81.826165535039934,19.160153606753852 112.016594491497187,19.160153606753852 142.207023447954498,19.160153606753852 142.207023447954498,13.666989677267452 142.207023447954498,8.173825747781052 142.207023447954498,2.680661818294652 142.207023447954498,-2.812502111191748 142.207023447954498,-8.305666040678148 142.207023447954498,-13.798829970164547 142.207023447954498,-19.291993899650947 142.207023447954498,-24.785157829137347
fiddle showing points above
Your KML also works in geoxml3 (which renders it as native google.maps.Polygon objects) (if you load the KmlLayer you can see the issue)
code snippet showing your rectangle rendered both as KML and a "normal" google.maps.Polygon:
var geocoder;
var map;
var ctaLayer;
var poly;
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var bounds = new google.maps.LatLngBounds();
var path = [];
var coordsStr = kmlCoords.split(" ");
for (var i = 0; i < coordsStr.length; i++) {
var coords = coordsStr[i].split(',');
var latLng = new google.maps.LatLng(coords[1], coords[0]);
path.push(latLng);
bounds.extend(latLng);
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: latLng.toUrlValue(6)
});
}
map.fitBounds(bounds);
poly = new google.maps.Polygon({
path: path,
map: map
});
ctaLayer = new google.maps.KmlLayer({
url: 'https://dl.dropboxusercontent.com/u/27946381/testzone.kml'
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, "load", initialize);
function toggleKml() {
if (ctaLayer.getMap() == null) {
ctaLayer.setMap(map);
} else {
ctaLayer.setMap(null);
}
}
function togglePolygon() {
if (poly.getMap() == null) {
poly.setMap(map);
} else {
poly.setMap(null);
}
}
var kmlCoords = "142.207023447954498,-24.785157829137347 112.016594491497187,-24.785157829137347 81.826165535039934,-24.785157829137347 51.635736578582652,-24.785157829137347 21.44530762212537,-24.785157829137347 -8.745121334331884,-24.785157829137347 -38.935550290789166,-24.785157829137347 -69.125979247246434,-24.785157829137347 -99.316408203703702,-24.785157829137347 -99.316408203703702,-19.291993899650947 -99.316408203703702,-13.798829970164547 -99.316408203703702,-8.305666040678148 -99.316408203703702,-2.812502111191748 -99.316408203703702,2.680661818294652 -99.316408203703702,8.173825747781052 -99.316408203703702,13.666989677267452 -99.316408203703702,19.160153606753852 -69.125979247246434,19.160153606753852 -38.935550290789166,19.160153606753852 -8.745121334331884,19.160153606753852 21.44530762212537,19.160153606753852 51.635736578582652,19.160153606753852 81.826165535039934,19.160153606753852 112.016594491497187,19.160153606753852 142.207023447954498,19.160153606753852 142.207023447954498,13.666989677267452 142.207023447954498,8.173825747781052 142.207023447954498,2.680661818294652 142.207023447954498,-2.812502111191748 142.207023447954498,-8.305666040678148 142.207023447954498,-13.798829970164547 142.207023447954498,-19.291993899650947 142.207023447954498,-24.785157829137347";
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<input type="button" onclick="toggleKml();" value="toggle KML" />
<input type="button" onclick="togglePolygon();" value="toggle Polygon" />
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
I am trying to load a custom icon for Google Maps API v3. The code I have is as follows:
$(function(){
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(42.2542586, -83.8873974),
zoom: 10
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
$('.valley').on('click', function(){
var myLatlng = new google.maps.LatLng(42.000, -83.0073974);
var mapOptions = {
zoom: 14,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var iconMarker = 'pin2.jpg'
var marker = new google.maps.Marker({
position: myLatlng,
animation: google.maps.Animation.DROP,
icon: iconMarker,
map: map,
title:"Hello"
});
});
});
The following script is in the 'application.html.erb' file (i've taken out my apikey)
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=APIKEY&sensor=false"></script>
Pretty straight forward and the actual map loads, but for some reason the rails app is not finding the .jpgfor the icon. I've placed it in various locations, currently it is in the root folder. For some reason it is trying to load the file as a text/html file instead of an image. I replaced the image with another image that is loading properly on the web page, and I still get a 404 with the browser trying to load it as an text/html
Here is the error in the console
Try with:
var iconMarker = '/assets/pin2.jpg';
Hi as the question says i'm trying to send my laptops current position using geolocation to my website so that it can display its current location on a Google map. My problem is so far I can only get it to display the servers position, and getting some form of script that runs on the laptop to send to the server is where i'm in trouble, just looking to see if anyone has any ideas how to approach this, as its causing me some difficulty thanks
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var coords = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: 15,
center: coords,
mapTypeControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(
document.getElementById("mapContainer"),
mapOptions
);
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "Your current location!"
});
});
} else {
alert("Geolocation API is not supported in your browser.");
}
Well, since you aren't giving any code that you have a problem with, I might as well just give you a link to the official Google Maps Gelocation API website page: https://developers.google.com/maps/documentation/business/geolocation/.