Create own markers in Google maps Api Javascript - javascript

newcomer here, been searching through google but not finding the help i need.
Im making a website for outdoor gyms, where I have placed my markers with coords(may have to stash them in mysql) but currently in my code in a markers array.
I want the user to be able to input their adress/county to find the closest outdoor gym/ running track based on their preference. The search should search through the markers and find the closest one in that area.
Until now, i have the map, the markers, the searchfunction is a big obstacle for me atm.
I appreciate any kind of help.

you could save markers by their coordinates (longitude and latitude) on your db. Then, you could use leaflet to load googleMap or openstreet map and draw your markers.
This is an useful tutorial https://scotch.io/tutorials/making-mean-apps-with-google-maps-part-i. I think it is the good point to start.

Related

Adding new places in google maps

I am using Google javascript api Currently. I would like to add new places like add small villages in the map, these small village does not appear in google map even when I am highest zoom. I know villages Lat/Lang and would like to add them when someone zoom in map (placed in my website). I can use Marker to accomplish similar, But it is not same as having places by default appear on map.
I tried searching stackoverflow and elsehere on net, But could not find any references. If someone can please sugggest on it
You need to request it from google: google.com/mapmaker
You need to drew a polygon of the city borders.
every request must to be approved by google.
Hope its help.
I used MarkWithLabel to accompalish http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.8/docs/examples.html

Google Streetview: Show markers within given radius

I have added custom markers to google maps streetview view without a problem. I am now wanting to show the markers I have added only when the user is within a few degrees of the markers coordinates and not visible when panning around street view from farther distances. I have seen a few forum posts about removing markers when in a given radius but not the reverse.
Litte more background... I am trying to make a simple easter egg hunt game using the streetview api.
Any thoughts are greatly appreciated!
You said "I have seen a few forum posts about removing markers when in a given radius but not the reverse", use that mechanism and reverse the test.

Dynamicaly update Google maps with AJAX

I have a lot of addresses in my database I want to add to Google maps as markers. I only want to load and add the markers that are in the selected area on the map. If the map is zoomed or dragged, it should update the markers on the map.
How do I do that?
Thanks very much in advance!
For managing a lot of markers, you will definitely want to leverage infrastructure that has already been built to do this. There is actually a great post on the Google Developers blog that discusses the popular options.
https://developers.google.com/maps/articles/toomanymarkers
The Marker Clusterer is a very common component that I see all over the place when it comes to maps apps, and seems to fit the requirements that you are looking for. I would also take a look at Fusion Tables, as it makes building a map with thousands of locations extremely simple.
As Aristos said the markers will be showed automatically when coming into focus. BUT, if I you a bazillion of contacts, it could indeed be easier to do it only when required.
My strategy would be:
Keep track of the addresses you have added -- no point doing it twice.
From the address, get the LatLng.
get the map's current bounds (use getBounds() to get the min/max LatLng of the map currently displayed)
check whether the LatLng of the address is within the bounds.
if it is, add a marker.
Loop
If you really have a lot of addresses you might want to prefetch the LatLng and store that in an SQL table. You could then query the table with the intervals.
HTH
EDIT: some code. Assuming you have an Array() of markers, and the Northwest and Southeast boundaries, you could do this:
function filterMarkers(nw, se, myMarkers) {
var north=nw.lat();
var west=nw.lng();
var south=se.lat();
var east=se.lng();
var isInsideBounds=[];
for (var i in myMarkers) {
if(myMarkers[i].position.lat()>=north && myMarkers[i].position.lat()=<south && myMarkers[i].position.lng()>=west && myMarkers[i].position.lng()=<east) {
isInsideBounds.push(myMarkers[i]);
}
}
return isInsideBounds;
}

How to display city limits using google maps API V3

If I do a search for a city or neighbourhood which google recognizes, like Fernwood, Victoria, I get a pretty map with a drawn boundary. Is there any way to access this kind of information with the google maps API?
I am not looking to draw my own lines on maps, I am looking to make a map showing multiple neighbourhoods with limits on the same map. Bonus points for the ability to style these limits (eg: fill them in like a regular polygon)?
I'm pretty sure that this kind of functionality is not supported by the api and works only for google maps.
I had implement this by finding the boundaries that i needed insert them in my postgis db and then send them with json whenever the polygon was within the map viewport.
Hope it helps

Highlighting whole street with some maps API

Is there any way to highlight/display on Google/Bing/(any other map provider) Maps whole street (from the beginning of the street to the end of)?
I know the existence of Polyline in Google Maps API, but it's just connecting two latitude points, and there is no way of making it automatic so I could display any street in some city.
Also I was thinking about Directions, but many street are 2 way, there is no guarante that you will mark whole street and it's just now user friendly. Example
You may want to check Mike Williams' article on how to snap points and polylines to streets with the Google Maps API:
Snap points (and polylines) to street
Especially this example:
Click on the map and a path will be drawn that follows the streets.
Take a look at OpenStreetMap. (Google and Bing won't let you access their underlying street data.)
You can show a map with OSM tiles, and use the API to query for the features you're interested in displaying on the map. OpenLayers is a javascript mapping library that could support this.
Here's a view of Chicago showing street vectors and other features overlaid on top of the map tiles:
http://www.openstreetmap.org/?lat=41.902104&lon=-87.626441&zoom=18&layers=B000FTTT
In Azure Maps you could access the vector tile road layers and use a data driven style based on the name of the road. Here is a tool that inspects the underlying data in the map tiles and highlights things that you click on. This has a lot of the basic functionality that you would need to achieve what you are asking for: https://azuremapscodesamples.azurewebsites.net/?search=inspect&sample=Inspect%20features%20under%20the%20mouse

Categories

Resources