Hi guys I have the following problem. The google map is not dimensioned against that point. Here is the code I've written so far. I do not know why but this function google.maps.event.trigger(map, "resize");does not work if you put it in click event
$(function() {
var map;
$('.check-in').click(function(e) {
var coordX = $(this).data('x'),
coordY = $(this).data('y');
initialize(coordX, coordY);
});
function initialize(x, y) {
var map_canvas = document.getElementById('map_canvas');
var myLatlng = new google.maps.LatLng(x, y);
var map_options = {
center: myLatlng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(map_canvas, map_options);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
google.maps.event.trigger(map, "resize");
}
});
If I understand your issue correctly, the map is contained within a bootstrap modal and is not resizing once the modal is shown/displayed.
To do this, you need to trigger the google maps resize event on the modal's 'shown' event. For Bootsrap v3, the following should work. For v2, use 'shown' instead of 'shown.bs.modal'
$('#modal').on('shown.bs.modal', function () {
google.maps.event.trigger(map, "resize");
});
I had such a problem.
I solve it whit show the map in
I think there problem whit js files conflict
Related
I recently started exploring google maps api. I stumbled upon panby function of google maps api. What I am trying to do is, when my map is loaded initially, the marker should be on the right as shown in the attached image.
Attached screenshot of initial load
However, I want to add a listener for the marker to stay on the right on window resize but do not know what to write in the listener function .Please help me this. Thanks in advance. Here is my code so far.
onAfterRendering: function() {
var myLatlng = new google.maps.LatLng(12.979172,77.715402);
var mapOptions = {
center: myLatlng ,
zoom: 12,
disableDefaultUI: true,
zoomControl: true
};
var x = this.byId("mapCanvas").getDomRef();
map = new google.maps.Map(x, mapOptions);
map.panBy(-300,0);
google.maps.event.addDomListener(window, "resize", function() {
var location= marker.getPosition();
google.maps.event.trigger(map, "resize");
});}
You can recenter the map to the known marker position and then pan left. Something like (untested):
...
map.panBy(-300,0);
var markerLocation= marker.getPosition(); //if you don't have it elsewhere
google.maps.event.addDomListener(window, "resize", function() {
map.setCenter(markerLocation)
map.panBy(-300,0);
google.maps.event.trigger(map, "resize");
});}
I'm trying to change GoogleMap marker icon by clicking div and using jquery. But it doesn't seem to be working, marker icon doesn't change. I assigned a variable that contains image path, but the thing is that if jquery changes it, it stays inside jquery function and is not passed back to global value.
Here is my code:
JS part
$(document).ready(function() {
$('#hurricanes').click(function (e){
iconic=jQuery(this).attr('hurr.png');
initMap();
});
$('#earthquakes').click(function (e){
iconic=jQuery(this).attr('durr.png');
initMap();
});
});
var iconBase = 'img/';
var iconic;
function createMarker(latlng, name, address1, address2, postalCode) {
var marker = new google.maps.Marker({
map: map,
position: latlng,
title: name,
icon: iconBase + iconic
});
}
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -0.397,
lng: 10.644
},
zoom: 2,
mapTypeId: google.maps.MapTypeId.TERRAIN,
disableDefaultUI: true
});
displayMarkers();
}
And HTML buttons:
<div id="hurricanes" class="choices">HURRICANES</div>
<div id="earthquakes" class="choices">EARTHQUAKES</div>
you should reinitialize the map using JavaScript after you changed the marker. Have a look in the API Reference for all the options: https://developers.google.com/maps/documentation/javascript/3.exp/reference
Although I am not quite sure what you are exactly going to do, you can also remove the markers in specific coordinates and then add the new ones with new marker icons.
I found the solution by reinitializing both functions:
$(document).ready(function() {
$('#hurricanes').click(function (e){
iconic='hurr.png';
createMarker();
initMap();
console.log(iconic);
});
$('#earthquakes').click(function (e){
iconic='durr.png';
createMarker();
initMap();
console.log(iconic);
});
});
I have initialized the Google Maps load function, and it works fine. There are also multiple markers with clusters. I haven't put markers and cluster codes here. Those are standard code. My code:
jQuery(document).ready(function(){
initialize();
});
function initialize() {
var center = new google.maps.LatLng(59.875405, 10.842099);
var zoom = 10;
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: zoom,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
function mapAnimate(){
var map = google.maps.Map(document.getElementById("map-canvas"));
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
window.setTimeout(function() {
map.panTo(new google.maps.LatLng(58.9633, 5.7189));
}, 500);
});
}
Then I want to move the map to another center position without re-generating the map. There is a link which calls the function mapAnimate().
HTML:
test
But it does not work. I get an error like this:
TypeError: c[Eb] is not a function......
Actually I don't get the map instance.
Declare your map variable outside the functions. That should do the trick.
jQuery(document).ready(function(){
initialize();
});
var map;
function initialize() {
var center = new google.maps.LatLng(59.875405, 10.842099);
var zoom = 10;
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: zoom,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
function mapAnimate(){
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
window.setTimeout(function() {
map.panTo(new google.maps.LatLng(58.9633, 5.7189));
}, 500);
});
}
But if you call the mapAnimate() function from a click event, I don't see why you would need that listener on the map object.
Im having problems working out how to get this toggle working, by default it hides the map and when you click show map i want the map to slide down and change the link test to hide map which then of course will slide back up but does not seem to be working..... anyone got any ideas?
Also if anyone knows of a solution for the google maps issue im also having please let me know, because the made is hidden when you show / slides down it does not show most of the map (something about resizing i think i remember reading up on)
i have made a jsfiddle here: http://jsfiddle.net/DfVBb/ although does not work there at all for some reason. thanks in advance!
HTML
<div class="slideToggleBox">
<div id="map_div"> </div>
</div>
show map
JS
<script type="text/javascript">
$('#map_div').hide();
$('#slideToggle').click(function() {
$('#map_div').slideToggle('slow', function() {
$('#slideToggle').text('hide map');
}, function(){
$('#slideToggle').text('show map');
});
return false
});
</script>
Maps JS
$(document).ready(function() {
var latlng = new google.maps.LatLng(53.334583, -0.961674);
var options = {
zoom: 15, // This number can be set to define the initial zoom level of the map
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_div'), options);
var image = new google.maps.MarkerImage('/images/map-icon.png',
new google.maps.Size(680, 178),
new google.maps.Point(0,0),
new google.maps.Point(18, 50)
);
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(53.334583,-0.961674),
map: map,
icon: image
});
});
</script>
I managed to work out a solution for this and also fixing the resize issue
$(function () {
// create a center
var c = new google.maps.LatLng(53.334583, -0.961674);
//create map options object
var mapOptions = {
zoom: 14,
center: c,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
$("#slideToggle").click(function () {
$('#map_canvas').slideToggle(300, function(){
if ($('#slideToggle').text() !== "hide map") $('#slideToggle').text('hide map');
else $('#slideToggle').text('show map');
google.maps.event.trigger(map, "resize"); // resize map
map.setCenter(c); // set the center
}); // slide it down
});
});
I looked at your fiddle, it has to be cleaned. Based on my understanding, you're trying to toggle Google maps on button click.
Mistakes in your Fiddle:
(1) The Google maps is not initialized. The below is used to initialize Google maps.
google.maps.event.addDomListener(window, 'load', initialize);
(2) Your .slideToggle() has to be cleaned up. It has be somehow like
$('#slideToggle').on('click', function () {
$('#map_canvas').slideToggle('slow', function () {
if ($('#slideToggle').text() !== "hide map")
$('#slideToggle').text('hide map');
else
$('#slideToggle').text('show map');
});
return false;
});
I've created a JSFiddle, please go through it and share your thoughts.
I have a problem with Google maps API. I'm using V3 API and fancybox for show up map in lightbox-like div. When I click on the link for the first time, fancybox opens and map loads as well. Everything seems to be OK, but when I close the fancybox and try to reopen, the map is loaded wrong..It loads only at about half area than it has to. Something may be wrong with the map object which is created at second time opening. When I am reloading the page each time I want to get correct map, it's ok..Problems coming out when I try to open-close-open-close and so on..Does anybody know what I should to do? I like fancybox, but now I am totaly screwed:)bottom are some pieces of my code..Thanks
$(document).ready(function () {
$("a.maps").fancybox({
'overlayOpacity ': 0.5,
'transitionIn': 'fade',
'transitionOut': 'fade',
'type': 'ajax'
});
});
THIS CONTENT OF THE FANCYBOX. THE LINK IS CALLED FROM SIMPLE a href=""...
function initialize() {
var myLatlng = new google.maps.LatLng(49.095354, 17.749553);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "DAMN"
});
}
function detectBrowser() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map_canvas");
if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1) {
mapdiv.style.width = '100%';
mapdiv.style.height = '100%';
} else {
mapdiv.style.width = '400px';
mapdiv.style.height = '400px';
}
}
initialize();
detectBrowser();
</script>
<div id="mapaOkolo">
<div id="map_canvas"></div>
</div>
Had this problem myself and came up with this workaround:
google.maps.event.addListener(<map object>, 'tilesloaded', function() {
google.maps.event.trigger(<map object>, 'resize');
<map object>.setCenter(<LatLng>);
});
The map is off center so it needs to be centered as well.
This is a very common problem Please take a look here.
Try to use google.maps.event.trigger(map, "resize");
Hope this helps