How to put an image on Google Map using Api v3?
Question
I have a simple image of house(top view, looks like a 3d model) and I want to place this picture of the house on place where this house stands (on roadmap). This is an example of what I want . But I have a big problem with position, I just can't place the image correctly, it's torn or drives off ( an example of what I got ). I read all documentation about overlays but I don't know how to make this thing, maybe somebody tell me how to do it or show the direction where to go?
Example of code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Ground Overlays</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var Overlay;
function initialize() {
var house = new google.maps.LatLng(55.734907, 37.571526);
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(55.734603,37.571374),
new google.maps.LatLng(55.734944,37.572097),
new google.maps.LatLng(55.735032,37.571221),
new google.maps.LatLng(55.735201,37.570343),
new google.maps.LatLng(55.735218,37.570840),
new google.maps.LatLng(55.735238,37.571670),
new google.maps.LatLng(55.735423,37.571147),
new google.maps.LatLng(55.735551,37.570891)
);
var mapOptions = {
zoom: 17,
center: house,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
Overlay = new google.maps.GroundOverlay(
'file:///home/map_top.png',
imageBounds);
Overlay.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
1 answers
solution1
1 ACCPTED 2013-11-22 15:21:27
The anchor is located along the center point of the bottom of the 'bounds' (image) (You can see that here, Icon being an overlay too like GroundOverlay you can safely infer that that apply also to GroundOverlay.
Therefore your bounds has to be calculated to account this.
Besides, the constructor for google.maps.LatLngBounds take only 2 points. In your case the two firsts points:
new google.maps.LatLng(55.734603,37.571374)
new google.maps.LatLng(55.734944,37.572097)
If you pass more points they will be ignored.
Note that the coordinates in the format google.maps take is of this form DD.mmmmmm, so the part after the point are meters (if my memory does not disappoint me). Therefore if your image is at scale you can easily calculate your anchor point.
In the following example I worked with your two firsts points. To get it to work:
- Copy all the code in a .html file
- Change the path of the image.
- Run the page.
Then you can move to the right and to the left your image to demonstrate what I'm saying.
--- EDITED CODE: add the functions to make the image smaller/bigger ---------
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Ground Overlays</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
</head>
<body>
<div>
<input type="text" id="step" value="100" />
<button id="left">Left</button>
<button id="right">Right</button>
<button id="smaller">Smaller</button>
<button id="bigger">Bigger</button>
<label id="lng0">0</label>
<label id="lng1">1</label>
</div>
<div id="map-canvas"></div>
<script>
var stepPresition = 1000000.0;
var Overlay;
var markers = [];
var map;
var coordinates = [{ lat: 55.734603, lng: 37.571374 }, { lat: 55.734944, lng: 37.572097 }];
var points;
function initialize() {
var house = new google.maps.LatLng(55.734907, 37.571526);
var mapOptions = {
zoom: 17,
center: house,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
AddOverlay();
SetLabels();
}
function RemoveMarkers() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
}
function AddOverlay() {
points = [new google.maps.LatLng(coordinates[0].lat, coordinates[0].lng),
new google.maps.LatLng(coordinates[1].lat, coordinates[1].lng)];
for (var i = 0; i < points.length; i++) {
markers.push(new google.maps.Marker({ position: points[i], map: map, title: "Marker " + i }));
}
var imageBounds = new google.maps.LatLngBounds(points[0], points[1]);
Overlay = new google.maps.GroundOverlay('Content/images/map_top.png', imageBounds);
Overlay.setMap(map);
}
function RemoveOverlay() {
Overlay.setMap(null);
Overlay = null;
}
function MoveTo(step) {
for (var i = 0; i < coordinates.length; i++) {
coordinates[i].lng = coordinates[i].lng + step;
}
RemoveMarkers();
RemoveOverlay();
AddOverlay();
SetLabels();
}
function MoveToLeft() {
var step = parseFloat($("#step").val() / stepPresition);
MoveTo((-1) * step);
}
function MoveToRight() {
var step = parseFloat($("#step").val() / stepPresition);
MoveTo(step);
}
function SizeTo(step) {
coordinates[1].lng = coordinates[1].lng + step;
coordinates[1].lat = coordinates[1].lat + step;
RemoveMarkers();
RemoveOverlay();
AddOverlay();
SetLabels();
}
function SizeToSW() {
var step = parseFloat($("#step").val() / stepPresition);
SizeTo((-1) * step);
}
function SizeToNE() {
var step = parseFloat($("#step").val() / stepPresition);
SizeTo(step);
}
function SetLabels() {
var lng0 = $("#lng0"), lng1 = $("#lng1");
lng0.html("SW Point Longitude: " + parseInt(coordinates[0].lng * stepPresition) / stepPresition);
lng1.html("NE Point Longitude: " + parseInt(coordinates[1].lng * stepPresition) / stepPresition);
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function () {
$("#left").on('click', function () {
MoveToLeft();
});
$("#right").on('click', function () {
MoveToRight();
});
$("#smaller").on('click', function () {
SizeToSW();
});
$("#bigger").on('click', function () {
SizeToNE();
});
});
</script>
</body>
</html>
Hope this help you.
NOTE: The code is only for demostrate my point, is not the best performing and proper way to do what I've done here.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.