    var pinIcon = new google.maps.MarkerImage(
        &quot;http://chart.apis.google.com/chart?chst=d_map_pin_letter&amp;chld=%E2%80%A2|00D900&quot;,
        null, /* size is determined at runtime */
        null, /* origin is 0,0 */
        null, /* anchor is bottom center of the scaled image */
        new google.maps.Size(12, 18)
    );

I am developing a web page that needs to display, in an iframe, a report served by another company&#39;s SharePoint server. They are fine with this. 

The page we&#39;re trying to render in the iframe is giving us X-Frame-Options: SAMEORIGIN which causes the browser (at least IE8) to refuse to render the content in a frame. 

First, is this something they can control or is it something SharePoint just does by default? If I ask them to turn this off, could they even do it? 

Second, can I do something to tell the browser to ignore this http header and just render the frame?

How Can I Bypass the X-Frame-Options: SAMEORIGIN HTTP Header?

So, I have a page that loads and through jquery.get makes several requests to populate drop downs with their values.


    $(function() {
        LoadCategories($(&#39;#Category&#39;));
        LoadPositions($(&#39;#Position&#39;));
        LoadDepartments($(&#39;#Department&#39;));
	
        LoadContact();
    };

It then calls LoadContact(); Which does another call, and when it returns it populates all the fields on the form.  The problem is that often, the dropdowns aren&#39;t all populated, and thus, it can&#39;t set them to the correct value.

What I need to be able to do, is somehow have LoadContact only execute once the other methods are complete and callbacks done executing.

But, I don&#39;t want to have to put a bunch of flags in the end of the drop down population callbacks, that I then check, and have to have a recursive setTimeout call checking, prior to calling LoadContact();

Is there something in jQuery that allows me to say, &quot;Execute this, when all of these are done.&quot;?

**More Info**
I am thinking something along these lines

    $().executeAfter(
    	function () {	// When these are done
    	    LoadCategories($(&#39;#Category&#39;));
    	    LoadPositions($(&#39;#Position&#39;));
    	    LoadDepartments($(&#39;#Department&#39;));
    	},
    	LoadContact	// Do this
    );

...it would need to keep track of the ajax calls that happen during the execution of the methods, and when they are all complete, call LoadContact;

If I knew how to intercept ajax that are being made in that function, I could probably write a jQuery extension to do this. 

**My Solution**

    ;(function($) {
    	$.fn.executeAfter = function(methods, callback) {
    
    		var stack = [];
    
    		var trackAjaxSend = function(event, XMLHttpRequest, ajaxOptions) {
    			var url = ajaxOptions.url;
    
    			stack.push(url);
    		}
    
    		var trackAjaxComplete = function(event, XMLHttpRequest, ajaxOptions) {
    			var url = ajaxOptions.url;
    
    			var index = jQuery.inArray(url, stack);
    
    			if (index &gt;= 0) {
    				stack.splice(index, 1);
    			}
    
    			if (stack.length == 0) {
    				callback();
    				$this.unbind(&quot;ajaxComplete&quot;);
    			}
    		}
    
    		var $this = $(this);
    
    		$this.ajaxSend(trackAjaxSend)
    		$this.ajaxComplete(trackAjaxComplete)
    
    		methods();
    		$this.unbind(&quot;ajaxSend&quot;);
    	};
    })(jQuery);

This binds to the ajaxSend event while the methods are being called and keeps a list of urls (**need a better unique id though**) that are called.  It then unbinds from ajaxSend so only the requests we care about are tracked.  It also binds to ajaxComplete and removes items from the stack as they return.  When the stack reaches zero, it executes our callback, and unbinds the ajaxComplete event.

Waiting on multiple asynchronous calls to complete before continuing

Do you often use image marker from google or copy it to your server?
Where I can get all images list of available markers from google?
The list of images such as :

 
![dd-end](https://maps.gstatic.com/intl/en_ALL/mapfiles/dd-end.png)

![dd-start](https://maps.gstatic.com/intl/en_ALL/mapfiles/dd-start.png)

List All Google Map Marker Images

Do you often use image marker from google or copy it to your server?
Where I can get all images list of available markers from google?
The list of images such as :
<img src="https://maps.gstatic.com/intl/en_ALL/mapfiles/dd-end.png" alt="dd-end">
<img src="https://maps.gstatic.com/intl/en_ALL/mapfiles/dd-start.png" alt="dd-start">

The code below displays a Google map and search results when you enter an address and hit the submit button.  I&#39;ve been playing with it to try
and force the page to completely refresh or reload once you hit the submit button.  But I can&#39;t get it to work right.  It loads the results &quot;in page,&quot; but I&#39;d like the page to completely refresh when the results load, like when you hit the back button on your browser.  Hope that makes sense.

I think the answer lies in this line of code but I don&#39;t know jquery very well.  It&#39;s near the bottom of the full code below.

    &lt;script type=&quot;text/javascript&quot;&gt;
    (function($) { 
    	$(document).ready(function() {
    		load();&#39;;
		

Here&#39;s the full code below.  Any help would be greatly appreciated! 

    &lt;?php
    /*
    SimpleMap Plugin
    display-map.php: Displays the Google Map and search results
    */
    $to_display = &#39;&#39;;
    
    if ($options[&#39;display_search&#39;] == &#39;show&#39;) {
    $to_display .= &#39;
    &lt;div id=&quot;map_search&quot; style=&quot;width: &#39;.$options[&#39;map_width&#39;].&#39;;&quot;&gt;
    	&lt;a name=&quot;map_top&quot;&gt;&lt;/a&gt;
    	&lt;form onsubmit=&quot;searchLocations(\&#39;&#39;.$categories.&#39;\&#39;); return false;&quot;         name=&quot;searchForm&quot; id=&quot;searchForm&quot;     action=&quot;http://&#39;.$_SERVER[&#39;SERVER_NAME&#39;].$_SERVER[&#39;REQUEST_URI&#39;].&#39;&quot;&gt;
    		&lt;input type=&quot;text&quot; id=&quot;addressInput&quot; name=&quot;addressInput&quot; class=&quot;address&quot;     /&gt;&amp;nbsp;
    		&lt;select name=&quot;radiusSelect&quot; id=&quot;radiusSelect&quot;&gt;&#39;;
    			
    			$default_radius = $options[&#39;default_radius&#39;];
    			unset($selected_radius);
    			$selected_radius[$default_radius] = &#39; selected=&quot;selected&quot;&#39;;
    
    			foreach ($search_radii as $value) {
        				$r = (int)$value;
        				$to_display .= &#39;&lt;option valu         e=&quot;&#39;.$value.&#39;&quot;&#39;.$selected_radius[$r].&#39;&gt;&#39;.$value.&#39; &#39;.$options[&#39;units&#39;].&quot;&lt;/option&gt;\n&quot;;
    			}
    			
    $to_display .= &#39;	
    		&lt;/select&gt;&amp;nbsp;
    		&lt;input type=&quot;submit&quot; value=&quot;&#39;.__(&#39;Search&#39;, &#39;SimpleMap&#39;).&#39;&quot;     id=&quot;addressSubmit&quot; class=&quot;submit&quot; /&gt;
    		&lt;p&gt;&#39;.__(&#39;Please enter an address or search term in the box above.&#39;,     &#39;SimpleMap&#39;).&#39;&lt;/p&gt;
    	&lt;/form&gt;
    &lt;/div&gt;&#39;;
    }
    if ($options[&#39;powered_by&#39;] == &#39;show&#39;) {
    	$to_display .= &#39;&lt;div id=&quot;powered_by_simplemap&quot;&gt;&#39;.sprintf(__(&#39;Powered by %s     SimpleMap&#39;, &#39;SimpleMap&#39;),&#39;&lt;a href=&quot;http://simplemap-plugin.com/&quot;     target=&quot;_blank&quot;&gt;&#39;).&#39;&lt;/a&gt;&lt;/div&gt;&#39;;
    }
    
    $to_display .= &#39;
    &lt;div id=&quot;map&quot; style=&quot;width: &#39;.$options[&#39;map_width&#39;].&#39;; height:     &#39;.$options[&#39;map_height&#39;].&#39;;&quot;&gt;&lt;/div&gt;
    
    &lt;div id=&quot;results&quot; style=&quot;width: &#39;.$options[&#39;map_width&#39;].&#39;;&quot;&gt;&lt;/div&gt;
    
    &lt;script type=&quot;text/javascript&quot;&gt;
    (function($) { 
    	$(document).ready(function() {
    		load();&#39;;    
    		 
    		if ($options[&#39;autoload&#39;] == &#39;some&#39;) {
    			$to_display .= &#39;var autoLatLng = new GLatLng(default_lat,     default_lng);
    			searchLocationsNear(autoLatLng, autoLatLng.lat() + &quot;, &quot; +     autoLatLng.lng(), &quot;auto&quot;, &quot;&#39;.$options[&#39;lock_default_location&#39;].&#39;&quot;, &quot;&#39;.$categories.&#39;&quot;);&#39;;
    		}
    		
    		else if ($options[&#39;autoload&#39;] == &#39;all&#39;) {
    			$to_display .= &#39;var autoLatLng = new GLatLng(default_lat,     default_lng);
    			searchLocationsNear(autoLatLng, autoLatLng.lat() + &quot;, &quot; +     autoLatLng.lng(), &quot;auto_all&quot;, &quot;&#39;.$options[&#39;lock_default_location&#39;].&#39;&quot;,     &quot;&#39;.$categories.&#39;&quot;);&#39;;
    		}
    		
    $to_display .= &#39;
    	});
    })(jQuery);
    &lt;/script&gt;&#39;;
    
    ?&gt;

How to force page refreshes or reloads in jQuery?

I&#39;m switching from v2 to v3 google maps api and got a problem with `gMap.getBounds()` function.

I need to get the bounds of my map after its initialization.

Here is my javascript code:
&lt;pre&gt;&lt;code&gt;
var gMap;
$(document).ready(

    function() {

        var latlng = new google.maps.LatLng(55.755327, 37.622166);
        var myOptions = {
            zoom: 12,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        gMap = new google.maps.Map(document.getElementById(&quot;GoogleMapControl&quot;), myOptions);

        alert(gMap.getBounds());
    }
);
&lt;/code&gt;&lt;/pre&gt;

So now it alerts me that `gMap.getBounds()` is undefined. 

I&#39;ve tried to get getBounds values in click event and it works fine for me, but I cannot get the same results in load map event.

Also getBounds works fine while document is loading in Google Maps API v2, but it fails in V3.

Could you please help me to solve this problem?

Google Maps Api v3 - getBounds is undefined

Trying to simply close an infowindow?

I already have an array of markers, so something like this would be good. Thanks

    MyMarkers[i].infowindow.close();



Google Map API v3 ~ Simply Close an infowindow?

I&#39;m drawing a series of markers on a map (using v3 of the maps api).

In v2, I had the following code:


      bounds = new GLatLngBounds();

      ... loop thru and put markers on map ...
      bounds.extend(point);
      ... end looping

      map.setCenter(bounds.getCenter());
      var level = map.getBoundsZoomLevel(bounds);
      if ( level == 1 ) 
        level = 5;
      map.setZoom(level &gt; 6 ? 6 : level);

And that work fine to ensure that there was always an appropriate level of detail displayed on the map.

I&#39;m trying to duplicate this functionality in v3, but the setZoom and fitBounds don&#39;t seem to be cooperating:


    ... loop thru and put markers on the map
      var ll = new google.maps.LatLng(p.lat,p.lng);
      bounds.extend(ll);
    ... end loop

    var zoom = map.getZoom();
    map.setZoom(zoom &gt; 6 ? 6 : zoom);
    map.fitBounds(bounds);

I&#39;ve tried different permutation (moving the fitBounds before the setZoom, for example) but nothing I do with setZoom seems to affect the map.  Am I missing something?  Is there a way to do this?



Google Maps v3: Enforcing min. zoom level when using fitBounds

I know the browser shares my IP address and details of nearby wireless networks to determine my location, but what sort of info does it know about nearby wifi networks?

For example, where I live are no public wireless networks, and from my home I can see about 5 private networks, yet my location is determined within 20 meters. With there being no open networks nearby, how does Google determine my location? The only way I can think of is that Google mapped the locations of all wireless networks when they mapped streets for Street View.

I&#39;ve searched about online, but all I can&#39;t find any specific details.

How, exactly does HTML5&#39;s GeoLocation work?

I&#39;m using fitBounds() to set the zoom level on my map too include all the markers currently displayed. However, when I have only one marker visible, the zoom level is 100% (... which zoom level 20 I think...). However, I don&#39;t want it to be that far zoomed in so the user can adjust the position of the marker without having to zoom out. 

I have the following code:

    var marker = this.map.createMarker(view.latlng, this.markerNumber);
    this.map.bounds.extend(view.latlng);
    this.map.map.setCenter(this.map.bounds.getCenter());
    this.map.map.fitBounds(this.map.bounds);
    if (this.markerNumber === 1) {
      this.map.map.setZoom(16);
    }
    this.markerNumber++;

where this.map.bounds was previously defined as:

    this.map.bounds = new google.maps.LatLngBounds();


However, the problem I am having is that the line `this.map.map.setZoom(16);` doesn&#39;t work if I use `this.map.map.fitBounds(this.map.bounds);`, however, I know that line of code is correct because when I comment out the fitBound() line, the setZoom() magically starts functioning.

Any ideas how I resolve this? I&#39;m thinking of setting a maxZoom level as an alternative if I can&#39;t get this working.
    

Using setZoom() after using fitBounds() with Google Maps API V3

I made a Google Maps map with a draggable marker. When the user drags the marker, I need to know the new latitude and longitude, but I don&#39;t understand what is the best approach to doing that.

How can I retrieve the new coordinates?

Getting Lat/Lng from Google marker

I&#39;m new in google maps, and I&#39;m trying to learn it. 

&lt;!-- language: lang-js --&gt;

    marker = new google.maps.Marker(
    {
         map:map,
         draggable:true,
         animation: google.maps.Animation.DROP,
         position: results[0].geometry.location
    });

This is my marker position, when I&#39;m initialising the marker position than I know the place name (for example: XY street, New York,), but because of the draggable option it is changing, and my question is how can I get the new place name, what event handler do I need. 

Google maps v3 draggable marker

I want to link to google maps at a particular location with a marker on a particular point.

It&#39;s easy to link to a location:

    http://maps.google.com/?ll=XX.XXXX,XX.XXXX

But how do I drop a marker at that point too? preferably with a bit of my own text but that&#39;s just a bonus.

**2017 - Google has released documentation on this see new accepted answer: https://stackoverflow.com/a/44477650/359135**


Use a URL to link to a Google map with a marker on it

I&#39;m using Google Map API V3 and I noticed there are a lot of markers which are here even though I don&#39;t need them. For examples, some schools or other places with InfoWindows appearing when clicking on them.

Is there any way I can remove them or is it just not possible?


Content Type	Original Author	Original Content on Stackoverflow
Question	Dau Thanh Hai	View Question on Stackoverflow
Solution 1 - Google Maps	user2369884	View Answer on Stackoverflow

List All Google Map Marker Images

Google Maps Problem Overview

Google Maps Solutions

Solution 1 - Google Maps

Waiting on multiple asynchronous calls to complete before continuing

How Can I Bypass the X-Frame-Options: SAMEORIGIN HTTP Header?

Attributions