How to get area coordinate in google map api - javascript

I have a address and i need to area coordinate(longitude and latitude) of that place in Google (recommended) or any map in JavaScript or PHP
I need list of longitude and latitude of above 4 corner using Google map API.
Google map link

One option would be to right click on the map, choose "What's here", take the coordinates from the box that appears
Doing that for your property, that gives me:
-33.801421, 151.133470
-33.801580, 151.133691
-33.801364, 151.133919
-33.801328, 151.133804
http://jsfiddle.net/geocodezip/otr0p64h/

Related

How do you configure HERE Maps Javascript to automatically set the required zoom value?

I'm using HERE Maps for Javascript in my Angular application.
I have a search functionality implemented, where the user can type in a location, the search API would provide suggestions and once the user selects a location, the map would automatically focus/center the selected location.
All works fine, except the zoom.
I want the map to zoom the map dynamically, based on the selection. For example, if the user selects a country like 'India', the zoom value would be much lesser to show the whole of India, or if the user selects an airport, say 'New Delhi Airport', the zoom value would be higher, to focus just the airport.
How do we do this with HERE Maps Javascript? Any ideas?
Take a look at the method setLookAtData that applies on the map viewmodel:
map.getViewModel().setLookAtData({
bounds: userSelectedGeometry
});
When you use setLookAtData with only the bounds property specified, it sets the center of the bounds as a the map center, and automatically calculate the required zoom that fits the bounds of the selected geometry (e.g. India, New Delhi Airport, ...) within the map viewport.
See the API Reference

Mapbox Display Lat and Lng and Zoom then putting them inside a textbox

enter image description here
I was wondering how to actually get the lat and lng and zoom values like in the picture example on mapbox style builder not with a mouse click or with a mouse move, just the entire map inside a div.
So explaining in detail, I was wondering if there was a way to grab the maps coordinates and display them based off of what mapbox does in there studio editor. They calculate the lat and lng and zoom level of their whole map and when a user scrolls around the map the lat and lng changes and it displays the new coordinates with the zoom level. I need to take those values and place them inside a textbox.
You have several samples on this.
how to get the coords of a point
how to create a draggable marker
how to get the coords of cursor
If you need the zoom too, you only need to add map.getZoom() to he methods that are painting the lngLat.lng and lngLat.lat

Google map multiple markers mapped to an area without coordinates

I have a very strange requirement from my client and I am not sure if it is achievable.
Here's the requirement:
The client wants to display a Map zoomed to a country level having 4 filters:
1. Drop down based state filter which should populate the cities in the city filter and the map should zoom to state level
2. Drop down based city filter which should populate the area filter and the map should zoom to city level
3. Drop down based area filter which would zoom the map to the area level.
This is where it gets tricky:
Once the map is zoomed at area level, it should display all the markers in that area and none of the markers have coordinates or address. They are only attributed to that area boundaries and are randomly/evenly spread out in that area so that all the markers are visible.
A marker clustering should be fine here but I don't know how the markers themselves can be placed in that area without coordinates or addresses, just based on area boundary coordinates.
Now comes the fourth filter:
4. A search box filter which will search the data only within those area markers and whichever matches, is shown and the rest are hidden
I believe I can still take care of the 4th filter, but it's the 3rd filter which is driving me crazy.
Is there any mechanism by which we can place multiple markers (with no coordinates or address, only associated to an area boundary), inside a highlighted area boundary and randomly/evenly distributed within that area so that all the markers are visible?
Thanks in advance.
One way of solving this comes to mind is using the getCenter from LatLngBounds class from google maps. This does require getting the polygon coordinates from somewhere else.
let coords = [{lat: -34, lng: 151},{lat: -34.5, lng: 151.5},etc]
let bounds = new google.maps.LatLngBounds();
coords.forEach(LatLng => bounds.extend(LatLng));
let center = bounds.getCenter(); //returns LatLng variable
This can also be used to center your google maps on an area with the function fitBounds:
map.fitBounds(bounds);
Using this would solve 2 of your challanges, the zoom and center

How to highlight region in google map by location name

I am new in google map i want to highlight region when user enter place name like "Delhi","Mumbai" and it should be highlight with red boundary. google provides same feature like this. I did google but i did not get any responsive answer.so can anyone tell me that how can i highlight region.
Thanks
First you need the coordinates of the polygons of the regions that you want to highlight, then you can create for each of these new polygon that has the attributes stroke_ fill_ * and * that you need

Google maps - Display a map and a marker by retrieving latitude and longitube with php

I have a database of points in latitude and longitude format (ex. 32.3185414, -86.954298) and I want to display a map of each point on its own webpage.
I would like to display a marker of that point on the map with a tooltip (if possible) displaying custom text. I use php. Is it possible?
I think you must use Google map javascrip Api for showing your lat long points on webpage.
See this link
https://developers.google.com/maps/documentation/javascript/examples/marker-simple
and for tooltip you can use
var marker = new google.maps.Marker({
position: point,
title:"Hello World!"
});
Codelord

Categories

Resources