How to achieve Bing maps like InfoWindow in Google Maps? - javascript

I'm using Google Maps v3.
I really like the InfoWindows found in Bing, as opposed to Google.
Screenshots & functionality found here comparing the two:
http://www.axismaps.com/blog/2009/07/data-probing-and-info-window-design-on-web-based-maps/
Question: How can I replicate Bing like InfoWindows while using Google Maps v3?
UPDATE: To be more specific, what I like about Bing's InfoWindows include:
- The pointer dynamically changes sides from left/right/bottom/top, as opposed to Google limited to only have the InfoWindow pointer on the bottom
- Bing's InfoWindows use less space
- You can configure Bing's InfoWindows to pop up outside of the map bounders so that you don't have to autopan the map to display the marker's InfoWindow

Check out google-maps-utility-library-v3. Specifically, look at InfoBox. It allows you to style the infobox however you want, although you have to do the styling on your own. I don't think you'll be able to have the infobox display outside the map viewport, but you can turn off autopan.

Related

google maps API highlight areas

Is there a way to highlight areas with Google Map JS API v3?
I've seen some websites do it
here are some examples:
http://www.streetadvisor.com/new-allakaket-yukon-koyukuk-alaska
http://www.homely.com.au/werribee-wyndham-melbourne-greater-victoria
http://www.realestate.com.au/neighbourhoods/upwey-3158-vic
This is called a polygon.
See the Google Docs for information.
You can manually set polygon points in JS.

Google maps API V3 fitBounds() not working

I'm want to call fitBounds() on a google map so that a user can see their own location relative to a selected marker/location.
Here is my function which handles this:
var fitMapToShowResult = function(index){
var hereLatLng = new google.maps.LatLng (lat,lng); //location of the user defined outside this func
var firstResultLatLng = new google.maps.LatLng(
$scope.searchResults[index].geometry.location.k,
$scope.searchResults[0].geometry.location.B
);
var latlngList = new Array( hereLatLng, firstResultLatLng ); // latlng: an array of instances of GLatLng
var latlngbounds = new google.maps.LatLngBounds();
for (var i=0;i<latlngList.length;i++){
latlngbounds.extend(latlngList[i]);
console.log('latlngbounds',latlngbounds);
}
//$scope.map.setCenter(latlngbounds.getCenter());
$scope.map.fitBounds(latlngbounds);
};
It works perfectly about 80% of the time. But roughly 1 in 5 times the marker is completely out of view and the zoom is way too high for the two points to ever be visible at the same time. What am I doing wrong?
It may be relevant that my map uses custom markers.
To assist with debugging, I added this code to draw the bounds on the map...
rect = new google.maps.Rectangle( {bounds: latlngbounds, map: $scope.map} );
It always looks perfect for the first couple results:
But often it's incorrect:
Notice that in each of the cases where it's incorrect, it appears that one of the dimensions of the rectangle (height/width) is correct, but the other is not. My gut tells me this is relevant.
Roundup of similar questions
I know this is a popular question, but I've reviewed all of the others and my issue does not seem to be a duplicate of any of them. Hopefully this stockpile will be useful to future troubleshooters, but none of these solved my issue.
google maps V3 fitBounds not accurate
Useless question with no code and no answers
Google Maps API v3 - fitBounds centers only one marker
User was re-defining the inside a loop without realizing it.
Using setZoom() after using fitBounds() with Google Maps API V3 &
Google Maps API V3 fitbounds() zooms out but never in &
Google Maps with fitBounds don't zoom
fitBounds() happens asyncronously so downstream actions need to be wrapped in eventListener.
google maps → fitBounds manually
User was passing incorrect type parameters to LatLngBounds (should be two google.maps.LatLngs)
google maps fitBounds() is broken or..? & Google maps API V3 method fitBounds()
Was constructing the google.maps.LatLngBounds with buggy coordinates (instead of leaving it empty and using .extend())
Trying to get Google Maps fitbounds to work
Super noob did not realize javascript methods were case sensitive
Google maps V3 custom marker images and fitBounds()
fitBounds() works as expected but user needed to allow more space for bug custom markers
Google Maps V3 fitBounds on visible markers
Simple question about how to use fitBounds()... rtfm
Google Maps API V3 - fitBounds randomly works but occasionally ignores bounds and loads in the middle of the ocean
No answers at time of writing. Sounds like invalid lat/lng pairs.
Don't use the values as geometry.location.**k**, it depends on minimized file (with some tool like MinifyJS) then it'll changes when google release a new versión.
MrUpsidown was right. My bounding box was wrong because I was referencing ....geometry.location.k directly instead of the LatLng object. Refactoring the code accordingly corrected the problem.

Change map boundaries google maps api

Does anyone know how to change the boundaries of a map with the google maps api? I have a map currently that shows the full world and if I zoom out it shows multiple copies of the full world. The problem is that I only want to show north america, and I only want to show it once. Can anybody help out? Thanks!
Duplicate: Google Maps API V3: limit map bounds
There's no API to restrict map boundary in Google Maps API. You may can accept external solution, or consider using other map library like OpenLayers or Leaflet, which supports max-extent feature.

Google Maps v3 marker with icon and image

I'm trying to add markers on my Google Maps V3. I want to have similar markers as on Foursquare, where they join an icon and image (with JS) and create one big marker.
Does anybody know how to accomplish this?
Rich marker perhaps?
Rich Marker v3
PS. the copy of richmarker.js from here worked better for me

Google Maps API V3 - Load map first and then load markers

I am creating a page to show a list of locations(markers) on Google maps. The number of markers is dynamic and can be quite large. This will adversely affect user experience when the map (along with the markers) are taking too long to load.
Can anyone point me in the right direction to load the map first and then load the markers. Any help much appreciated.
Use a marker manager. I used one for Google Maps API v2 (for on-demand loading of ~2000 markers via AJAX) and I am sure there's one for API v3. A marker manager is class that allows you to selectively display markers on a Google Map. Instead of adding markers to map, you use add them to the marker manager and it takes care of when and how to display the markers. The markers that lie outside the "visible" region are removed hence its fairly memory efficient. A marker manager class may provide "clustering" option (or may be you need another class for this). A cluster manager displays one marker that encompasses multiple markers when markers are too close, specially at high zoom level. Hope this helps you in the right direction.

Categories