JSON Google map Layer dropdown push data

JSON Google map Layer dropdown push data

by Alex Azuero

HTML

<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
  
  
    <div id="map">
      <div id="category_panel">
        category:<select id="category">
          <option value="one">one</option>
          <option value="two">two</option>
          <option value="three">three</option>
        </select>
      </div>
    </div>

CSS

html, body, #map {
        width: 100%;
        height: 100%;
        padding : 0;
        margin : 0;
      }
      #category_panel {
        background-color : white;
        padding : 1px;
        font-size : 13px;
        margin-top : 5px;
        border : 1px solid #aaa;
      }

JavaScript

(function() {

        var clusterer;

        window.onload = function() {

          // Creating a new map
          var map = new google.maps.Map(document.getElementById("map"), {
            center : new google.maps.LatLng(30.033591, -36.035156),
            zoom : 3,
            mapTypeId : google.maps.MapTypeId.TERRAIN,
            noClear : true
          });

          var selectDiv = $("#category_panel")[0];
          map.controls[google.maps.ControlPosition.TOP_LEFT].push(selectDiv);

          // Creating the JSON data
          var json = [{
            "title" : "USA",
            "lat" : 37.616552,
            "lng" : -92.988281,
            "description" : "<strong>USA</strong> ...",
            "category" : "one"
          }, {
            "title" : "France",
            "lat" : 48.372793,
            "lng" : 1.230469,
            "description" : "<strong>France</strong> ...",
            "category" : "two"
          }, {
            "title" : "UK",
            "lat" : 51.517403,
            "lng" : -0.098877,
            "description" : "<strong>UK</strong> ...",
            "category" : "three"
          }];


          /*******
           * for test (start)
           ********/

          var sw = new google.maps.LatLng(37.616552, -92.988281);
          var ne = new google.maps.LatLng(51.517403, -0.098877);
          var bounds = new google.maps.LatLngBounds(sw, ne);
          map.fitBounds(bounds);
          var lat,lng,category;
          var categories = ["one", "two", "three"];
          for(var i = 0; i < 300; i++) {
            lat = Math.random() * (ne.lat() - sw.lat()) + sw.lat();
            lng = Math.random() * (ne.lng() - sw.lng()) + sw.lng();
            category = categories[Math.floor(Math.random() * 3)];
            json.push({
              "title" : "random #" + i,
              "lat" : lat,
              "lng" : lng,
              "description" : "<strong>" + category + "</strong><br>random #" + i,
              "category" :...