Using the gomap plugin

by clayshannon

HTML

<h1>How to allow users to zoom in on  a specific part of a map</h1>

<h2>Intro</h2>
<p>Google maps are great. Making them easier to work with for developers is <a href="http://www.pittss.lv/jquery/gomap/download.php">the jQuery gomap plugin</a>.</p>

<p>Using this, and a nice list of the central latitudes / longitudes for each USA state from <a href="http://www.inkplant.com/code/state-latitudes-longitudes.php">here</a>, I was able to create an html page that allows the user to select any of the 50 U.S. States and have that state centered in the browser.</p>

<h2>The Setup</h2>
<p>After downloading the gomap file, and saving it to the same location as the .html file I was building, I added this code to the head section to access jQuery, Google Maps, and the gomap plugin:</p>

<pre>
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;&lt;/script&gt; 
&lt;script src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt; 
&lt;script src="gomap.js"&gt;&lt;/script&gt;
</pre>

<h2>The HTML</h2>
<p>I then added input selections like so (the "50+" refers to the fact that at that zoom level (4), other U.S. territories can be seen in addition to "just" the 50 States):</p>

<pre>
&lt;select id="stateSelector"&gt;
  &lt;option id="USA48"&gt;USA (48)&lt;/option&gt;
  &lt;option id="USA50"&gt;USA (50+)&lt;/option&gt;
  &lt;option id="Alabama"&gt;Alabama&lt;/option&gt;
  &lt;option id="Alaska"&gt;Alaska&lt;/option&gt;
  . . .
  &lt;option id="Wisconsin"&gt;Wisconsin&lt;/option&gt;
  &lt;option id="Wyoming"&gt;Wyoming&lt;/option&gt;
&lt;/select&gt;
</pre>

<p>...and the div for the map:</p>

<pre>
<div id="map"></div>
</pre>

<h2>The jQuery</h2>
<p>Then I added the gomap initialization inside the jQuery ready handler (which the user can revert back to by selecting "USA (48)"):</p>
<pre>
$("#map").goMap({ 
        latitude: 36.75,  
        longitude: -100, 
        maptype: 'ROADMAP',
        zoom: 5
    }); 
</pre>

<p>If you prefer...