How can I display a map in Google Closure. There seems to be many UI widgets but none for showing a map
I'm confused. Since Google Closure is a javascript library, can't you just use the Google Maps Javascript API? Something like:
<script type="text/javascript" src="http://maps.googleapis.com/maps/ap/js?sensor=set_to_true_or_false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
And then you can just change the document.getElementById() to whatever you need.
Reference: Google Maps Javascript API
Related
Google Maps API error: MissingKeyMapError,
but I have an API key, and pass it to js. Why it doesn't work?
<script src="https://maps.googleapis.com/maps/api/js?Key=MY_API_KEY&callback=myMap"></script>
and
<div id="googleMap" style="width:100%;height:380px;"></div>
<script>
function myMap() {
var mapProp = {
center: new google.maps.LatLng(30.331917,57.017670),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
</script>
my Test Page: http://shahrkharid.org/GoogleMap.html
Pic API key from Google
The parameter name is case sensitive. You should use key=... instead of Key=...
https://developers.google.com/maps/documentation/javascript/get-api-key
I am trying to add geo-location to a custom public google map, I can't manage to get it to work. For example here is a custom public google map.
Lets say I wanted to add geo-targeting to that map. I have the following on the site which is directly off the google maps API website:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
as well as the following which I just changed '.getElementsById' to '.getElementsByClassName':
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementsByClassName('map-canvas'),
mapOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Location found using HTML5.'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Then I call for the map which is in a lightbox:
<h2 class="dis">Where can I<br />get Rumble?</h2>
It displays the map fine, and asks to geo-target but I assume the reason its not working on this map is because its not included in the API.
I was hoping someone had a solution for this.
This is not an API based map. You can display the KML from that map on an API based map
Then use your geolocation code to center the map (depending on the ordering, you might need to use the preserveViewport:true option on the KmlLayer). Relevant code below, see the documenation for more examples and information.
This is in your existing page (leave your version)
var myOptions = {
zoom: 5,
center: new google.maps.LatLng(0,0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
Add this to display the data from your "custom map":
var kmlLayer = new google.maps.KmlLayer("https://maps.google.ca/maps/ms?ie=UTF8&msa=0&output=kml&msid=202458571791405992786.0004b9061a3fcd9461d42");
kmlLayer.setMap(map);
What am I doing wrong here? I can't seem to add a svg layer onto google maps.
This is the javascript file maps.js
function initialize()
{
var mapOptions =
{
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
var bounds = new GLatLngBounds(new GLatLng(-34.397, 150.644), new GLatLng(-34.397, 150.644));
var oldmap = new GGroundOverlay("test.svg", bounds);
oldmap.setMap(map);
}
this is the html file
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>
<script type="text/javascript" src="maps.js"></script>
<body onload = "initialize()">
<div id="googleMap" style="width:80%;height:80%;">
</div>
</body>
"document.createElement" does not work with SVG elements. "document.createElementNS" is required. You have to provide an additional "namespace" argument, "http://www.w3.org/2000/svg"
Have you considered using CANVAS instead of SVG ?
I am using the Google Maps API V3 (so no embedding links) and I would like it so when the users click on one of my polygons (overlays) they don't see the white pop up balloon.
The contents of the balloon (as well as the co-ordinates) come from a KML file.
Here is what I am using to generate my map.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var paris = new google.maps.LatLng(48.8581,2.3827 );
var myOptions = {
zoom: 4,
center: paris,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var france = new google.maps.KmlLayer('france.kml?v=45', {preserveViewport:true});
var germany = new google.maps.KmlLayer('germany.kml?v=45', {preserveViewport:true});
france.setMap(map);
germany.setMap(map);
}
</script>
Change your vars that load the KML's to something that looks like this:
var kmlLayer;
var kmlURL = 'http://www.yourwebsite.com/mapFileName.kml';
var kmlOptions = {
clickable: 0, // polygon ignores mouse clicks
preserveViewport: 1
};
kmlLayer = new google.maps.KmlLayer(kmlURL, kmlOptions);
kmlLayer.setMap(map);
Code with V3 API.
function initialize ()
{
if (GBrowserIsCompatible())
{
var ch = new GLatLng (0,0);
var myOptions = {
zoom:7,
center: ch,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
directionsDisplay = new google.maps.DirectionsRenderer(map, document.getElementById("map"));
directionsDisplay.setMap(map);
}
}
Code with V2 API.
function initialize ()
{
if (GBrowserIsCompatible())
{
map = new GMap2 (document.getElementById("map"));
map.setCenter (new GLatLng(0,0),1 );
}
}
The V2 API code worked flawlessly, the V3 API code is NOt displaying any map.
What's the point that I am missing?
EDIT
Modified the V3 code as follows, but still no maps:
var chicago = new google.maps.LatLng (0, 0);
var myOptions = {
zoom:1,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
Make sure you are loading the correct Google Maps API, that you have a div tag with an id of map, and (for good measure) that you give the div a height and width. (Perhaps better to put the height and width in a stylesheet, but for clarity, I'm including it inline here.)
Here's a web page with your post-edit code. Try it. Works for me.
<html>
<head>
<title>Google Map test</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map" style="height:500px;width:500px"></div>
<script>
var chicago = new google.maps.LatLng (0, 0);
var myOptions = {
zoom:1,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
</script>
</body>
</html>
In V3, all the names have changed. For example, GLatLng is now google.maps.LatLng. You will need to revise your code to use the new names.
A link to the docs in case you don't have it
There is no GLatLng in v3, change it to google.maps.LatLng
center: chicago,
I had the same symptoms, my v2 maps would not display with V3. When I look in the browser console logs, I'm seeing the error: Uncaught ReferencedError: GBrowserIsIncompatible is not defined.
Per the Google V2 to V3 Migration Guide, GBrowserIsIncompatible is no longer supported. I haven't found an alternative and just removed the logic related to this function. This site suggests just removing the function.
I found other problems with migrating which are addressed in the Google Migration Guide link above.
1- ensure your google map API key is correct.
2- it's may be not enabled in your google map console.
3- wrongly enabled the location API instead of the map API.