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.
Related
So Im working on my project and the user is to enter an address after its been created in the database, i want it to show in a google map. I've found out the coordinates for the map through this link :
http://www.codeproject.com/Tips/650139/Finding-Co-ordinates-of-an-Address-in-ASP-NET-Csha
However this link shows the coordinates as a label where as i have a java script method as follows :
<script type="text/javascript">
var myCenter = new google.maps.LatLng(1.303895, 103.831941);
function initialize() {
var mapProp = {
center: myCenter,
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
The script works fine if i enter the coordinates myself. I've tried parsing the latitude and longitude through a label and using document.getElementById() method however the map does not show.
Any clue how i can solve this ?
This is a jfiddle
http://jsfiddle.net/w8NRr/
The problem is that when I try to move the map(please look at it in), the map moves and then go back automatically to its place, and the map is not fit to the space,
I don't have a css for map except the width and heigh
can u help please?
the map is on the button last Next in jfiddle
Edit
The code for map is so simple, if you don't know it kindly tell me to tell you it
Remove script:
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Under
$(".next").click(function () {
add
if ($('fieldset').index($(this).parents('fieldset'))==2){
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options);
}
working example : http://jsfiddle.net/w8NRr/2/
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.
I want to draw a custom rectangle which is resizable and draggable with a close button and
which is formed with the bounds returned by the query in the database.
Thanks
This is a rectangle resizable and dragabble. A little search and some trying would give you what you need.
function initialize() {
var myOptions = {
center: new google.maps.LatLng(44.5452, -78.5389),
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(44.490, -78.649),
new google.maps.LatLng(44.599, -78.443)
);
var rectangle = new google.maps.Rectangle({
bounds: bounds,
editable: true
});
rectangle.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
Hope this helps!
I think the only thing you need to add is "draggable: true" in rectangle options.
So, it should be something like this;
var rectangle = new google.maps.Rectangle({
bounds: bounds,
editable: true,
draggable: true
});
This will make the rectangle resizable and draggable. Also in the body of the page create one button.
<body >
<button onclick="remove()">Close</button>
</body>
Inside remove function you can write your code to connect to database. You will have to declare the bounds outside initialize() to access it. This link might help you to understand how to connect google maps and MySQL. https://developers.google.com/maps/articles/phpsqlajax_v3