Adding Google Maps to website with MapInnovations - javascript

I'm trying to integrate Google Maps on to my website, but the Google Maps api is a little bit complicated (for getting driving directions to show up). I'm wondering if anyone has had success using the tool from MapInnovations, as I've seen it on a couple of sites but I'm having some trouble getting the directions box to show up on my page. I put the addressbox div in the body tag and the other piece of code before my HTML tag, but all that shows up is a grey line.
Thanks in advance for any guidance.

I don't have experience with MapInnovations, but MapStraction one of the standards for map abstraction.

Related

Is there a way to view all custom marker icons in the Google maps javascript API?

The Issue:
I've viewed the tutorial on the Google Maps API documentation on how to change the icon of a marker. Here's a screenshot of that:
Google Maps tutorial
In this tutorial though, they don't actually elaborate on how they got the link to that icon. And I would like to know if there's anyway to view all the available icons and their corresponding links.
What I've tried
I tried going directly to the link: "https://maps.google.com/mapfiles/kml/shapes/", but that returns a 404 error.
After doing some research, I found this: http://econym.org.uk/gmap/geicons.htm ...This should work, but the icons are a bit outdated and don't really fit with what I'm going for.
Any help will be greatly appreciated. :)

Googlemaps javascript api zoom control +/- signs dissapear

I have to fix a display problem in an interactive online map that uses the Google Maps Javascript API. The problem is that the +/- signs to zoom appear a fraction of a second when the page is initially loaded but then disappear. Here is the link URL of the map:
https://www.ctq.gouv.qc.ca/fileadmin/documents/CarteInteractive/carte.html
If anyone has an insigh on how to adress that problem, that would be very much appreciated!
The problem is the buttom has the opacity:0 so you could'nt see it for this reason. If you want to solve it you need check the API parameters and check if you need some paramaters or remove it.

Constructing a HTML View in GWT (Google App Engine) with Google Maps V2, Facebook Comments, etc - layout?

Hi Im new to GWT and Google App Engine. Im trying to layout which looks like the image. However, Im not sure whats the best way to achieve this.
There are several ways according to GWT documentation such as: UIBinder, Layout Panels (Im using this approach in the image).... etc.
However, my UI is not that complicated. I have a div with the navigation bar on top, a div with a map(Javascript, a div with Facebook comments(javascript), and a div with some functionality which I wrote for ratings etc.
Thus mostly this webpage invokes a lot of javascript and third party stuff.
Here is some code that accomplishes this
String header = "<div><h3>Navigation bar here</h3></div>";
String east = "<div><h3>Rating System here</h3></div>";
String south = "<div><h3>Facebook comments here</h3></div>";
dock.addNorth(new HTML(header), 75);
dock.addSouth(new HTML(south),50);
dock.addEast(new HTML(east), 300);
dock.add(map);
RootLayoutPanel.get().add(dock);
I tried entering some Javascript in that html string to be added to the map. However, it didnt show up on the view. Seems like the html only works if its text, is that caorrect?
Whats the best way to construct this in GWT?
Could someone please point me to some examples of code/ tutorials?
Thanks
I built a website like you project to do (link in my profile).
There is a jar file available for mapping maps v3 in gwt.
Here it is : http://code.google.com/p/gwt-google-apis/downloads/detail?name=gwt-maps-3.8.0-pre1.zip
Take care of GAE ... if your application must stay in "free", and you plan to make it available for others users, you will ran out of quota pretty fast :-(
(I gets 60% of instance time with only googlebots ...)
Anyway, just make an almost empty html, and build your panels from scratch.

Google Maps API v3... non-mobile?

I'm trying to make a Google Maps widget for my website but all of the examples are for full-screen mobile devices. The tutorials work when I copy paste them exactly as shown but they don't seem to work when I want them to only occupy a portion of the page.
From what I've read, the v3 is the best API yet (for what I need) because of its speed and compatibility with mobile devices. I plan to make a widget very similar to the MarkerClusterer example from the demo gallery but I can't get it working.
Is this a common issue? I know I'm being vague but I would appreciate some help.
Thanks
One minute after I post this question, I find the problem...
The examples have the map_canvas div set to width:100%;height:100% which I have changed as follows:
Hope this helps somebody after me...

How do I implement google maps yelp.com style?

I have multiple locations (20+ per page) that need to be mapped on a single map. I would like to click on a link for the location that is not dynamically generated (for SEO purposes) that would open the info window for the respective marker on the map.
Behavior should mimic http://maptheburg.com/ - but this map has the sidebar links dynamically generated.
Yelp.com is the only site I have seen so far that manages to implement the Google Maps API with unobtrusive JavaScript.
I'm not entirely sure what the yelp implementation is but if it's unobtrusive JavaScript mapping you're after then your only feasible option is to deliver a static image rather than an interactive map where JavaScript is unavailable.
A quick walk through of this technique can be found here
HTH.
Yelp.com has it's own JavaScript library which is interacting/using Google Map's JavaScript API for maps. You might want to start by peeking in there.
Might want to also check out PdMarker for advanced Google Maps markers.
If I remember right, Yelp took one of the open-source markers implementations and modified it for their own uses.

Categories

Resources