Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

file 188 lines (158 sloc) 6.283 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Marky Mark Examples : Google Maps V3 API</title>
    <script src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" charset="utf-8">
      google.load("jquery","1.3.2");
    </script>
    
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="marky_mark.js"></script>
    <script type="text/javascript" charset="utf-8">
      function init () {
        
        // find more map options at : http://code.google.com/apis/maps/documentation/v3/reference.html#MapOptions
        var localMapOpts = {
          zoom: 14,
          center: set_latlng(coordinates.USA.MN),
          theme: themes.buildingOutlines
        };
        
        var remoteMapOpts = {
          zoom: 14,
          center: set_latlng(coordinates.USA.MN),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        
        map = create_map("map",localMapOpts);
        remote_map = create_map("remote_map",remoteMapOpts);
      
        set_markers([
          {
            address: 'Powderhorn Park, Minneapolis, MN',
            map: map
          },
          {
            address: 'Corcoran Park, Minneapolis, MN',
            map: map,
            center: true,
            icon: "images/aim_16.png",
            info: "#special-house"
          },
          {
            address: 'Sibley Park, Minneapolis, MN',
            map: map,
            info: "Sibley Park"
          }
         
        ]);
        
        set_remote_markers("addresses.json",remote_map);
      }
      
      window.onload = function(){ init(); }
    </script>
    
    <script type="text/javascript" charset="utf-8">
      // you can load init from here if you to
      $(document).ready(function() {
      });
    </script>
    
    <style type="text/css" media="screen">
      body{
        font: 12px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
        line-height:1.5em;
      }
      
      h1{
        font: 20px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
      }
      pre{
        border:1px solid #ccc;
        background:#000;
        color:#fff;
        padding:5px;
      }
      #map, #remote_map{
        margin:10px;
        width:95%;
        height:400px;
        border:3px solid #000;
      }
    </style>
  </head>
  <body>
    <h1>Marky Mark Demo</h1>
    <div id="special-house" style="display:none">
      <h1>
        Corcoran Park
      </h1>
      
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    
    <div id="map"></div>
    
    <p>Marky Mark is a quick and simple wrapper for <a href="http://code.google.com/apis/maps/documentation/v3/">Google maps V3</a>. I wrote this library for one reason and one reason only&#8230; to simplify the creation of map markers in google maps! It&#8217;s meant to be extremely simple and doesn&#8217;t do advanced things, but it does the following things well:</p>

    <ul>
    <li>Create single or multiple markers</li>
    <li>Integrated geocoding without an API key! Hooray!</li>
    <li>It can be an alternative to integrating maps without going to google maps and getting the iframe maps</li>
    <li>Dependency free! You can use this with your favorite JS library if you like</li>
    </ul>

    <p>Remember if you need more advanced features, just drop down into the actual API code, it&#8217;s really not that hard, just gets repetitive sometimes, this small library is meant to alleviate some of the more trivial things like setting <a href="http://code.google.com/apis/maps/documentation/v3/reference.html#Marker">Markers</a> and customizing <a href="http://code.google.com/apis/maps/documentation/v3/reference.html#InfoWindow">Info Windows</a></p>
    
    <h1>Code</h1>
    
    <pre>
      
   function init () {
    // find more map options at : http://code.google.com/apis/maps/documentation/v3/reference.html#MapOptions
    var map_opts = {
      zoom: 14,
      center: set_latlng(coordinates.USA.MN),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = create_map("map",map_opts);

    set_markers([
      {
        address: 'Powderhorn Park, Minneapolis, MN',
        map: map
      },
      {
        address: 'Corcoran Park, Minneapolis, MN',
        map: map,
        center: true,
        icon: "images/aim_16.png",
        info: "#special-house"
      },
      {
        address: 'Sibley Park, Minneapolis, MN',
        map: map,
        info: "Sibley Park"
      }

    ]);

  }

  window.onload = function(){ init(); }
      </pre>
      
      <h1>Retrieving from a remote json file</h1>
      
      <p>
        You can also use marky_mark to retrieve markers from a remote json file. NOTE: the following example
        requires JQuery.
      </p>
      
      <div id="remote_map"></div>
      
      <h1>Code for setting a remote request</h1>
      
      <pre>
    set_remote_markers("addresses.json",remote_map);
      </pre>
      
      <h1>JSON Format (look in <a href="addresses.json">addresses.json</a>)</h1>
      
      <pre>
    {
      "locations": [
       {
          "address": "Powderhorn Park, Minneapolis, MN",
          "info": "Remote Request to Powderhorn Park"
        },
        {
          "address": "Corcoran Park, Minneapolis, MN",
          "center": "true",
          "icon": "images/aim_16.png",
          "info": "Remote request for Corcoran"
        },
        {
          "address": "Sibley Park, Minneapolis, MN",
          "info": "Remote Request for Sibley Park"
        }
      ]
    }
      </pre>
  </body>
</html>
Something went wrong with that request. Please try again.