I have a google maps with a circle at a specific Lat and Lng. I am also using a Marker that I want displayed in the center of the circle, which should be the Lat and Lng the circle is set to.
Here is a screen shot of what I am talking about:
You can see the "6" and "7" are not in the center of the circle. I am not sure how to fix this?
Here is the Marker code:
var markerIcon = [
"img/marker-icon-1.png",
"img/marker-icon-2.png",
"img/marker-icon-3.png",
"img/marker-icon-4.png",
"img/marker-icon-5.png",
"img/marker-icon-6.png",
"img/marker-icon-7.png",
"img/marker-icon-8.png",
"img/marker-icon-9.png",
"img/marker-icon-10.png"
];
var marker = new google.maps.Marker({
position:new google.maps.LatLng(mapDataTrending[i].lat, mapDataTrending[i].lng),
icon: markerIcon[i],
map: map
});
I am setting the Lat and Lng from a JSON file, but I am using the same Lat and Lng to set the center of my circles.
Do note that when you place an image as a marker, the bottom center of the image goes to the latlng selected. you need to adjust for your image size via the Icon.anchor property (assuming you're talking about google maps Javascript v3 since you're using icon )
https://developers.google.com/maps/documentation/javascript/reference#Icon
Hopefully someone will find this helpful that is looking for a more copy paste answer. ICON_BASE allows you to replicate it across multiple icons of the same size.
const ICON_BASE = {
size: new google.maps.Size(16, 16),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(8, 8)),
};
const ICON_1 = {
...ICON_BASE,
url: "img/marker-icon-1.png",
};
Related
I am using Google Maps API JavaScript. My use case is I need to plot coordinates (lat, lng) on maps (create markers) and join them through polyline. The co-ordinates will be very close to each other so when I try to plot them, they get hidden behind the first marker. So I find out the center and try to zoom so that all markers will be visible on the map.
I used bounds to find the center but I am not able to zoom it to center co-ordinate. I used map.fitBounds(latlng); It fits the coordinate on the screen.
But what I want to achieve is to make polyline (connecting all co-ordinate) always horizontal and zoom it to center co-ordinate.
enter code herevar bounds = new google.maps.LatLngBounds();
for (i = 0; i < temp.length; i++) {
bounds.extend(temp[i]);
}
var latlng = bounds.getCenter();
map.setCenter(latlng);
As the coordinate will always be different, The polyline will be in any direction, but I always want to show it horizontally on the map.
what I get :
enter image description here
what i want to acheive:
enter image description here
Any suggestion will be appreciated.
Thanks in Advance.
I achieve something like this by using the following:
Use computeHeading() function of Geometry library to get the angle from your first to your last coordinate on the line. Make sure to add &libraries=geometry to your Maps JS script tag.
Once you get the heading, you can use the map.setHeading() function to change the angle of your view and after some testings,I can see that you can achieve the horizontal view by subtracting it to 90 degrees.
Here's the sample code and code snippet below:
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
center: {
lat: 40.756795,
lng: -73.954298
},
zoom: 16,
tilt: 47.5,
mapId: "90f87356969d889c",
});
//array of your points
const markerCoordinates = [
{ lat: 40.758481, lng: -73.958269 },
{ lat:40.754649, lng: -73.949563 },
];
//creating marker from your points
for (let i = 0; i < markerCoordinates.length; i++) {
const marker = markerCoordinates[i];
new google.maps.Marker({
position:marker,
map,
});
}
//creating polyline from your points
const createdPolyline = new google.maps.Polyline({
path: markerCoordinates,
geodesic: true,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
});
createdPolyline.setMap(map);
//get the heading(angle) of the first coordinate from the last coordinate
const heading = google.maps.geometry.spherical.computeHeading(
markerCoordinates[0],
markerCoordinates[1]
)
//once you get the heading subtract it by 90 to get a horizontal view
map.setHeading(heading-90)
}
Ok, i good a simple question about Google Maps.
Imagine there is a map the user scrolls half way out of screen on desktop. So only half of the map is visible on screen.
How can i calculate which part is visible, so i can put a marker in the center of the visible part of the map?
So if you check this out:
http://jsfiddle.net/Honkoman/ghzgdLhw/
and scale the browser window like this:
You see that pressing "run" sets the marker not in the visible middle of the map.
That's because map.getCenter works with the canvas dimensions, not the visible part of the map. So how can this be done?
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map
});
You can use
map.getBounds()
Returns the lat/lng bounds of the current viewport. If more than one
copy of the world is visible, the bounds range in longitude from -180
to 180 degrees inclusive.
for obtain the coord of the visible maps
or directly you can use getCenter
map.getCenter();
and for marker
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Hello World!'
});
}
for the bound you can use this tecnique
aNord = map.getBounds().getNorthEast().lat();
aEst = map.getBounds().getNorthEast().lng();
aSud = map.getBounds().getSouthWest().lat();
aOvest = map.getBounds().getSouthWest().lng();
I want to know how can I change the position of the marker in the Google Map.
Currently I'm using:
var newlatlong = new google.maps.LatLng(place.geometry.location.lat(), place.geometry.location.lng());
map.setCenter(newlatlong);
marker.setPosition(newlatlong);
map.setZoom(10);
Can I hand code the position of the marker in the map other than the center position?
I mean map.setCenter(newlatlong);, Instead of setCenter Is there any other position available? or can I hand code the position in the map where the marker should appear?
Not sure why you are running the code twice...
But yes, you can pass latitude/longitude values directly to the setCenter method
map.setCenter({lat: -34, lng: 151});
Documentation: https://developers.google.com/maps/documentation/javascript/reference#Map
update after comments
If you want to move the map center so that the marker is specific position (in pixels), you can center on the marker and then use the .panBy method to move the map a fixed amount of pixels.
To create a marker:
var marker = new google.maps.Marker({
map : map,
position : newlatlong
})
to update the position of this marker:
marker.setPosition(newlatlong);
to put the center at the east of marker, for example:
map.setCenter(new LatLng(newlatlong.lat,newlatlong.lng + 1.0))
You can set the center of the map and the marker separately using different longitude and latitudes:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(41.512318, -72.979349);
};
var marker = new google.maps.Marker({
position: new google.maps.LatLng(41.513001, -72.983845)
});
};
This makes the marker slightly off center to the left. I used this in a current project of mine.
Is it just me or does the google maps api seem to be on the quirky side?
Trying to simply show a marker for some coordinates, and then center the screen on the marker.
In my controller fired from a view:
onGoogleMapRender: function (googleMap) {
var long = record.get("Longitude");
var lat = record.get("Latitude");
var pos = new google.maps.LatLng(lat, long);
var marker = new google.maps.Marker({
position: pos
});
marker.setMap(googleMap);
googleMap.setCenter(marker.getPosition());
googleMap.setZoom(14);
}
It seems to place the marker in the center of the screen but when I return and show the same screen the 2nd, or 3rd time, the marker is added but this time the marker doesn't get centered.
Has anyone got this working correctly? I don't suppose it is any ST2 related but more a quirk of the google api.
You have to center it with a small timeout, than it will work fine.
setTimeout(function() {
googleMap.panTo(marker.getPosition());
}, 100);
I don't know if it's a bug, but this way is shown in the showcase.
I am trying to get started with the Google Maps API, but I'm finding the documentation incredibly confusing. Does anyone know how to find the coordinates for an image for a ground overlay?
I copied the code here (https://developers.google.com/maps/documentation/javascript/overlays#GroundOverlays) and have it working on my website with my image. But when I try to change the coordinates from Newark to my location, the image does not appear at all. I've just been guesstimating the coordinates for the imageBounds and I'm guessing that's what is causing it not to work. Any help would be most appreciated.
This is my code (the LatLng coordinates are copied from the example):
function initialize() {
var newark = new google.maps.LatLng(40.740, -74.18);
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(40.712216,-74.22655),
new google.maps.LatLng(40.773941,-74.12544));
var myOptions = {
zoom: 13,
center: newark,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var oldmap = new google.maps.GroundOverlay(
"http://www.mcography.com/beta/Accessibility_Map.png",
imageBounds);
oldmap.setMap(map);
}
I use the LatLng Marker and LatLng tooltip options of maps.google.com labs (link is in the right bar - bottom). Once I get it close, I simply make small tweaks to my LatLng numbers.
Also it looks like you may be using the wrong corners for your LatLngBounds box. It should be Southwest (bottom left) then Northeast (top right). Using the wrong corners has the effect of not showing an image.