Google Map losing its long/lat in Bootstrap tabbed interface - javascript

I am using ACF's Google Map to load a map on my page. I pretty much copied everything exactly and slightly modifying the map js with more options on it for styling purposes. I had to change mainly this part in order for the map to load:
$('a[href="#directions"]').on('shown.bs.tab',function(){
$('.hotel-map').each(function(){
// create map
map = new_map( $(this) );
google.maps.event.trigger(map, 'resize');
});
});
Using their doc ready wasn't working, the map would appear as a grey box. The code change above produces a map, however, once I click onto another tab and then back onto the tab that holds the map, the longitude and latitude seems to disappear. It loads a map that is somewhere way off.
Here's the full js code.
EDIT
This is what I updated the code to:
$(document).ready(function(){
$('.hotel-map').each(function(){
// create map
map = new_map( $(this) );
});
});
$('a[href="#directions"]').on('shown.bs.tab',function(){
// popup is shown and map is not visible
google.maps.event.trigger(map, 'resize');
center_map( map );
});

After you have triggered the map resize call the center_map(map); function (which is in the code you linked) which will center the map to your markers.

Related

Map resize only works on events

I am using jquery latitude longitude plugin. My map loads partially in jquery tabs hide and show.So after R&D i found the map resize option.Map resize option only works on map events like "click","idle".. etc
google.maps.event.addListener(_self.vars.map, 'idle', function () {
google.maps.event.trigger(_self.vars.map, 'resize');
});
I want to run above js code (map resize) on tab click.
$("#tab").on("click" , function() ){
google.maps.event.trigger(_self.vars.map, 'resize');
});
but google.maps.event.trigger(map,resize); is not working on tab click.It takes map object but not resizing map on tab click.Please suggest me any solution.
Thanks,

Zooms events in Polymer Google Map

I am working on an app that will dynamically load in markers based on a users location. The map should add events to the map if a user zooms out. For the map we are using Polymer's Google Map. I am having a hard time finding out how to react to the zoom event. We added a map to the page with:
<google-map latitude="45" longitude="-73" zoom="15" mouseEvents="true" clickEvents="true"></google-map>
I have tried several different js eventhandlers such as:
<script>
var map = document.querySelector("google-map");
console.log(map);
map.addEventListener("bounds_changed", function() {
alert(map.zoom);
});
</script>
I can't even get events such as "google-map-click" to fire. The only one that seems to work is "google-map-ready".
Please help.
Try adding event listener to map property instead of google-map element.
Something like this gives you all zoom changes
<script type="text/javascript">
var mapElement = document.querySelector("google-map");
mapElement.addEventListener('api-load', function(e) {
google.maps.event.addListener(this.map, 'zoom_changed', function() {
// handle zoom event...
});
});
</script>

Create Google Map v3 After Clicking On An Element

What I would like to do is create a map after an element is clicked on. I'm using Google Maps v3.
I have a Realty listing page that shows 15 results/properties per page. Instead of generating 15 maps I would like 1 map to be created when I click on an element. Once clicked on, the map generation process takes place. The map canvas/div is initially hidden.
I was thinking that the click element and map element relationship would be something like this:
<span id="12-1234" lat="10.101010" lng="-25.252525" class="view-map">View Map</span>
... other markup ...
<div id="12-1234-map" class="google-map"></div>
Using HTML5 I add custom attributes to the element about the property like id, latitude and longitude so I can change the icon and center the map.
I've got a functioning map from which I load markers from a dynamically generated XML file based on the search parameters.
I've been looking at addListener and addDomListener but haven't had any luck. Most searches just pull up issues related to markers.
I had a wonky thing that sort of worked that used jQuery. Something like this:
$('.view-map').click(function(){
google.maps.event.addDomListener( this, 'click', initialize );
$("#" + this.id + "-map").toggle();
});
Obviously this wasn't perfect as you'd have to click the element a couple more times before seeing the map as you've bound another click event to it after having already clicking on it.
I feel like I'm missing something obvious.
function initialize(link) {
var mapDiv = $('#' + link.attr('id') + '-map');
mapDiv.toggle();
var options = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(link.attr('lat'), link.attr('lng'))
};
var map = new google.maps.Map(mapDiv[0], options);
}
$('.view-map').click(function(){
initialize(this);
});
In your view-map click function, just call a map initialize method, passing in the appropriate values. This initialize function can then show the map div, and then initialize the map appropriately.
Ugly and unchecked example:
var params = {
lat : 47.5,
lng : -122.5 }
$('.view-map').click(params, function(){
params.id = this.id //e.g. 1234
initialize(params);
});
function initialize(params){
// show the 1234-map div, initialize the map
}

