I'm trying to add the google map with a marker into my form in order to help users choose the location, but it went wrong somewhere.
As you see, the map didn't display correctly in its area. I've put a marker into the map and also set center there, but the location of that marker is not correct, it hides outside the initial map (in the top right of the map above, instead of the center).
When I hit the F12 button to enable Firebug (in firefox), the map display correctly
Here's the code for creating the form and adding google map:
The form in index.html file:
<div id="map_company" style="float: left; width: 500px;height: 350px;">
<label style="margin-bottom: 5px;">Chọn vị trí hãng xe trên bản đồ:</label>
<div id="map_canvas" style="width: 100%; height: 100%; position: relative;"></div>
</div>
And the javascript in the script file:
//add map to company tab
//Set Center
var myOptions =
{
center: new google.maps.LatLng(21.044813, 105.79864),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var comMarker = new google.maps.Marker({
position: new google.maps.LatLng(21.044813, 105.79864),
map: map,
draggable: true
});
google.maps.event.addListener(comMarker, 'dragend', function {
document.getElementById("cLat").value = this.getPosition().lat();
document.getElementById("cLon").value = this.getPosition().lng();
});
Can anyone help me to figure out the problem here, I even don't know how to explain it to google.
It appears that you use tabs.
When yes, you must trigger the resize-event of the map when the tab with the map has been selected.
Give your map_canvas a fixed size (in pixels, not percentage) and remove the position = relative. If you use percentages the parent node must also have a size, otherwise it make no sense, (100% of what?).
<div id="map_canvas" style="width: 400px; height: 300px;"></div>
Related
I have a google map. When I click a marker I show a bootstrap modal with style="z-index:999999999999999999999999999". No problems here. However when I click the fullscreen button, the the modal is not shown anymore. It only works in normal mode. Any suggestions how to fix this?
To see a sample see: http://jsfiddle.net/segato/e8w4wmh6/
var myCenter = new google.maps.LatLng(51.508742, -0.120850);
function initialize() {
var mapProp = {
center: myCenter,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function () {
$('#myModal').modal('show');
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Click the marker. Then click the full screen icon and then click a marker.
The point is that fullscreen mode use fullscreen API so anything outside the fullscreen element (in this case the map DIV) remains backward.
A workaround can be to append the modal element to the map div, for example exploiting the custom controls API.
map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById("myModal"));
See working fiddle.
N.B. I have disable modal background because in the maps it came out with a wrong z position, coming of top of the modal. I think would not be difficult to fix that if you need the background.
The solution proposed did not worked for me but inspired from this page it's OK : Google maps tool tip not working full screen mode
document.getElementById('map_canvas').firstChild.appendChild(document.getElement
ById("modalLarge"));
Good afternoon,
I have an issue with a google map and css "transform:scale".
My aim is to scale the map to 1.1 if the map is hovered. But if i do this i cant click the markern anymore. I have tried to solve it with jquery but i got no success.
Anybody here who has a solution?
Here is a fiddle: JSFIDDLE
I tought that first switch the scaled size, then load the map, and then switch to old size will get it to work, but no success.
Here is my abortive try..
$("#map").hover(function(){
$("#map").width(880).height(617.1).load('/index.html', function () {
initialize();
}).width(800).height(561);
});
Thanks for helping
Manuel Strohmaier
The problem is quite easy to explain, but unfortunately I haven't good solution now.
Take a look: http://take.ms/2E3fV
On image I mark rectangle which shows where exactly is now an element wchich responds for a click action on google map marker. So simply, when You scale map with CSS, each image scales too but position coordinates (left, right, top, bottom) don't change.
Theoreticaly You can inspect Google Map's code and fix this position in any way, but:
it's not universal solution (not for dynamic pin for example)
it can be changed in future (class name, or even whole solution)
it's rather hack than solution
what's your intens using transform:scale ?
why don't you use zoom for that ?
check my code snippet i edited from yours, may be this help you...
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
var myLatlng2 = new google.maps.LatLng(-22.363882, 125.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var contentString = "Pls help me to get the right position :)"
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker1 = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'First Marker'
});
var marker2 = new google.maps.Marker({
position: myLatlng2,
map: map,
title: 'Sec Marker'
});
google.maps.event.addListener(marker1, 'mouseover', function () {
map.setZoom(14);
infowindow.open(map, marker1);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
#map {
height: 400px;
width: 400px;
margin: auto;
padding: 0px;
top:100px;
}
.scale {
transition: all .2s ease-in-out;
}
#map.scale:hover {
transform: scale(1.9);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<body>
<div id="map" class="map scale"></div>
</body>
I have the same question as asked here but provided no accepted answer has been given and that my procedure is different, I'm opening a new one.
I have a map inside a Foundation tab that is hidden at the beginning and it only displays part of the map when opened. I've read the issues related to that and tried the attempts there but no luck. I know I have to re-initialize the map on tab change but I can't make it work.
I have a function that holds all the map info:
function startMap(obj){
var markers = new Array();
var glat_center = $(obj).attr('data-glat');
var glong_center = $(obj).attr('data-glong');
var Latlng_center = new google.maps.LatLng(glat_center, glong_center);
var mapOptions = {
zoom: zoom,
scrollwheel: false,
center: Latlng_center,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: mapStyles,
mapTypeControl: false,
streetViewControl: false,
minZoom: 4,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.TOP_RIGHT
}
};
var map = new google.maps.Map(obj, mapOptions);
if($(obj).attr('data-glat') && $(obj).attr('data-glong')){
var glat = $(obj).attr('data-glat');
var glong = $(obj).attr('data-glong');
var Latlng = new google.maps.LatLng(glat, glong);
var marker = new google.maps.Marker({
position: Latlng,
map: map
});
}
}
My html markup looks like this
<div class="tabs" data-section="auto">
<!--two more tabs here-->
<section class="property-location">
<a href="#" class="title" data-section-title>Title</a>
<div class="tab-content" data-slug="section3" data-section-content>
<div class="google-map" data-glat="123456" data-glong="123456" style="width: 100%; height: 440px;">
</div>
</div>
</section>
</div>
So then, what I'm trying to do is call this function when the tab is clicked, as I can't find any other tab events in Foundation docs. First I find the .title of the tab that contains the map, then look if a map exists (just in case) and then I call the function on the div holding the map.
$('.tabs .property-location').find('.title').click(function() {
if(($('.tab-content').find('.google-map')).length) {
//console.log('I found a map');
startMap($('.google-map'));
}
});
I know it's finding the map because I console.log it, but the console throws this error
NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMWindow.getComputedStyle]
which is on the following src http://maps.gstatic.com/intl/es_ALL/mapfiles/api-3/14/7/main.js
So it's the Google Maps JS that's throwing this error but I can't understand why.
I know it's difficult, but any ideas?
You pass a jQuery-element, but google maps needs a HTMLElement. Use
var map = document.querySelector('.google-map');
startMap(map);
instead of
startMap($('.google-map'));
Instead of querySelector you can use getElementsByClassName
var map = document.getElementsByClassName('google-map')[0];
But the always recommended approach is to refer to the map by an id :
<div id="the-google-map" class="google-map" data-glat="123456" data-glong="123456" style="width: 100%; height: 440px;"></div>
var map = document.getElementById('the-google-map');
I'm trying to create a View for Google Maps, and actually got it to work according to some examples I found.
the problem is that the map draws correctly only the first time the page is displayed,
if routes are changed and then a map is being drawn again it looks "distorted".
the examples I found are "one page" part of apps.
View:
App.LocationView = Ember.View.extend({
templateName: 'location',
MapView: Ember.View.extend({
map: null,
latitudeBinding: 'controller.content.geometry.lat',
longitudeBinding: 'controller.content.geometry.lng',
didInsertElement: function() {
var mapOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(this.$().get(0),mapOptions);
this.set('map',map); //save for future updations
this.$().css({ width: "550px", height: "400px" });
},
reRenderMap : function(){
var newLoc = new google.maps.LatLng(this.get('latitude'), this.get('longitude'));
this.get('map').setCenter(newLoc);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(this.get('latitude'), this.get('longitude')),
map: this.get('map')
});
}.observes('latitude','longitude')
})
});
I show the map with {{view view.MapView}} inside a div#map-holder, in my 'location' template.
I also apply this CSS to the div to "fix" Bootstrap messing with the map controls:
#map-holder img {
max-width: none;
}
how can I fix this ?
EDIT: jsfiddle - http://jsfiddle.net/bsphere/jYfg3/
go to 'settings' and then back to 'map' to see the distorted map
It seems like this is not exactly related to Ember, but to the map redrawing and resizing. With your fiddle, if you resize the browser window, you can see the map displays correctly.
When I saw it, I tried to put the this.$().css({ width: "550px", height: "400px" }); before the contrusction of the map, and it seems to work.
I would like to set the size of an infowindow to fit the content inside. The standard infowindow is too wide I tried to use maxWidth but it doesn't seem to work. What is the best way to resize an infowindow?
see code:
window.setContent( inspStates[i].name+ "<br/>"+"total: "+inspStates[i].totalInsp+ "<br/>"+ info);
the information that will be displayed in the bubble looks like this( \n means next line)
NY \ntotal 60 \n2009: 10 \n2010: 20 \n2011: 30
What you want to do is replace the "standard" Googlemaps infoWindow with your own, and put your content into it. Once you replace the standard GM infoWindow, you have a lot of latitude to work with. What I did is this:
Add a new style ID called #infoWindow, and set its width.
#infoWindow {
width: 150px;
}
Outside of any functions within my Javascript, I create a new infoWindow:
var infoWindow = new google.maps.InfoWindow();
Create a new var within the function that sets the information displayed by the marker(s), and set its value to the content:
var html = '<div id="infoWindow">';
html += 'NY<br />total 60<br />2009: 10<br />2010: 20<br />2011: 30';
html +='</div>';
Call the createMarker function using the location information you would have created elsewhere, and include the html var as one of the arguments:
var marker = createMarker(point,name,html);
The createMarker function you would declare elsewhere, which would bring all of the information together, display the marker on your map, and display the information above when it's clicked on:
function createMarker(latlng,name,html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: name
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(contentString);
infoWindow.open(map,marker);
});
}
Just so everyone is clear, if they stumble on this thread.
All you need to do is set the height and width of a container in the your info window content.
You don't need to override google classes and you don't need to get overly complicated about this.
var contentString = '<div class="map-info-window">'+
'<h1>My Info Window</h1>'+
'<p>Hello World</p>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString, });
In my css I have this:
.map-info-window {
width:200px;
height:200px;
}
That's it. That's all you need to do to set the width of a Google Maps InfoWindow.
For me this CSS works fine:
.gm-style-iw {
width: 324px !important;
height: 120px !important;
}
please take a look at following API references and examples:
Google Map V3 Examples:
https://developers.google.com/maps/documentation/javascript/examples/
Google Map V3 API Ref:
https://developers.google.com/maps/documentation/javascript/reference#MapOptions
To set the size of the bubble info-window inside a google map it's enough to add the following css in your CSS file:
.gmap-popup {
max-width:204px;
max-height:110px;
}
Adapted from this discussion.
JFrancis answers is the right one, just don't forget to add "!important" in your CSS when you set the width! This might look like a minor thing, but if you don't do it, your CSS will simply get overwritten!
#infoWindow {
width: 150px !important;
}