I have to put a Map from Google (Google Maps or GoogleMyMaps) in a website. I need the map to show a lot of different places all over my country (about 200 places). I already have a GoogleMyMaps with all the places.
But I need the map to have a zoom limitation/restriction : I want people NOT TO KNOW exactly where the places are, which means the zoom must stop before it gets accurate enough.
I know you can control the zoom with GoogleMaps JS API with something like
var opt = { minZoom: 6, maxZoom: 9 };
map.setOptions(opt);
But I dont know how to add places on a Google Maps (still I have them all on a GoogleMyMaps).
Thank you for your time
Thank you everyone for your help.
So most of the time, GoogleMyMaps uses .KML files (as import or export), and it is possible to upload the data from a .KML file into Google Maps.
Here is an example :
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: 1, lng: 1}
});
var kmlLayer = new google.maps.KmlLayer({
url: 'THE_KML_FILE_URL',
suppressInfoWindows: true,
map: map
});
kmlLayer.addListener('click', function(kmlEvent) {
var text = kmlEvent.featureData.description;
showInContentWindow(text);
});
function showInContentWindow(text) {
var sidediv = document.getElementById('content-window');
sidediv.innerHTML = text;
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap"
async defer></script>
But note that the KML file has to be online, it does not work on local (Google's API needs to have access to your file).
Then you can customize your Google Map using Google Map Javascript API (https://developers.google.com/maps/documentation/javascript/tutorial).
Thank you everyone for your time
I am facing problem related to Google map. First time when page load It show google map but If I re-lode page again google map not shown on page.Any body have Idea about this problem.
Thanks.
You Can do this way :
<div id="map" style="width:400px;height:400px;background:yellow"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
<script>
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(51.5, -0.12),
zoom: 10,
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
The Google map on my site no longer shows up. I can see the zoom in/out slider, map/satellite buttons, etc... but the map itself no longer shows up. I read somewhere that the map should be in a div tag labeled "map" with both height and width stated in the CSS. The map has always had height/width CSS properties listed, but the ID was labeled differently. I changed the ID to map and corresponding CSS, but the map still will not show up. I read elsewhere that the Google Analytics by Yoast plugin was also causing similar errors. I have disabled all plugins and then one at a time I have reactivated them to see if another plugin might be the issue. However, it seems that none of the plugins running have any effect on the map displaying.
I am a web designer with some HTML/CSS knowledge. I designed this site and had hired a guy to code it into a custom Wordpress theme for me. Like I said, the map had been showing just fine, but no longer does and I have no idea why. I could really use some help to figure this out. I'm trying to learn more about coding so in the future I can debug and fix things like this on my own. A little help would be greatly appreciated!
Here is a link to the page with the map: http://seegerlaw.com/contact-us/
Please let me know if you need any other information from me.
You're using undocumented fields:
function initialize() {
geocoder = new google.maps.Geocoder();
codeAddr(function(lat, lng) {
myLatlng = new google.maps.LatLng(lat,lng);
var mapOptions = {
zoom: 15,
center: myLatlng,
disableDefaultUI: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
});
}
function codeAddr(callback) {
if (geocoder) {
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results[0].geometry);
maps_lat = results[0].geometry.location["kb"];
maps_lng = results[0].geometry.location["lb"];
callback(maps_lat, maps_lng);
}
else {
console.log("Geocoding failed: " + status);
}
});
}
}
Use the lat() and lng() properties of LatLng to get their values.
Even better, just pass in the LatLng directly from the Geocoder to the MapOptions object:
codeAddr(function(latLng) {
var mapOptions = {
center: latLng,
...
};
...
});
callback(results[0].geometry.location);
Even better – it appears that you always geocode the same address – just hardcode the LatLng into your code.
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.
As part of a much bigger project, we're trying to get a Map on a site using Google's Map API v3. I have followed the simplest steps that Google has laid out, I've tried copying code outright from other working maps. But no matter what I do, all we get is a gray box and no map.
Using Firebug, I can see the information trying to populate the map, but it is simply not displaying. I've tried jquery, jquery libraries specifically made for google maps, nothing is working. I have been up and down the internet and all through google's api help files. Plus, the problem is not local as I've uploaded the file to multiple servers and tested it on multiple browsers and computers. Nothing is working.
At this point it's got to be something stupid that I'm overlooking. Here's my code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?&sensor=true">
</script>
<script type="text/javascript">
function load()
{
var mapDiv = document.getElementById("map");
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions =
{
//zoom: 8,
center:latlng,
//backgroundColor: '#ff0000',
mapTypeId: google.maps.MapTypeId.ROADMAP,
imageDefaultUI: true
};
var map = new google.maps.Map(mapDiv, mapOptions);
function createMarker(point, text, title)
{
var marker =
new GMarker(point,{title:title});
return marker;
}
}
</script>
</head>
<body onload="load()">
<div id="map" style="width: 800px; height: 400px;"></div>
</div>
</body>
</html>
This works for me. You simply have to set zoom parameter:
UPDATE (by #user2652379): You need to set BOTH zoom and center options. Just zoom does not work.
<!DOCTYPE html>
<html>
<head>
<title></title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</script>
<script type="text/javascript">
function load()
{
var mapDiv = document.getElementById("map");
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions =
{
zoom: 8,
center:latlng,
//backgroundColor: '#ff0000',
mapTypeId: google.maps.MapTypeId.ROADMAP,
//imageDefaultUI: true
};
var map = new google.maps.Map(mapDiv, mapOptions);
// map.addControl(new GSmallMapControl());
// map.addControl(new GMapTypeControl());
// map.addMapType(ROADMAP);
// map.setCenter(
// new GLatLng(37.4419, -122.1419), 13);
}
</script>
</head>
<body onload="load()">
<div id="map" style="width: 800px; height: 400px;"> </div>
</body>
</html>
Another case is when map container is hidden at the moment you initialize the map. E.g. you are doing it inside bootstrap show.bs.modal event, instead of shown.bs.modal
I had the same issue and came across a lot of topics on stackoverflow but none of them had the working solution for me. I eventually found out it was caused to a line of css I had added.
All the elements in the map inherited a
overflow:hidden;
By adding the following line to my CSS it was fixed
#map * {
overflow:visible;
}
I would like to add a quick comment to this since I had the same problem with the zoom parameter set.
I found out that the problem was my theme's css. In my base theme I had the following CSS:
img, embed, object, video {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
This messed up the rendering of the map and after I removed it, my map renders just fine.
Also beware of having an invalid latitude or longitude value for the map center or your markers. For example, this fiddle shows the Grey Map Of Death because the map center is at latitude 131.044 which is invalid (not from +90:-90).
function initMap() {
var uluru = {lat: 131.044, lng: -25.363};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
In my case, I was working on a map with vue and a modal in the iview library; and during the first render it worked, but any other render displayed the grey screen of death. I fixed the issue by setting a timeout function to display the map after 50 ms to give the modal enough time to render and be visible.
//Time out is crucial for the map to load when opened with vue
setTimeout(() => {
this.showMap(id);
}, 50);
The above example was an earlier fix and a quick hack, i have realized all you need to do is wait for the next tick, on vue you can achieve this by
async mounted(){
await this.$nextTick()
this.showMap(id)
}
or if you are not comfortable with async await you can try the callback option
mounted(){
Vue.nextTick(function () {
this.showMap(id)
})
}
I had the same issue. i was using google maps in Jquery Accordion and when i expand the div the map only consisted a grayed area. I was able to solve this issue by triggering a click event on the specified accordion heading and setting the map container to visible.
Script:
<script type="text/javascript">
var map;
function initMap(lat, lng) {
var myCenter = new google.maps.LatLng(lat, lng);
var mapOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: myCenter
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
function ViewMap() {
var latlng = document.getElementById('<%=txt.ClientID%>').value.split(','); // This is where my latlng are placed: 25.12312,55.3212333
$("#showmap").show();
// Sorry for mixing up Jquery and javascript.
initMap(latlng[0], latlng[1]);
}
</script>
ASPX File/Html Markup:
<h3 id="lMap" onclick="ViewMap();"><i class="fa fa-map-o" onclick="ViewMap();"></i>Location Map</h3>
<div style="height:auto" id="showmap">
<div id="map" style="width: 850px; height: 550px; overflow: visible"></div>
</div>
I realise this is an old thread, but this may help someone in the future.
Struggled with this for hours, but after discovering that the Google Map is rendered with a grey box overlay if the map is rendered while not being visible, I used a bit of jQuery to make my application only instantiate and render the map if the map is visible, like such:
if ($("#myHomeMapHolder").is(":visible")) {
if (homemap == null) {
homemap = new google.maps.Map(document.getElementById("myHomeMapHolder"), myOptions);
google.maps.event.addListener(homemap, 'click', function (event) {
placeHomeMarker(event.latLng);
});
} else {
homemap.setCenter(myLatlng);
}
if (homemarker == null) {
homemarker = new google.maps.Marker({
position: myLatlng,
map: homemap,
title: "Home"
});
} else {
homemarker.setPosition(myLatlng);
}
}
And voila, my map is only rendered if the map holder is visible, so it never renders with a grey box.
For anyone wondering, myHomeMapHolder is a div which the map sits inside.
In my case, someone had dropped this little prize in some responsive.css file:
img {
max-width: 100% !important;
}
Removed that and all is fine now.
I had this issue with a site I'm working on too. We're doing some things to all <img> tags for responsiveness. This fix is working for us for the map:
img {max-width: initial !important;}
For those who might be stuck regardless of the nice solutions provided here, try setting the height and width of your container directly in the html markup instead of a stylesheet ie.
<div id="map-container" style="width: 100%; height: 300px;"></div>
happy mapping!
This may not be the case for everyone, but maybe it can help someone.
I was creating markers in my map from data attributes placed on the map element like this: data-1-lat="2" data-1-lon="3" data-text="foo". I was putting them in an array based on the order they were placed in the data attributes.
The problem is that IE and Edge (for some mad reason) invert the order of the data attributes in the HTML tag, therefore I wasn't able to correctly extract them from the data attributes.
None of the existing answers helped me because my problem was that Apollo was adding extra properties ("__typename" fields) to my MapOptions object.
In other words, the JSON looked like this:
mapOptions {"__typename":"MapOptions","center":{"__typename":"GeoCoordinates","lat":33.953056,"lng":-83.9925},"zoom":10}
Once I realized that those extra properties were problematic, this is how I solved it (using TypeScript):
function getCleanedMapOptions(mapOptionsGql: google.maps.MapOptions): google.maps.MapOptions {
const mapOptions = { ...mapOptionsGql };
const lat: number = mapOptions.center.lat as number;
const lng: number = mapOptions.center.lng as number;
const mapOptionsCleaned = {
center: new google.maps.LatLng({ lat, lng }),
zoom: mapOptions.zoom,
};
return mapOptionsCleaned;
}
export function createMap(mapOptions: google.maps.MapOptions): google.maps.Map {
const mapOptionsCleaned = getCleanedMapOptions(mapOptions);
const map = new google.maps.Map(document.getElementById('map') as HTMLElement, mapOptionsCleaned);
return map;
}
In my case (version is 3.30 when submitting this), it was because the div id MUST be "map"
<div id="map"></div>
...
document.getElementById("map")