How can I remove all instances/custom objects created of one class?

I need some help with JavaScript and Google Maps API.
I have a Google Maps map on my website which shows markers, which in turn show a custom InfoBox when clicked on.
When a marker is clicked, a new object is created for this InfoBox:
google.maps.event.addListener(marker, 'click', function() {
infoBox = new InfoBox({id: id, content: description, latlng: marker.getPosition(), map: map});
});
When a visitor clicks two markers consecutively, he is faced with two InfoBoxs. I run two lines of code that hide the InfoBoxs when a users clicks away in the map or when they click the cross in the upper right corner:
google.maps.event.addDomListener(closeImg, 'click', removeInfoBox(this));
google.maps.event.addDomListener(map, 'click', removeInfoBox(this));
What I would like to happen is that when a user clicks on a marker, all previous markers will get hidden (so after each click on a marker, there would only be one previous InfoBox to be hidden).
I'm struggling to get this done. If I create a DomListener on all markers with the 'click' event, I never get an InfoBox to pop up. If I put removeInfoBox(this); before creating a new object of InfoBox I also never get shown an InfoBox.
Where and how would be the proper way to prevent more than one InfoBox from showing up?
I found a post on how to remove markers and keep track of them which I could adept to my script.
First I declare the array for storing opened infoBox'es and the function to remove them (clearOverlays()):
// Declare global array for hiding infowindows
var infowindowsArray = [];
function clearOverlays(){
if(infowindowsArray){
for (i in infowindowsArray){
infowindowsArray[i].setMap(null);
}
}
}
Then when I create a listener for the marker's click event, it will add the new infoBox to that marker. First I use the clearOverlays() function to clear all other infoBox'es. Then I create the new infoBox and push it into the array:
google.maps.event.addListener(marker, 'click', function() {
clearOverlays();
infoBox = new InfoBox({id: id, content: description, latlng: marker.getPosition(), map: map});
infowindowsArray.push(infoBox);
});
This solved my problem with the custom created infoBox'es.

Google Maps API 3 loading icon

Is there a way to have a loading icon while the map is loading markers? I am using google maps API 3 with javascript and cant find much information on this.
This event is now called "status_changed" per the API docs: https://developers.google.com/maps/documentation/javascript/reference#KmlLayer
It can be used like this:
google.maps.event.addListener(kmlLayer, 'status_changed', function () {
if (kmlLayer.getStatus() == google.maps.KmlLayerStatus.OK) {
// Success
}
else {
// Failure
}
});
If you're loading markers using a KmlLayer object, then you can attach a listener to the event metadata_changed which gets fired after the KmlLayer has loaded all the information.
So you can have your custom loading icon display as soon as you initialize your map, then make the call for the markers using new google.maps.KmlLayer(...). In the listener for metadata_changed you can remove the custom loading icon, or hide it from displaying. So when the KmlLayer finishes loading, then it'll run the code to remove your loading icon.
You can attach listeners by going:
google.maps.event.addListener(kmlLayerObject, 'metadata_changed', function () {
...
}
You could also "hide" the map canvas with a loading div and show it after initialization.
Another thing to be aware of is when the map is hidden on init, it may behave strangely that can be fixed by "resizing" the map:
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/251f20b769d116ea/ba3ca54f5e1352a2

Categories

Resources