Google maps API map.openInfoWindowHtml is not including full html - google-maps

i have the following code:
var point0 = new GLatLng(40.786729,-73.972766);
var marker0 = new GMarker(point0);
marker0.value = 0;
GEvent.addListener(marker0, "click", function() {
var myHtml = "<b><a href='http://Photos.Net'><br />01-0001</a></b><br /><br /><img src=http://adam.kantro.net/pics/Apartment/Thumbnails/Apartment-pic001.jpg><br/><br/><br/>";
map.openInfoWindowHtml(point0, myHtml);
});
the issue is that the image shows up outside the bounds of the popup window. Is there anyway to force the popup window to expand to fit this picture and the full html.

This is a pretty common problem with Google maps info windows.
Set the height explicitly on the image tag:
<img height="112" src=http://.../Apartment-pic001.jpg>
Check inherited styles being applied to the info window contents after it has been attached to the map.
Check out the following question:
How to set Google map's marker's infowindow max height?

Have you tried something like
map.openInfoWindowHtml('<div style="width: 20em">...</div>');
I don't believe it can auto size so you have to be cute and specify the width beforehand
also see here

Related

How to add marker to google logo destination?

I am creating a map object with a long/lat position as center. When clicking the google logo in the bottom left corner you are routed to google maps with the same position as center. But in the embedded map I have also added a marker at the center position.
Is it possible to have that marker set when you route to google maps as well?
I couldn't find anything in the documentation..
The logo's link looks like this:
https://maps.google.com/maps?ll=40.758893,-73.985132&z=10&t=m&hl=en-US&gl=US&mapclient=apiv3
In your case all you have to do is change the parameters of the link.
Using the ?q=40.758893,-73.985132 parameter instead of ?ll=40.758893,-73.985132 is probably enough for you. The q=latitude,longitude puts a marker to the position. Although it is possible to use both parameters. The q is the marker's position and the ll is the center of the map. (use the & separator between them).
I think it is against the Google Maps API ToS to modify the Google branding or the link. But anyway it is possible with javascript.
You can see the original answer here: How to change Google logo's href
After the map is loaded you can manipulate the link:
...
map.addListener('tilesloaded', function(){
modifyLogoLink();
});
...
And here is how to change the link:
function modifyLogoLink(){
var anchors = document.getElementsByTagName('a'),
l = anchors.length,
i,
a;
for (i = 0; i < l; i++) {
a = anchors[i];
if (a.href.indexOf('maps.google.com/maps?') !== -1) {
// here you can manipulate the anchor
a.href = a.href.replace('ll=', 'q=')
}
}
}
Please also note that the Google's link is changed every time when the map is dragged or zoomed. So you must handle this as well.
Hope this helps.

Google maps search box FOUC

When the map is loading the location, e.g. waiting for geolocation access, the search box renders on the edge of the map like this
Anyone know any tricks to stop this ? Either don't show the box at all, or put the box in the map where it should be.
As for code, even the Google example suffers from this problem: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete
What is happening is that the <input> element is part of the HTML markup, and is visible on the page also before google maps has finished initalization. It is not an error or even unexpected behavior. You have two options :
1) set the <input> box visibility to hidden :
<input id="pac-input" class="controls" type="text"
placeholder="Enter a location" style="visibility:hidden;">
and show the box as the last thing in initialize()
google.maps.event.addListener(map, 'idle', function() {
input.style.visibility='visible';
});
see fiddle -> http://jsfiddle.net/xkAaJ/
2) create the input box by code. Remove the <input> markup and replace
var input = /** #type {HTMLInputElement} */(
document.getElementById('pac-input'));
in initialize() with
var input = document.createElement('input');
input.id="pac-input";
input.className="controls";
input.type="text";
input.placeholder="Enter a location";
see fiddle -> http://jsfiddle.net/wy6X3/
The code examples is based on the google places example you are refering to in the question.

Google Map's "Only displaying top left tile", using gMaps.js in Angular JS

I checked that there are checkresize() methods from google Map's native API.. but it doesn't seem to work with the refresh function from gmaps.js.
Does anyone has similar problems using AngularJS and gMaps.js? How do you come to solve it?
After i resize the window, the map appears again. So I am thinking is there anyway to check resize on initialization for gMap.js?
ng-cloak did not work for me when I tried it. I think this was because I am using the map in a panel which expands on user interaction instead of being visible on load.
I switched my ng-show to an ng-if and it worked correctly. This is because the map code(I used a directive) will not run until the if condition is true, which allows it to render properly.
*Sorry the fiddle got deleted. I don't remember what I had in it, but it was something like this
<gmap unique="231" center="{{getAddress(item)}}" destination="{{getAddress(item)}}" origin="{{getMyAddress(item)}}" type="roadmap" marker-content="Hello"></gmap>
The important thing is that the google scripts don't start doing their thing until your container element is actually displayed. This is accomplished with the ng-if.
Add the ng-cloak property on your map element or on your directive element.
"The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser"
http://docs.angularjs.org/api/ng.directive:ngCloak
map rendered successfully without resize.
Why resize gives you proper map ?
Because browser paints the view again.
How to fix it?
To get a proper layout of the map in any panel which is triggered lately, map has to be painted after the panel is loaded.This can be achieved by (setTimeout) code as mentioned below.
code objective is to trigger map resize event after 60 milli seconds.
setTimeout(function () {
uiGmapIsReady.promise().then(function (maps) {
google.maps.event.trigger(maps[0].map, 'resize');
lat = -37;
lon = 144;
maps[0].map.panTo(new google.maps.LatLng(lat,lon));
var marker = {
id: Date.now(),
coords: {
latitude: lat,
longitude: lon
}
};
$scope.map.markers = [];
$scope.map.markers.push(marker);
console.log($scope.map.markers);
});
}, 60);
Try to resize the map using this code in the controller:
NgMap.getMap().then(function(map){
google.maps.event.addListener(map, "idle", function(){
google.maps.event.trigger(map, 'resize');
});
});

