I'm updating some old code to Google Maps API v3, and I can't get the map to show anything. Dumping the map object to the console shows the map has been initialized properly and it is supposed to be loading in the proper div-- but nothing shows except a grey box.
I have set width/height and overflow for the map div, since this seems to be the most common problem.
However, I can't get this to work. Any ideas?
http://jsfiddle.net/Nbjrf/1/
Thanks
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<style>
#map_canvas { height: 200px; width: 400px; overflow: visible; }
</style>
</head>
<body>
<div id="map_canvas"></div>
<script>
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
</script>
</body>
</html>
This works for me.
There is a big difference between
var maptype = 'google.maps.MapTypeId.HYBRID';
var mapInitOpts = {
mapTypeId: maptype
};
and
var mapInitOpts = {
mapTypeId: google.maps.MapTypeId.HYBRID
};
In 1 instance you are asigning to mapTypeId the text 'google.maps.MapTypeId.HYBRID' and the other you are assigning to mapTypeId the value of the variable google.maps.MapTypeId.HYBRID.
For your example to work you should at least put
var maptype = google.maps.MapTypeId.HYBRID;
not
var maptype = 'google.maps.MapTypeId.HYBRID';
Also I cannot make my example to work without zoom: and center: . Those might be required.
You had the mapTypeId constant in quotes, 'google.maps.MapTypeId.HYBRID'; it's a constant, not a string: google.maps.MapTypeId.HYBRID
Also, you need to supply a map centre, and a zoom level. This works:
var mapInitOpts = {
mapTypeId: google.maps.MapTypeId.HYBRID,
center: new google.maps.LatLng(-32.891058,151.538042),
zoom: 16
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapInitOpts);
Finally, you don't need to supply an API key any more.
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 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)
This question already has answers here:
Google maps API V3 method fitBounds()
(4 answers)
Closed 6 years ago.
I basically want to create maps which zoom in to the size corresponding to the SE-NW corners. I have tried so many variations but have not been able to get it to work. I managed to place two markers on one version of my script but was not able to make the map zoom in to the size of the markers. I don't need markers, I was just thinking outside the box. I will include my sort of working script below but would appreciate any help with making the fitBounds to work. I have worked solidly on this for two days, but I am not a programmer so much of the solutions I have found on this website and others don't quite make sense, or they don't address my exact problem.
<!DOCTYPE html>
<!-- This script works, but the size of the output should be as per the SW-NE coordinates -- not the 'div style width/height', and ignoring the center:coordinates -->
<!-- This is one of several maps I am planning to create but I don't mind typing in the fitBounds coordinates by hand -->
<html>
<head>
<title>Google Road Maps</title>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(56.3,4.3),
zoom:8,
mapTypeId:google.maps.MapTypeId.ROADMAP,
disableDefaultUI:true,
scaleControl: true
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
var fitBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(53.3,-0.7),
new google.maps.LatLng(59.3,9.3)
);
</script>
</head>
<body>
<div id="googleMap" style="width:600mm;height:600mm;"></div>
</body>
</html>
You need to call Map.fitBounds with your fitBounds object.
map.fitBounds(fitBounds);
proof of concept fiddle
code snippet:
function initialize() {
var mapProp = {
center: new google.maps.LatLng(56.3, 4.3),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
scaleControl: true
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
map.fitBounds(fitBounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
var fitBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(53.3, -0.7),
new google.maps.LatLng(59.3, 9.3)
);
html,
body,
#googleMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="googleMap"></div>
I don't what's causing this issue, I am not able to see google mp even though it's loading.
jQuery is being loaded, bootstrap classes are also being loaded.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places,geometry&callback=initMap"></script>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 14.5800, lng: 121.0000}
});
}
</script>
<div id="map" style="height:450px;width:100%;"></div>
And this is how my map is being shown.
I have experienced something similar, because i have the map on a button that shows and hide it(bootstrap collapse action). How i solved: Try Showing the map without any container, if this works, check the container of the map that are you using.
It seems that the Google Maps Loading are affected by the "collapse" action of bootstrap. When i load the map without the collapse action it works, so the problem is that you have the map in "not active" or "not showing" status and the map doesn't load properly.
My Function code of the Map:
google.maps.event.addDomListener(window, 'load', initMap);
function initMap(){
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {lat: 4.619870, lng: -74.067577},
zoom: 16});
var mainmarker = new google.maps.Marker({ //Line 1
position: {lat: 4.619870, lng: -74.067577}, //Line2: Location to be highlighted
map: map,//Line 3: Reference to map object
title: 'Casa de Bolsa', //Line 4: Title to be given
icon : 'images/pin.png'
});
//console.log("map ready");
return map;
};
seems simply a wrong order of the element
try this way ( And check if sensor is effectively required.. )
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>PHP/MySQL & Google Maps Example</title>
</head>
<body>
<div id="map" style="height:450px;width:100%;"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 14.5800, lng: 121.0000}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places,geometry&callback=initMap"></script>
</body>
try this,
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 14.5800, lng: 121.0000}
});
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>
<div id="map" style="height:450px;width:100%;"></div>
standard way ref-http://www.w3schools.com/googleapi/google_maps_basic.asp
The script is defined before function so it can't find it. You can use async defer.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places,geometry&callback=initMap" async defer></script>
I was trying to simplify the way I add Google maps to my pages.
I'm using this markup for each map:
<div class="map" data-coordinates="-34.397, 150.644">
<div class="canvas" id="map_canvas"></div>
</div>
and this jquery code:
jQuery(function($) {
var maps = $('.map');
maps.each(function() {
var $this = $(this),
mapId = $this.find('.canvas').attr('id'),
coordinates= $this.data('coordinates');
// set map options
var mapOptions = {
center: new google.maps.LatLng(coordinates),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// create the map
var map = new google.maps.Map(document.getElementById(mapId), mapOptions);
});
});
this is a recreation of the tutorial on the google maps website.
when I do it like the tutorial it works fine, but when I use my code above I get the map controls with a grey background, I also tried jQuery(window).load(); with the same result, and the issue seems to be from each() because when I create the map without it, it works fine.
this is the code that works:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
There's a problem with coordonates.
google.maps.LatLng() accepts Lat and Lng as separate params, not a composite string.
Try :
jQuery(function($) {
$('.map').each(function() {
var $this = $(this),
canvas = $this.find('.canvas').get(0),
coordinates = $this.data('coordinates').split(/,\s?/);
// set map options
var mapOptions = {
center: new google.maps.LatLng(Number(coordinates[0]), Number(coordinates[1])),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// create the map
var map = new google.maps.Map(canvas, mapOptions);
});
});
You might need to test that regexp.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to highlight a user's current location in google maps?
Is there any method to get blue circle marker in current location using javascript google maps api?
You can use the GeolocationMarker library. It is part of the Google Maps API Utility Library.
Use the navigator.geolocation approach, and use a custom icon for your blue circle
https://developer.mozilla.org/en-US/docs/Using_geolocation
https://developers.google.com/maps/documentation/javascript/overlays#Icons
EDIT:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Google Maps User Location</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<style>
html, body, #map_canvas{width:100%;height:100%;}
</style>
</head>
<body onload="locate()">
<div id="map_canvas"></div>
</body>
<script>
var im = 'http://www.robotwoods.com/dev/misc/bluecircle.png';
function locate(){
navigator.geolocation.getCurrentPosition(initialize,fail);
}
function initialize(position) {
var myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mapOptions = {
zoom: 4,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var userMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: im
});
}
function fail(){
alert('navigator.geolocation failed, may not be supported');
}
</script>
</html>