I'm looking for an InfoWindow replacement for Google Maps v3. I want to use it for popping up on marker mouseover. The standard InfoWindow is wholly unusable because it pans and makes itself a nuisance. Google Maps v2 had the excellent GxMarker (doesn't work with the new API): http://code.toeat.com/gxmarker.html
Does anyone know of a similar plugin for Google Maps v3, or other ways to work around the bossy behaviour of InfoWindow?
In the InfoWindow options you can disable the panning by setting disableAutoPan to be true, you can read more on the reference page.
But there is also a InfoBox utility library that can be found here
http://econym.org.uk/gmap/ebubble.htm was what I used for V2 and when you glance at the code you can see it's fairly simply and may work with V3 if altered slightly.
Hope it helps.
var infowindow2 = new google.maps.InfoWindow({
disableAutoPan: true
});
Related
When you visit maps.google.com there is an information at the right bottom corner saying when the image has been captured:
screenshot google maps
However on my site when I use Google Maps API, that information is simply not shown. I cannot find any setting for this either.
Does anyone know how to display that information?
EDIT:
I don't use google.maps.StreetViewPanorama, but google.maps.Map where the user can switch to StreetView mode.
Thanks!
When you create the Street View, specify the imageDateControl attribute in the options. It's disabled by default; you have to enable it.
Something like:
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: yourLocation,
imageDateControl: true
});
See:
https://developers.google.com/maps/documentation/javascript/3.exp/reference#StreetViewPanoramaOptions
I was able to set the options by getting the StreetView object from the map:
this.map = new google.maps.Map(this.divContainer, defaultMapOptions);
this.map.getStreetView().setOptions(defaultStreetViewOptions);
InfoWindow is a standard part of the Google Maps API v3, allowing the user to create a pop-up window on a map, but there's also two other libraries that seem to do the same thing:
InfoBox
InfoBubble
I understand that these two most likely offer more customization options than the original InfoWindow, but are there any other differences? Are they competitors or do they do different jobs? Is one more up-to-date than the other?
While InfoWindow is the built-in object of the Google Maps JavaScript API, InfoBox and InfoBubble are "third-party" objects of the InfoWindow, which extend it. Because of this the two are located in the utility-library.
So they are doing the same job, but are more enhanced concerning customizations. The InfoBubble seems to be better documented and maintained. The InfoBox library is also not mentioned on the Google Maps Github site anymore. So if you have to make the choice I would go for InfoBubble instead of InfoBox (if you need more options compared to the standard InfoWindow).
So, having been recently somewhat dissapointed with lack of customizability of the regular google maps "embed" (iframe) code; I have started tinkering with the Google Maps API v3. Really, all I want to do is show a marker for a business on the map, so that you can click it and go to that "place" at mapsgoogle.com.
So pretty much, I just want to recreate the functionality of the iframe code below. I put in about an hour of reading the docs, but it seems extremely complicated just to get the marker associated with a 'place'
The place
https://maps.google.com/maps?cid=1311411133662139490
The standard Embed
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?cid=1311411133662139490&ie=UTF8&hq=&hnear=&t=m&iwloc=A&ll=41.097905,-73.405006&spn=0.006295,0.006295&output=embed"></iframe><br /><small>View Larger Map</small>
It appears as though there is no functionality in the api to use the cid.
To Elaborate a little
Generally I would use this just for small business websites. I was frustrated with the regular iframe embed and lack of customizability. Essentially I want a starting point from which I can play with stuff and heavily customize the look/feel, but have been unable to put a marker in that's associated with the data for a "place" - allowing for the little pop-up window, etc..
Honestly, I didn't really do enough research before asking this question - and came in with some misconceptions. I think, and I may be wrong, that the API is still what I want to be using ultimately, but had I know about the functionality in Rick's answer, I probably would have settled on that and procrastinated longer on learning the gmaps API.
Allow me to explain one option of achieving your goal. I use the marker and infoWindow objects that Google Maps API v3 offers, which you can find in the document I attached in the link. Feel free to follow along in the jsFiddle I created: http://jsfiddle.net/bgvYH/
First thing is first, you want to initiate your map with its options - I'm going to assume you know what the different variables in following code snippet represent:
var myLatlng = new google.maps.LatLng(41.097905,-73.405006);
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
If you want to customize your map even more to your liking, have a look at the different options you can set in the API reference, you'll set these options in the myOptions object ( https://developers.google.com/maps/documentation/javascript/reference#MapOptions ).
Note: I set the center of the map to the Lat/Long coordinates of the restaurant - which I took from the URL you provided in the iframe ll=41.097905,-73.405006.
Now what you want to do next is determine the content you want to display in your infoWindow, so the restaurant information:
var contentString = "<div id='content'>";
contentString += "<div id='title'>Mr. Frosty's Deli and Grill</div>";
contentString += "<div id='info'><p>10 1st Street</p><p>Norwalk, CT 06855</p><p>(203) 956-5767</p><p><a href='http://thebeachburger.com/'>thebeachburger.com</a></p></div></div>";
You may even end up pulling this information from a database or JSON object in the future, depending on how deep you go into this project (for now I have it as static HTML).
Next we initialize the infoWindow object and set the contentString to the content option of the infoWindow. There are other options you can customize here (just like the map options, again look at the reference for InfoWindowOptions: https://developers.google.com/maps/documentation/javascript/reference#InfoWindowOptions )
var infowindow = new google.maps.InfoWindow({
content: contentString
});
After setting up your infoWindow object, you initialize your marker object - which will place the drop the bubble on the map. Once again, you set up the options for the marker when initializing much like you did with the map object and the infoWindow object - you can further customize it to your liking by looking at the reference (I think there's even an option in there for the marker where you can use custom icons - you can get pretty creative here).
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Mr. Frosty's Deli and Grill"
});
And finally, you need to bind the Marker and the infoWindow together - so that when a user clicks on the marker the info pops up. This is achieved by using the event listener, and you listen for a "click" action on the marker variable. Read this document for information on events on google maps https://developers.google.com/maps/documentation/javascript/events. Likewise look through the API Reference for the different events you can listen to on an object.
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
That should do it, you should have a working alternative to the iframe you include - except now you can customize the map and the actions you perform on it to however you want. In the jsFiddle I also included some styling, just to make things look nice inside the infoWindow.
Now, I want to let you know - I believe there is another option to what your looking for - but I have yet to experiment with this API. It is the Google Places API, which you'll have register for. But from what I read through the documents, I think you may be able to achieve what you want to do. Have a look at it ( https://developers.google.com/maps/documentation/places/ ), and see what's good.
It looks like this was created through 'My Places' and made public. If you don't want to mess with the API then that's your best bet.
Visit maps.google.com, click 'My Places' and 'Create Map'. Customize and grab the embed code.
If the map doesn't need to be interactive (beyond the click action), use a static map. It's just an image so you can wrap it in an anchor that points exactly where you want.
Is it possible to disable map controls by adding some variables to the Google Maps embed code?
no you can't, but if you use the javascript api you can do this:
map = new google.maps.Map(document.getElementById("map_canvas"), {
panControl: false,
zoomControl: false,
scaleControl: false,
});
This can be done in one step in V3:
Add this to your mapOptions:
disableDefaultUI: true
That's the 8 stepts to can create a static map like this map of Berlin without controls:
http://maps.googleapis.com/maps/api/staticmap?center=52.569916,13.408571&zoom=8&format=png&sensor=false&size=300x200&maptype=roadmap
Here the 8 steps
Go to http://gmaps-samples-v3.googlecode.com/svn-history/r328/trunk/styledmaps/wizard/index.html
Type in your address in the top right corner
Now you can still style and zoom a bit
Click on the "Static Map"
Copy the Link,
Paste it in the address bar
Play around with the parameters (e.g. size)
Instert the ready image on your page
It would seem that google has implemented a tiered pricing model for the maps that are using the api, embed maps have unlimited uses while dynamic maps don't. The selected accepted answer, while still accurate, is only valid if you are willing to setup a paid account. For map implementation with more control that won't cost as much (if anything) I recommend map-box.
https://www.mapbox.com/pricing/
I don't think you can disable map controls using the embedded code in a clean way.
You could make them disappear via css if you find the class or id if the controls.
This is not a good solution because in the feature the code might break.
The best solution is to make a custom map using the javascript api v3.
In Google Maps API v2 we can set to marker an option bouncy:true. It adds to marker eye-candy ability - after dragging this marker, it is bouncing.
Is it possible to do in API v3 ?
Here's how you do it in V3
google.maps.event.addListener(marker, "dragend", function(){
marker.setAnimation(google.maps.Animation.BOUNCE);
});
I just had a quick look at the API v3 spec for Markers - it doesn't look like the 'bouncy' option is available right now but I wouldn't be surprised to see this get implemented into the v3 API at some point - it's still in Beta and bound to change quite a bit.
Here is a link to the API v3 Reference on the available Marker Options
If you really wanted the behavior in a V3 Map now you could tie an event to the 'dragend' method on the Marker Object. Have the function called alter the anchor point of the MarkerImage object - check out the MarkerImage object in the API too.
Well, I was looking for a way for implementing bouncy markers in V3 of google maps so that if we are showing a cluster of markers, the currently selected marker should be visible clearly.
We used the z-index property of the marker to set the z-index of the current marker at a relatively higher value than the rest.