KMZ exported from google maps is not showing some placemarks - google-maps

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.

Related

How to add marker of a coordinate to a Custom (my places) map?

I have a custom map I created by adding lots of location markers. These are
the branch locations.
Next, I have created an excel file where the user can enter a customer location and a link will be created that opens the above custom map. Right now it centers on the customer location, but doesn't show a marker. The url looks something like this:
https://www.google.com/maps/d/viewer?mid=**mycustommap**-&hl=en&ll=22.9860302%2C-11.2430203&z=15
The lat/long are the coordinates I would like to mark on the custom map.
How do I add a marker with those coordinates to my custom (my places) map?
One option is to use the "Exported KML" from your custom My Maps map to render the data on a Google Maps Javascript API v3 KmlLayer. Then add your marker to it, the normal Google Maps Javascript API v3 way. You would have to host your map somewhere and process the query string for the coordinates to load the marker.
Most of the example is from this related question: Render a My Maps using Google Maps JavaScript API, with the exception of the marker code.
code snippet: (data from this MyMap)
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var layer = new google.maps.KmlLayer({
url: "http://www.google.com/maps/d/kml?mid=zNPjLbo835mE.k3TvWfqGG-AU",
map: map
});
// Add a marker
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(32.735316, -117.149046),
title: "My Marker"
});
}
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="map_canvas"></div>

Creating simple Google maps with multiple markers to website

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>

How to retrieve google Markers

How to retrieve all existing markers on the public map created by me in javascript.
In html I am adding following tag.
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=zJ463bGh1PYM.kWHWVlcByQeU" width="640" height="480"></iframe>
Now I want to extract all the markers present on this map in Javascript.
Please help me in this.
click on the
choose "Download KML"
check the "Keep data up to date with network link KML (only usable online)."
rename the resulting .kmz file as .zip
open the contained .kml file
<?xml version='1.0' encoding='UTF-8'?>
<kml xmlns='http://www.opengis.net/kml/2.2'>
<Document>
<name>Untitled layer</name>
<NetworkLink>
<name>my-map</name>
<Link>
<href>http://mapsengine.google.com/map/kml?mid=zJ463bGh1PYM.kWHWVlcByQeU&lid=zJ463bGh1PYM.ko7uxR2p2yu4</href>
</Link>
</NetworkLink>
</Document>
</kml>
that contains the external link to the KML that describes your map (http://mapsengine.google.com/map/kml?mid=zJ463bGh1PYM.kWHWVlcByQeU&lid=zJ463bGh1PYM.ko7uxR2p2yu4). Load that on a Google Maps Javascript API v3 map using KmlLayer.
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 layer = new google.maps.KmlLayer({
url: "http://mapsengine.google.com/map/kml?mid=zJ463bGh1PYM.kWHWVlcByQeU&lid=zJ463bGh1PYM.ko7uxR2p2yu4",
map: map
});
}
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="map_canvas" style=border: 2px solid #3872ac;"></div>

Google Map embedded in website loading Google page rather than the map

I have this website - http://www.gyroontario.ca/contact/ which has a Google Map embedded within it. This has worked fine for many years but all of a sudden the embedded map is trying to load the Google Maps page instead of just embedding the map.
If you load the link, it initially loads the map correctly but then all of a sudden it loads the maps page with all the Google main menu and sidebar.
Is there something that has been changed by Google because we haven't touched the site for a long time. How can I fix this?
This is an image of what it's embedding:
This is the code I've embedded:
<iframe width="525" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=50+Skyway+Drive,+Guelph,+ON+N1H+6H8&aq=&sll=51.502241,-3.19941&sspn=0.260515,0.380058&ie=UTF8&hq=&hnear=Skyway+Dr,+Guelph,+Wellington+County,+Ontario+N1H+6H8,+Canada&t=m&ll=43.565031,-80.19762&spn=0.021767,0.045061&z=14&iwloc=A&output=embed"></iframe>
This is how I'm getting the code, just a simple google embed code:
The iframe contains the URL
https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=50+Skyway+Drive,Guelph,+ON+N1H+6H8&aq=&sll=43.361335,-79.923517&sspn=1.217084,1.520233&gl=uk&ie=UTF8&hq=&hnear=Skyway+Dr,+Guelph,+Wellington+County,+Ontario+N1H+6H8,+Canada&t=m&ll=43.565031,-80.19762&spn=0.012438,0.023861&z=14&iwloc=A&output=embed?wmode=transparent
which directly refers the UK's Google maps. I'm not sure how it worked initially and later changed.
But you can fix by using the [Google maps v3] (used now a days)(https://developers.google.com/maps/documentation/javascript/examples/map-simple).
Remove iframe and try doing the below and use Google Maps JavaScript API v3.
HTML:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<div id="map-canvas"></div>
CSS:
#map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
Javascript:
function initialize() {
var myLatlng = new google.maps.LatLng(43.565529, -80.197645);
var mapOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
//=====Initialise Default Marker
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'marker'
//=====You can even customize the icons here
});
//=====Initialise InfoWindow
var infowindow = new google.maps.InfoWindow({
content: "<B>Skyway Dr</B>"
});
//=====Eventlistener for InfoWindow
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I have created a simple fiddle for your reference.
Hope you got some idea.
Updates:
I think the problem is with wmode=transparent in the iframe URL. When I remove it is working. Check fiddle1 and fiddle2
See difference between 1 and 2.
Clean up your page (line ~85):
window.onload = function() {
var frames = document.getElementsByTagName("iframe");
for (var i = 0; i < frames.length; i++) {
frames[i].src += "?wmode=transparent";
}
}
is responsible the loading of the complete google maps page.
You can easily check this by creating an empty page with the google maps-iframe element only (will work)
and than adding the window.onload from your page.
BTW: contact/tooltip.css is missing.

How can you use transparency in a kml/kmz file on Google Maps API?

I'm testing an embedded Google Map with a kml or kmz file, and cannot get any transparency. The kml / png shows transparency in Google Earth, but not in Google Maps. The first color byte in the kml file (<color>88ffffff</color>) has no effect on the transparency.
Is there a way to get the transparency in Google Maps as well as Google Earth?
function initialize() {
var mapProp = {
center: new google.maps.LatLng(36.31, -95.37),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var kmzLayer = new google.maps.KmlLayer('http://xpda.com/coverage.kml');
kmzLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
KML-Layers in Google Maps does not support the <color>-element for GroundOverlays.
You may store the PNG with the desired alpha-transparency instead.