Google Maps JavaScript API v3 - javascript

Please can someone point me in the right direction.
I have spent a few days watching videos and reading up on google maps and am more confused now than when I started.
I run a worpress site and want to add a google map to show venues. I have done this by copying the the html from a previous google map that I created. I decided to start afresh and try to style the map that it looks more attractive and also see if I could create a database with my site locations that I could update.
In the process I came across a pluging that asked me for my API key. I struggled to find my API key and then started reading that google maps has done away with its previous version and is now using something called Google Maps JavaScript API v3.
Please can someone guide me how to go about using this and what its all about. I've read up on Google Maps JavaScript API v3 but am still confused. ?
If someone has some useful videos, like idiots guide to getting started....

The basic documentation can be found at google's developers site. If you are struggling with the basic maps functionality and skinning, you may find it helpful to use a wrapper that simplifies a lot of the process, like this gmaps project on github.
If you have a more specific problem, maybe you could edit your post and list exactly what hurdles you are facing.

If you are using Wordpress, why not try a plugin directly? It would probably take care of all the specifics, and leave you with just having to deal with managing the site. This one has rather good ratings:
http://wordpress.org/extend/plugins/mappress-google-maps-for-wordpress/
Regarding your API key, it's something Google gives you when you register your site in order to use Maps. Try re registering.

Check this out: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/getting-creative-with-the-google-maps-api/. Kind of like a beginners guide...

Related

How to Display Direction list on Google Maps API?

enter image description here
When using directions in Google Maps
I would like to display a list of multiple paths using the api, like the red box in the attached photo, but I do not seem to have a good guide to look for the api document.
I want to know how to implement it.
I would appreciate your help.
This is a pretty complicated endeavor to simply have someone walk you through without having built your own code. That said the I would recomend reading through the google resource manual. And here is a walkthrough once you understand some basics of google maps javascript control.
tutorial
There are free resources to figure it out. Though there are even better paid resources. Just check out Udemy for a 10$ course (you have to sign in and search a coupon, but you can get access to any great course for $10)
Give it a shot and get back to us when you have tried some stuff specifically.

Google Maps Error

I'm hoping someone has come across this problem also. I'm a newbie to all this, therefore excuse my lack of knowledge in advance.
I currently have Google Maps API setup on my wordpress site. When I perform a search on the site i.e. page containing Google Map, no listing results are been found. Upon further investigation I have been advised that:
there's a JS error on my website coming from Maps API. Chrome Dev Console shows:
js?key=++AIzaSyC_GzbCPmMM8Jme9ZAi-IbKOdaXo_SfK_I+&libraries=places&ver=3b47f53……:34 InvalidValueError: setComponentRestrictions: not an Object
in source view of the page the google maps JS is called via this
https://maps.google.com/maps/api/js?key=++AIzaSyC_GzbCPmMM8Jme9ZAi-IbKOdaXo_SfK_I+&libraries=places&ver=3b47f534942a304aaad0d1a98d2531f8
the part "&ver=3b47f534942a304aaad0d1a98d2531f8" shouldn't be there (it's added to each JS file), so we assume it must be coming from some plugin that I have that might be causing that issue.
Before I start disabling every plugin on my wordpress site, has anyone come across this error before?
Any help would be much appreciated.
Thanks,
Justin
OK - so apparently this was a bug introduced in the 3.27 release of Google Maps.
https://code.google.com/p/gmaps-api-issues/issues/detail?id=11253&q=setComponentRestrictions&colspec=ID%20Type%20Status%20Introduced%20Fixed%20Summary%20Stars%20ApiType%20Internal
The Google team has it logged and is working on it.
In the meantime you can do as follows:
Thanks for the report! We have created an internal ticket to investigate this.
On the meantime, you can load JavaScript API version 3.26 to avoid getting this error.
UPDATE: It does not look like they plan on fixing this. So the correct fix would be to change your settings to:
autocomplete.setComponentRestrictions({'country': []});
I have the same problem, but I have changed to the version 3 and it has worked. Obviously, that it isn't the best way to correct it, but I can use this solution up to somebody publishes the correct fix.
Before
http://maps.googleapis.com/maps/api/js?key=[MyKey]&libraries=places
After
http://maps.googleapis.com/maps/api/js?key=[MyKey]&libraries=places&v=3
I just started noticing a similar error as well, InvalidValueError: setComponentRestrictions: in property country: not a string; and not an Array. It turns out I was passing an empty object, {}, as the componentRestrictions option when trying to initialize a Place Autocomplete.
It looks like that componentRestrictions option is used by the Google Maps API, you can read more about it here. I am assuming that Google recently made a change that throws an exception if it is configured wrong.
So in your particular case I imagine either you, or one of your plugins, is not setting componentRestrictions correctly.
Upgrade Google Maps to Version 3.28.

Using Google Maps offline (Js Api)

I'm trying to make an NodeJs App in which, on web page I'm using Maps, For some reasons I've chosen Google Maps and I want to stick to it. My question is, Is there anyway where I can either store or cache map tiles offline and later on use it as needed [Note: Not looking for any hack or Illegal way for it, I already know there are many such ways].
I tried and saw many options like GEE (Google Earth Enterprise) portable but I guess they are shutting it down very soon i.e by 2017.
Basically what I'm trying here is to minimize the data usage on rendering map tiles, so alternatively, if there ain't a way to make google map work offline any suggestion or advice for minimizing data usage is appreciated.
The offline access via Maps JavaScript API is not available at the moment. There is a feature request in the public issue tracker:
https://issuetracker.google.com/issues/35827808
Please star this feature request to express your interest and receive further updates from Google.
1.Use Localstorage instead it might help but will be used in google chrome.
2.Check this url it might help How to cache Google map tiles for offline usage?

Any suggestions for an interactive map application?

I need to do something similar to this:
Flash-based interactive map
I wonder if you could recommend a good library or something. JQuery or Javascript will be nice, but Flash/Action Script is not a good option.
You can use jQuery based solution for that - jVectorMap.
Give the Google maps API to make your own custom map from your own images
http://forevermore.net/articles/photo-zoom/
http://www.maplib.net/
You can then use the same api to detect clicks that would trigger modal windows.
You can have a variety of 44 Maping APIs HERE
and of course Flash/Action Script is not a good option since it takes much resource and is always slower than JavaScript and AJAX based solutions.
HERE is your first tutorial to set up your map (from Google developers).
and finally, HERE is a collection of Free Mapping Tools for creating maps online.
Hope this helps :)

Show google maps on mobile website

Is it possible to add google maps on a site designed specifically for the iPhone? I have never integrated maps in my websites before, so this question really goes more because of my inexperience.
Using basic html and javascript at the moment.
The Google Maps API V3 is specifically designed to work efficiently on mobile devices. There are some great tutorials here and here.
Any link to a Google Maps URL will automatically open in the Maps application, which may be more useful than simply embedding a map view in the website itself.
For example, a link to http://maps.google.com/maps?q=cupertino will automatically open the Maps application and run a search for "cupertino".
I think, if you only need a google map with some simple function. The simplest way is use the MapKit.Framework, it's a part of iphone OS. You can find the document here.
If you need to load your own web site, you need to use UIWebView. you can find the document here(http://developer.apple.com/iphone/library/documentation/UIKit/Reference/UIWebView_Class/Reference/Reference.html).
I think these two ways can help you solve your problem.
And sorry about the link, because I'm not allowed to post more than one hyperlink.

Categories

Resources