Getting Started with google maps API, displaying a community - javascript

I am trying to immerse myself into the Google Maps API to display some locations on a website. I have looked through the official documentation found here: https://developers.google.com/maps/documentation/javascript/tutorial However, I am a visual learner, and have a lot more success working through tutorials hands on.
My objective for now is very simple, I just would like to display a sub locality (that is already within google maps, i.e. https://www.google.com/maps/preview?authuser=0#!q=Greenfield+Lakes%2C+Gilbert%2C+AZ+sub+locality&data=!1m4!1m3!1d33995!2d-111.7348491!3d33.3303003!4m10!1m9!4m8!1m3!1d4249!2d-111.736458!3d33.338736!3m2!1i1920!2i979!4f13.1 and display that on my own website.
Does anyone have any recommendations on how to start this process or know of a tutorial that could help me on my way?

i have implemented same with google maps. may be this will give you some idea Google Maps implementation
also answered similar question here https://stackoverflow.com/a/7894821/942855

Related

Data visualization on map

I’m working on a vuejs project, I want to make some data visualisation on a map: display a map and show some percentages for each country. I really do not know from where to start. What tools to use ? Is there some tutorials and javascript libraries that can help ? Thanks !
If you just want to show some percentages on each country, and you don't need those detail information on the maps, maybe you don't need Google Maps.
Try D3.js. There are several examples you can build with. DataMaps would be a good choice.
you could use the google maps api, they have good documentation on all their stuff.
https://developers.google.com/maps/documentation/
It should be noted however that these days you need a account with billing information to use their maps api's.
to be honest your question is so broad that if i were you i would first start to brainstorm and get a good grasp about what i wanted to do and how to do it.

Google maps API MarkerManager

I'm sure this question will be downvoted, but...
Is Google Maps MarkerManager still "a thing"? On some of the Google documentation I see it mentioned, and in other parts of I do not.
All of the information I can find on this library seems very outdated. It also causes an error if this library is included on the page before the Google Maps API is loaded. Is there a newer recommended method for handling lots of markers the way this library does?
2 years Ago, when I was working on map based project, we used markerclusterer library. It might suit your needs. Here's a simple example
some more examples

Mapping very large GPS tracks using HTML and Javascript

I'm making a blog for an upcoming bicycle tour and I'd like to have a map showing my progress. I've searched for hours for an existing product or service and nothing even came close. I know it's possible because I've seen it done before (https://dl.dropboxusercontent.com/u/19443192/billy/BillysRoute.html).
I will be recording each day's ride and getting a single .GPX file for each day. Ideally I'd like to be able to upload each day's .GPX to an online database like Google Drive or Dropbox and have the map automatically update including the new track. It would also be nice to be able to embed the map on my blog, but just linking to the map would also be fine.
So far I haven't even been able to find a method to place very many tracks on a single online map. Recently I tried dissecting the example I posted above to see how it was made and found that writing a fairly simple HTML/JavaScript might be the answer. I did my best reading through the Google Developer pages but having no coding experience I am pretty quickly overwhelmed.
TL;DR my questions are:
1) How was (https://dl.dropboxusercontent.com/u/19443192/billy/BillysRoute.html) made and/or how can I make a similar one using several GPS tracks?
2) Is it possible to build an online map that displays several .GPX tracks drawn from a folder in Google Drive, Dropbox or similar?
Yes, what you are asking is definitely possible. The question is where and how you want to do it. For example, for Wordpress-based blogs, there are plugins that allow you to easily do what you are asking for. https://wordpress.org/support/plugin/google-maps-gpx-viewer (and others) may be interesting for you. If you already have a blog then you should look at whether it has similar features you can use or enable.

Google Maps JS v3 and HTML5 JavaScript Frameworks

I'm currently working on a mapping project using the Google Maps JavaScript API.
But my application will be much more advanced then showing a single map and will eventually show multiple map "views" as well as options to manipulate the map using forms on the page.
I have used a couple different HTML 5 JavaScript frameworks such as Backbone.js, Angular.js as well as Ember.js for other projects but nothing has worked well with Google Maps.
I'm wondering if anyone would recommend using a particular JavaScript framework for working with Google Maps JavaScript v3 API.
Preferably something with an active plugin/module for Google Maps would work best. I have created my own special views in Backbone for Google Maps but it does not work as "well" as I want it to.
If you have a suggestion to use a different mapping API, other than GMaps, I would love to hear about it too.
There is also an ember-leaflet proyect, seems interesting but I did not taste it yet.
https://github.com/gabesmed/ember-leaflet
http://gabesmed.github.io/ember-leaflet/
Good luck
Turns out there are two really great approaches.
EmberJS + Leaflet http://gabesmed.github.io/ember-leaflet/
AngularJS + Leaflet http://tombatossals.github.io/angular-leaflet-directive/#!/
AngularJS + Google Maps http://nlaplante.github.io/angular-google-maps/#!/usage
I have decided to either use AngularJS or EmberJS with Leaflet, as the Leaflet API is much more robust than the Google Maps API. (imo)
Not a Google maps solution, but you said you'd love to hear about other possible mapping solutions. Well, ArcGIS has a Javascript API https://developers.arcgis.com/en/javascript/ that is directly coupled with the Dojo javascript framework, though they do have a light version of the API as well that still runs off a stripped down version of dojo, but is more aimed at allowing integration with other JS frameworks.
May or may not meet what you're wanting, but it's an option anyway and figured I'd pass it along. They have a number of samples and such so I'd suggest you go there and take a look rather than me trying to explain.
I second the ember-leaflet suggestion. You can use any map provider you want, through leaflet.

Add get directions link to InfoWindow Google maps V3

Back with another google maps V3 question.
Here’s the background; I now have a map populated by a number of markers with info windows and what I want to do is add a link in the info Window that when pressed opens another browser window with google maps directions info in it.
I'v read a number of tutorials including the one by Mike Williams but most of them are either written for V2 of the API or just plain don’t seem to work, so do any of you good people know of a good noob tutorial that can give me some idea how to do this?
Thanks in advance
If you're just trying to send folks to http://maps.google.com for a directions query, a URL like http://maps.google.com/maps?saddr=Start&daddr=end might work, but I don't think there's any official documentation on those URLs.
If you want to have directions as part of your application, you should probably take a look at some examples of the Direction Service in the JS API.

Categories