I'm trying to emulate this functionality
https://maps.google.com/maps?q=http://en.wikipedia.org/w/index.php%3Ftitle%3DTemplate:Attached_KML/N_postcode_area%26action%3Draw
I want to be able to add and remove a postcode region from an external link / checkbox. I have the KML file loading correctly using this code but I have no idea how to attach the external event listener / handler.
function initialize() {
var london = new google.maps.LatLng(51.522416,-0.11673);
var mapOptions = {
zoom: 11,
center: london,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'path/to/kml',
suppressInfoWindows: true
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
I've tried looking in the ctaLayer object to get the individual nodes from the KML file but they dont seem to be there.
Related
I have to load KML file in browser.And I have load simple KML file it works perfectly but when I upload the KML file with multiple folder for images it is not loading properly.
Code of line used:-
<div id="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false>"></script>
<script>
var mylocation = {
'latitude': -45.2427303,
'longitude': 115.0639984
};
var map;
function initialize()
{
var myLatlng = new google.maps.LatLng( mylocation.latitude, mylocation.longitude );
var mapOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var kmlPath = '<?php echo urldecode($file_name)?>';
var urlSuffix = (new Date).getTime().toString();
var layer = new google.maps.KmlLayer(kmlPath + '?' + urlSuffix );
layer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
KMLLayer generates map tiles in Google's server side. For the reason, multiple KMLLayer (and fusion tables layer also) do not work as you expected sometimes.
This is not described in the official document, but this comes from my experience.
I recommend you use GeoJSON with DataLayer.
DataLayer generates overlays (marker, polyline , etc...) in client side.
And you can modify the generated overlays easily.
Check it out.
https://developers.google.com/maps/documentation/javascript/datalayer#overview
I am able to capture the google map image. But I want it to capture automatically. I am able to but it has image which is not fully rendered. So I want to know is there any proper way to know that required tiles are loaded and rendered fully.I tried tilesloaded, idle events but seems not working rightly.
is it a good way to use idle under tilesloaded...i may sound wrong as i'm very new to google map api.
function initialize() {
var mapOptions = {
zoom: 17,
center: new google.maps.LatLng(lat,lng),
mapTypeId: google.maps.MapTypeId.ROADMAP,
rotateControl:true
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
google.maps.event.addListener(map, 'tilesloaded', function(event) {
console.log("tilesloaded");
map.addListener('idle', function(event) {
console.log("idle");
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
you can easily add a listener on the tilesloaded event. Like this:
google.maps.event.addListener(map, 'tilesloaded', function() {
..... your code ...
});
I've included a google map on my webpage with a marker at the location. What I want to add is an existing infoWindow of that location when the page loads.
This is the code i have:
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(51.257195, 3.716563),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
new google.maps.Marker({
position: new google.maps.LatLng(51.257195, 3.716563),
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
screenshot: http://puu.sh/gMtoB/16312f42b7.jpg
Now the "AXA..." is an existing point of interest on google maps, how would i go about that my marker is actually 'linked' to that existing point of interest with the infowindow opened by default.
in short: i would like a marker on that location with the infowindow opened when the webpage loads.
I think the solution would be to first find the place_id and then add your marker using the place ID you found rather than using longitude and latitude.
I created a live demo here:
https://jsfiddle.net/qzo41qzd/
There is also an example in the documentation about placing a marker on the google map using place_id:
https://developers.google.com/maps/documentation/javascript/places#placeid
So Im working on my project and the user is to enter an address after its been created in the database, i want it to show in a google map. I've found out the coordinates for the map through this link :
http://www.codeproject.com/Tips/650139/Finding-Co-ordinates-of-an-Address-in-ASP-NET-Csha
However this link shows the coordinates as a label where as i have a java script method as follows :
<script type="text/javascript">
var myCenter = new google.maps.LatLng(1.303895, 103.831941);
function initialize() {
var mapProp = {
center: myCenter,
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
The script works fine if i enter the coordinates myself. I've tried parsing the latitude and longitude through a label and using document.getElementById() method however the map does not show.
Any clue how i can solve this ?
I'm using this super basic code to add a google maps to my site:
var map;
function initMaps(latIn, longIn, htmltext) {
var LatLng = new google.maps.LatLng(latIn, longIn);
var Options = {
zoom: 13,
center: LatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("mapStatic"), Options);
marker = new google.maps.Marker({
position: LatLng,
map: map
});
marker.setMap(map);
map.enableDragging();
}
google.maps.event.addDomListener(window, "load", initMaps);
The map is displaying fine, but for some reason I can't drag it around, is it possible that some other piece of javascript is doing this?
I look around, but didn't find anything that could cause a problem.