I have a problem displaying the google map in firefox.
How can i display the map in Firefox?
And how can i setup the map to show the longitude and latitude in the middle of the map?
Here is my code:
You need to give your map div a size before you display it or trigger the resize event on the map once it is displayed (google.maps.events.trigger(map, 'resize'); where "map" is the google.maps.Map object).
this is how you display your map:
HTML
<div id="map_go"></div>
JS
<script>
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
var PortoAlegre = new google.maps.LatLng(-30.034176, -51.229212);
var myOptions = {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: PortoAlegre
}
map = new google.maps.Map(document.getElementById("map_go"), myOptions);
directionsDisplay.setMap(map);
</script>
CSS
#map_go {border: 1px solid red; width: 95%; height: 350px;}
see it working here: http://jsfiddle.net/RASG/PfggR/
Like geocodezip said, you must set the size of your div (width and height)
Related
I am trying to mark some spots on a google map. I am using google maps places javascript api.
function initialize() {
var mapProp = {
center: new google.maps.LatLng(userlatitude, userlongitude),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//var map = new google.maps.Map(document.getElementById("map_canvas"), mapProp);
map = new google.maps.Map(document.getElementById("midsection"), mapProp);
var mapPosition = new google.maps.LatLng(-20.997110, 123.375544);
markers.push(new google.maps.Marker({
position: {
lat: -20.014006,
lng: 123.421746
},
map: map,
title: 'Mow my lawn',
animation: google.maps.Animation.DROP
}));
(if the Long/Lat are invalid, its because I randomly changed it for the purpose of this post)
I can see the marker drop down and bounce once. But then it disappears. I have tried setting the Zindex, changing the display and position type of the div canvas. But nothing I do seems to make the marker stay.
The problem ended up being hidden in my CSS.
it was just a Canvas: display:none call
I am having difficulties trying to add an image as a ground overlay to a google map that I am creating. In all of the help files that I have seen, the image has been passed to the ground overlay function as a url. Is it possible to have an image that is stored on my machine passed in, rather than an online image?
Here's the code I have for the map & overlay:
function initialize() {
var mapOptions = {
center: {lat: 45.3469, lng: -75.7594},
zoom: 10,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(45.2118075, -75.4455767),
new google.maps.LatLng(45.2043559, -75.4545309));
var campusOverlay = new google.maps.GroundOverlay('Campus.JPG', imageBounds);
campusOverlay.setMap(map);
}
I am looking to add the 'Campus.jpg' image that I created to the map. I have also tried passing in the entire path with all its directories and still nothing appears on the map. If there is no way of passing an image like this, is there a way to put the image online and use it that way?
Thanks
Pass in a full url to the image as the first parameter for GroundOverlay and make sure that your bounds are correct. This can be kind of tricky. Your overlay should cover a northern lat and southern lat/east and
west longitude, so you essentially have some sort of rectangular area.
Here is a quick example. Sure you will get the idea.
var overlay;
function initialize() {
var center = new google.maps.LatLng(45.3469, -75.7594);
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(45.2, -76.1),
new google.maps.LatLng(45.5, -75.38)
);
var mapOptions = {
zoom: 10,
center: center,
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
overlay = new google.maps.GroundOverlay(
'https://upload.wikimedia.org/wikipedia/commons/e/ee/Dowarian%2C_Neelam_Valley%2C_AJK_Pakistan.JPG',
imageBounds);
overlay.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<div id="map-canvas"></div>
Hope that helps.
I'm initializing a map with no controls because I've implemented some custom zoom controls in my page.
However, I'd like to add the standard zoom controls back to the map under specific circumstances, namely when I detect the window has been resized to a certain width. Conversely I would like to destroy them again at larger widths.
Is it possible to add the zoom control on the fly and if so, how?
In the API version 3 use setOptions to set zoomControl to true/false (similar question Dynamically add/remove controls [Google Maps]).
Demo:
// create map
var myLatlng = new google.maps.LatLng(-33, 151);
var myOptions = {
center: myLatlng,
zoom: 5,
zoomControl: false,
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// functions for removing zoomControl
function toggleZoomControl(b) {
map.setOptions({
zoomControl: b
});
}
#map_canvas {
width: 50%;
height: 200px;
float: left;
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>
<input type="checkbox" onclick="toggleZoomControl(this.checked)" />zoomControl
I'm showing a Google Map within a div using the code below. When the page loads the map appears to bounce around before settling. Is there a way to stop this behavior? The page is here.
function initialize() {
myform.search.focus();
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom: 2,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}
The following works for me:
initially set the visibility-style of #map_canvas to hidden
Then wait for the tilesloaded-event to show the map(with a short delay):
google.maps.event
.addListenerOnce(map,
'tilesloaded',
function(){var that=this;
setTimeout(function(){
that.getDiv().style.visibility='visible'},
100);
});
I'm having a heck of a time trying to get a basic Google Map to show up. I've been on Stack Overflow for hours and haven't had any success so far. The closest I've gotten is the map loads 1/4 of a square, the top left quarter. But then if you try to drag, zoom, etc it just turns grey like the rest of the map. On a few occasions, with the same code, the map will load fully but only after a long time (not sure exactly how long, but > 5 minutes).
In my template I have
<div id="map" style="width: 500px; height: 400px;"></div>
And then in my backbone view
$.getScript('http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback')
window.gMapsCallback = function(){
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
}
Any ideas what might be happening? I am also open to any suggestions on a superior way to load a google map into a backbone view.
Ok, turns out there were a number of issues, including embedding a map in a Bootstrap tab, not including a callback, defining the div height and width, setting a small delay to load the map, and setting css attributes for the map. Oi. My final solution turned out to be:
In the template
<script src='http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback'></script>
<div id="map" style="width: 500px; height: 400px;"></div>
In the stylesheet
#map img {
max-width: none;
}
#map label {
width: auto; display:inline;
}
In the Backbone View
setTimeout(function(){
var myLatlng = new google.maps.LatLng(53.1, -2.44);
var mapOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
// Create marker
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(53.1, -2.44),
title: 'The armpit of Cheshire'
});
// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
map: map,
radius: 10000, // metres
fillColor: '#AA0000'
});
circle.bindTo('center', marker, 'position');
google.maps.event.trigger(map, "resize");
map.setZoom( map.getZoom() );
}, 100);
Painful. Notice that when I call the gmaps script I had to include the callback even though I never use it. Without it, it didn't work fully. No clue why.