I created google map with multiple markers to my website with "Google My Maps" tool and my code looks like this:
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1PdcME79x-maD5xuiVEi4C777aL4" width="640" height="480"></iframe>
It was really quick and simple without any code writting but what I don't like is the header bar which is showing the name and share button. Can I somehow hide this bar? Thank you.
You can get the link to the KML from that "MyMap":
http://www.google.com/maps/d/kml?mid=1PdcME79x-maD5xuiVEi4C777aL4
And use that to populate a KmlLayer in a Google Maps Javascript API v3 map:
var kmlLayer = new google.maps.KmlLayer({
url: "http://www.google.com/maps/d/kml?mid=1PdcME79x-maD5xuiVEi4C777aL4",
map:map
});
proof of concept fiddle
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 kmlLayer = new google.maps.KmlLayer({
url: "https://www.google.com/maps/d/kml?mid=1PdcME79x-maD5xuiVEi4C777aL4",
map: map
});
google.maps.event.addListener(kmlLayer, 'status_changed', function() {
document.getElementById('status').innerHTML = kmlLayer.getStatus();
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>
<div id="status"></div>
We have this map:
https://www.google.com/maps/d/viewer?mid=z3MgxTVp8WWA.kbMeY2NPElcE
It can be exported into KMZ, by clicking "Download KML":
But when I try to embed this map on my own Google Maps, or even open in Google Earth, some placemarks are not displayed:
It there any way to fix this issue?
I see that problem with the KmlLayer renderer for the Google Maps Javascript API v3:
fiddle
code snippet:
var geocoder;
var map;
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 kmlLayer = new google.maps.KmlLayer({
url: "http://www.google.com/maps/d/kml?&mid=1JwCy1i6rn9ailO2MPxPj-XxX0EY&lid=z3MgxTVp8WWA.kUnMLigc_WOw",
map: map
});
google.maps.event.addListener(kmlLayer, 'status_changed', function() {
document.getElementById('status').innerHTML = kmlLayer.getStatus();
})
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="status"></div>
<div id="map_canvas"></div>
Seems like an issue in Google's KML renderer. If I download your KML and render it with the third party library geoxml3 (disclaimer, I currently maintain that library), it displays OK.
redered with geoxml3 (but there is a performance hit due to the native rendering/lack of tile based rendering).
Note that I couldn't use the KMZ file directly, there seem to be character encoding issues with the zipped KML when rendered by geoxml3.
I want to rotate the kml layer in my map but it is not rotating however kml file contains the rotation tag. Here is KML file.
KML File
I am using this code to include the kml file.
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
mapTypeId: google.maps.MapTypeId.SATELLITE,
center: myLatLng
});
var ctaLayer = new google.maps.KmlLayer({
url: 'https://s3.amazonaws.com/navizon.its.fp/1001/zk01w7hhv4_o.kml',
map: map
});
<rotation/> is not supported in KmlLayer, see https://developers.google.com/kml/documentation/kmlelementsinmaps for supported elements
One option would be the third party KML parser geoxml3 which now supports the <GroundOverlay> <rotation> tag (with a change to the helper ProjectedOverlay library). (Disclaimer: I am currently the maintainer).
example with your KML
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
center: {
lat: 0,
lng: 0
},
zoom: 0
});
infowindow = new google.maps.InfoWindow({});
var geoXml = new geoXML3.parser({
map: map,
infoWindow: infowindow,
singleInfoWindow: true,
});
geoXml.parseKmlString(kmlData);
}
google.maps.event.addDomListener(window, 'load', initMap);
var kmlData = '<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom"><Document><name>course_3.kml</name><Style id="sh_ylw-pushpin"><LineStyle><color>ff0000ff</color><width>3</width></LineStyle></Style><Style id="sn_ylw-pushpin"><LineStyle><color>ff0000ff</color><width>2.5</width></LineStyle></Style><StyleMap id="msn_ylw-pushpin"><Pair><key>normal</key><styleUrl>#sn_ylw-pushpin</styleUrl></Pair><Pair><key>highlight</key><styleUrl>#sh_ylw-pushpin</styleUrl></Pair></StyleMap><Folder><name>Bucket Regatta 2014 - Around the Island Cours (Short)</name><open>1</open><Placemark><name>Bucket Regatta 2014 - Around the Island Cours (Short)</name><styleUrl>#msn_ylw-pushpin</styleUrl><LineString><tessellate>1</tessellate><coordinates>-62.86033284828354,17.8845504927191,0 -62.84458650469701,17.87473959704673,0 -62.83547659050955,17.86945167794833,0 -62.83388304026133,17.86867910723514,0 -62.83321075835203,17.86842764302893,0 -62.83244614152226,17.86829326710066,0 -62.83095108255348,17.86812958593426,0 -62.8252089501432,17.86760084008422,0 -62.81367914534573,17.86719796434468,0 -62.8028525753019,17.86714467828739,0 -62.79756667270858,17.86751051155173,0 -62.79509376490336,17.86786570346247,0 -62.79412412763578,17.86809155768074,0 -62.79338147339845,17.86834753898355,0 -62.79292197702473,17.86872845424952,0 -62.79236941605821,17.86972789718922,0 -62.79196728876664,17.87057855391474,0 -62.79095434506525,17.87302053688485,0 -62.78769902736699,17.88296771449728,0 -62.78520601621152,17.8921161942094,0 -62.78298714148205,17.90141446335292,0 -62.78215426430953,17.90588128332446,0 -62.78180288654804,17.9081463412259,0 -62.78171537826803,17.90959573053742,0 -62.78176111029458,17.91085157814362,0 -62.78209906045792,17.91195531708489,0 -62.78278820483929,17.91396330057004,0 -62.78453903421586,17.91810287947595,0 -62.78752730575776,17.92390658974894,0 -62.78875333123023,17.9259212696348,0 -62.78986544653639,17.92755568861479,0 -62.79078421150102,17.92859792870751,0 -62.79831145019485,17.93443063643228,0 -62.80584033616613,17.94020945772508,0 -62.81258307095833,17.94514006132481,0 -62.81448933178827,17.94638884742845,0 -62.81601070417865,17.94716110662928,0 -62.81775976509371,17.94767575361211,0 -62.81986862853103,17.94779702318609,0 -62.82149546368095,17.94779229499462,0 -62.82371517654716,17.94766157324279,0 -62.82621465923376,17.94746630950224,0 -62.83049328518798,17.94705904912,0 -62.83919972063341,17.9459216448811,0 -62.84628848778544,17.94477832659337,0 -62.85888853921235,17.94250489675832,0 -62.87239257119431,17.93981825881495,0 -62.8811980398479,17.9377795947891,0 -62.88775645578315,17.93609294178501,0 -62.89173988675277,17.93489414228672,0 -62.89412558290244,17.93395197835972,0 -62.89552567301983,17.93307595570021,0 -62.89648507743102,17.93172350534812,0 -62.89669004691491,17.93099109405102,0 -62.89675976559775,17.93021394953048,0 -62.89663735225985,17.92926394813965,0 -62.89634128071585,17.92835412072944,0 -62.89557221863525,17.9270680837545,0 -62.89388090053903,17.92485240345483,0 -62.87826523882355,17.9063455885609,0 -62.86096890036382,17.88703596862992,0 </coordinates></LineString></Placemark><GroundOverlay><name>Untitled Image Overlay</name><open>1</open><Icon><href>http://3d-islands.com/ais/bucket_2013/trace_day3.png</href><viewBoundScale>0.75</viewBoundScale></Icon><LatLonBox><north>17.88892896821306</north><south>17.88720675592857</south><east>-62.86037690770465</east><west>-62.86354378113808</west><rotation>307.820971098897</rotation></LatLonBox></GroundOverlay><GroundOverlay><name>Untitled Image Overlay</name><open>1</open><Icon><href>http://3d-islands.com/ais/bucket_2013/trace_day3.png</href><viewBoundScale>0.75</viewBoundScale></Icon><LatLonBox><north>17.88462189853965</north><south>17.88289968625519</south><east>-62.85754360921412</east><west>-62.86071048264756</west><rotation>323.6259195552798</rotation></LatLonBox></GroundOverlay><GroundOverlay><name>Untitled Image Overlay</name><open>1</open><Icon><href>http://3d-islands.com/ais/bucket_2013/trace_day3.png</href><viewBoundScale>0.75</viewBoundScale></Icon><LatLonBox><north>17.86797860237289</north><south>17.86625639008843</south><east>-62.80737139571207</east><west>-62.8105382691455</west><rotation>357.5851829764764</rotation></LatLonBox></GroundOverlay><GroundOverlay><name>Untitled Image Overlay</name><open>1</open><Icon><href>http://3d-islands.com/ais/bucket_2013/trace_day3.png</href><viewBoundScale>0.75</viewBoundScale></Icon><LatLonBox><north>17.90390563534902</north><south>17.90218342306457</south><east>-62.78104451432495</east><west>-62.78421138775838</west><rotation>77.74273626527004</rotation></LatLonBox></GroundOverlay><GroundOverlay><name>Untitled Image Overlay</name><open>1</open><Icon><href>http://3d-islands.com/ais/bucket_2013/trace_day3.png</href><viewBoundScale>0.75</viewBoundScale></Icon><LatLonBox><north>17.94462710084591</north><south>17.94290488856144</south><east>-62.80891396332905</east><west>-62.81208083676248</west><rotation>142.8275337342407</rotation></LatLonBox></GroundOverlay><GroundOverlay><name>Untitled Image Overlay</name><open>1</open><Icon><href>http://3d-islands.com/ais/bucket_2013/trace_day3.png</href><viewBoundScale>0.75</viewBoundScale></Icon><LatLonBox><north>17.94188422571256</north><south>17.94016201342811</south><east>-62.86522147937472</east><west>-62.86838835280815</west><rotation>191.2539027987112</rotation></LatLonBox></GroundOverlay><GroundOverlay><name>Untitled Image Overlay</name><open>1</open><Icon><href>http://3d-islands.com/ais/bucket_2013/trace_day3.png</href><viewBoundScale>0.75</viewBoundScale></Icon><LatLonBox><north>17.92371079228007</north><south>17.92198857999562</south><east>-62.89070522661952</east><west>-62.89387210005297</west><rotation>307.3348255545322</rotation></LatLonBox></GroundOverlay></Folder></Document></kml>';
html,
body,
#map_canvas {
height: 100%;
width: 100%;
}
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/geocodezip/geoxml3#master/kmz/ZipFile.complete.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/geocodezip/geoxml3#master/kmz/geoxml3.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/geocodezip/geoxml3#master/ProjectedOverlay.js"></script>
<div id="map_canvas"></div>
I have already pointed my office location in google map.
Also I created API key.
Now i using embeded code to show google map location in my contact page.
I want to replace the same with AP key.
How to show my office location using Google Maps JavaScript API v3.
Following is my test.html page for checking the map. Which parts need to modify to show my location ?
You can see my location in below url
google(dot)com/maps?ll=9.965156,76.290034&z=14&t=m&hl=en-US&gl=US&mapclient=embed&cid=9383043750302267720
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=my key already added here">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: { lat: -9.959238, lng: 76.275271},
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"></div>
</body>
</html>
Sounds like you want to add a marker
Code below is for your initialize function based on the docs but w/ your Lat,Lon and zoom level.
var myLatlng = new google.maps.LatLng(9.965156,76.290034);
var mapOptions = {
zoom: 8,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// To add the marker to the map, use the 'map' property
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World"
});
The marker's title (i.e. "Hello World" in the example above) will appear as a tooltip. If you don't want a tooltip, you can remove that line.
I am using geoxml3 to parse a kml file of points. On click of the marker an info window opens with some description. The problem is that the information is being displayed misplaced and also two links are added in the info window which I want to remove.
Any ideas how I can remove the links and also put the information placed correctly?
This is a screen shot of the info window:
The following is the code I am using:
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
center: new google.maps.LatLng(35.898737028438, 14.5133403246687),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
directionsDisplay.setMap(map);
elevator = new google.maps.ElevationService();
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
google.maps.event.addListener(map, 'click', getElevation);
}
function displayKml() {
initialize();
parser = new geoXML3.parser({
map: map,
processStyles: true,
createMarker: addMyMarker,
createOverlay: addMyOverlay
});
parser.parse("Uploads/" + document.getElementById('<%= text2.ClientID %>').value);
}
function addMyMarker(placemark) {
parser.createMarker(placemark);
}
function addMyOverlay(groundOverlay) {
parser.createOverlay(groundOverlay);
}
The kml file structure is as follows:
<?xml version="1.0" encoding="utf-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<name>route</name>
<Placemark>
<name>210</name>
<description>St james cavalier,Exhibitions centre</description>
<Point>
<coordinates>14.5107742,35.8955498</coordinates>
</Point>
</Placemark>
</Document>
</kml>
Your sample KML works fine with my test pages:
polys branch:
http://www.geocodezip.com/geoxml3_test/v3_geoxml3_kmltest_linktoB.html?filename=http://www.geocodezip.com/geoxml3_test/SO_IT_info_kmlPt.xml
kmz branch:
http://www.geocodezip.com/geoxml3_test/v3_geoxml3_kmztest_linktoB.html?filename=http://www.geocodezip.com/geoxml3_test/SO_IT_info_kmlPt.xml
Must be your css (which you haven't provided) or something else in your environment.