Replace Info Windows with full-screen modal window?

I've got a Google Map (v3) setup and instead of in-map Info Windows (limited to boundaries of the map) I would like to use a full-screen modal window that will take up all of the area within the browser window. This map is for a mobile application, so I need all the space I can get in the window that pops up.
If anyone has any knowledge on how to accomplish this, or could point me in the right direction, I would appreciate it. Thank you!
If it's a full screen modal, then it doesn't have to be attached to the map, so you can use this structure:
<div id="map-canvas"></div>
<div id="modal"></div>
<script>
var map = new google.maps.Map(document.getElementById('map-canvas'),{
//options
});
google.maps.event.addListener(map,'click',function(e) {
//do something with div id="modal"
});
</script>

how to arrange the divs in the page like google map or other map site

We are now trying to build a map library like google/bing/yahoo,we will use it offline.
However I found that I have no idea about how to arange the divs in the page,since there are some many different types of divs.
1) the map tiles (small image 256X256)
2)the overlayer(marker/informationwindow/polygon...)
3)the control.
I have to try to read the html source codes of google and bing and etc. But I found it is difficult to understand them.
For exmaple,this frangment is copyed from another online map site of China.
As you can see,it is just a exmaple for how to adding a marker to the map.
But take the code,there are so many nested divs,most of them have the property of "width:0;height:0",I do not know why?
Since in my opinion,the marker is just an icon,just put it in the page.
Why use so many nested divs and even the "map" tag?
But I think they must have the advantages which I can not find.
Any one can give some suggestions?
Typically you insert a div in HTML when you want to create a block element but there is no more semantically-loaded element available with the correct meaning.
I think the answer to your question is to use just as many div elements as you need for your purposes. Do not add more just because you can. Sometimes you don't need any div elements at all - you can use other more meaningful elements such as img, ul, p, etc. You can sometimes avoid inserting a wrapping div by using CSS to change an inline element such as a into a block element.
If you need more later then add them later. Don't worry about what Google/Bing/Yahoo do. Their requirements are probably different to yours.
Have you looked at the Google Maps sample code and demo gallery?
http://code.google.com/apis/maps/documentation/javascript/demogallery.html
http://code.google.com/apis/maps/documentation/javascript/examples/index.html
I'm not sure how you would use this "offline" considering the sample you provided makes a call to the internet to get the map. Also all of these types of maps rely heavily on javascript and ajax calls to constantly update the map. Do you mean these pages would be secured and not public?
How about you just use maybe a 5x5 grid of divs, move them as they are dragged out of view, and then texture them dynamically with AJAX calls.
If I am understanding you correctly, all of the layers can be thrown on top of each other with z-index.
<div id="control" style="z-index:-1;"></div>
<div id="overlay" style="z-index:-2;"></div>
<div id="map" style="z-index:-3;"></div>
Then you can use each of these divs as containers for different parts of your map.
As you drag 1 div off to, say, the right, then it will automatically bump itself to the left side of your grid and retexture itself (background-image) through an ajax call.
That's what I would do, at least.
Use the Google Maps API you can see an example of custom tiles here: http://code.google.com/apis/maps/documentation/javascript/examples/maptype-base.html
You would need to copy all the files to your computer to be exceccible offline. Your javascript would look something like this:
function CoordMapType() {
}
CoordMapType.prototype.tileSize = new google.maps.Size(256,256);
CoordMapType.prototype.maxZoom = 19;
CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
var div = ownerDocument.createElement('DIV');
div.style.backgroundImage=coord+'.js';
return div;
};
CoordMapType.prototype.name = "Tile #s";
CoordMapType.prototype.alt = "Tile Coordinate Map Type";
var map;
var chicago = new google.maps.LatLng(41.850033,-87.6500523);
var coordinateMapType = new CoordMapType();
function initialize() {
var mapOptions = {
zoom: 10,
streetViewControl: false,
mapTypeId: 'coordinate',
mapTypeControlOptions: {}
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
google.maps.event.addListener(map, 'maptypeid_changed', function() {
var showStreetViewControl = map.getMapTypeId() != 'coordinate';
map.setOptions({'streetViewControl': showStreetViewControl});
});
// Now attach the coordinate map type to the map's registry
map.mapTypes.set('coordinate', coordinateMapType);
}