JSFiddle

  • Google Maps With OMS

    A native Google Maps instance with Overlapping Marker Spiderfier.

    (function($) {
    
      /*
       *  new_map
       *
       *  This function will render a Google Map onto the selected jQuery element
       *
       *  @type    function
       *  @date    8/11/2013 ...
  • Marker Clusterer Plus, geoJson, Spiderfier #1 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    var geoJson = {
        "type": "FeatureCollection",
            "features": [{
            "type": "Feature",
                "properties": {
                "name": "Bielefeld"
            },
                "geometry": {
                "type": "Point",
                    "coordinates": [8.528849, 52.030656]
            }
        }, {
            "type": "Feature ...
  • Google Maps API Delete Marker

    Delete marker function.

    var map;
    var mark;
    $(document).ready(function() {
    
        var moptions = {
            center: new google.maps.LatLng(22.669, 77.709),
            zoom: 5 ...
  • Maps API v3 Add and remove markers

    http://stackoverflow.com/questions/28413791

    var map;
    var markers = [];
    
    function initialize() {
    
        var mapOptions = {
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: new google.maps.LatLng ...
  • Google Maps With OMS

    A native Google Maps instance with Overlapping Marker Spiderfier.

    (function($) {
    
      /*
       *  new_map
       *
       *  This function will render a Google Map onto the selected jQuery element
       *
       *  @type    function
       *  @date    8/11/2013 ...
  • Inline Block Example

    Floats, margins and inline-blocks.

    <h2>floats</h2>
    
    <div class="container">
        <div class="content">Content</div>
        <div class="sidebar">Sidebar</div>
    </div>
    
    <h2>magin and floats</h2>
    
    <div class="container2">
        <div class="content2">Content</div>
        <div class="sidebar2">Sidebar</div>
    </div>
    
    <h2>display:inline-block</h2>
    
    <div class="container3">
        <div class="content3">Content</div>
        <div class="sidebar3">Sidebar</div>
    </div>
  • Inline Block

    Image with text inline block

    <div id="column-content">
         
         <img src="http://i.imgur.com/WxW4B.png">
        <span><strong>1234</strong>
        yet another text content that should be centered vertically</span>
    </div>
    
    
    
  • Google Maps JavaScript v3 MarkerClusterer

    jQuery 1.8.3, HTML, CSS, JavaScript

    var marker;
    var gm_map;
    var markerArray = [];
    var address = 'Sweden';
    var geocoder = new google.maps.Geocoder();
    
    geocoder.geocode({ 'address': address }, function ...
  • Toggle MarkerClusterer 3

    jQuery 1.6.4, HTML, CSS, JavaScript

    var points = [{"name":"Sheff House","lat":"53.341265600000","lng":"-1.466105200000","tid":"1"},{"name":"Old house","lat":"53.361066200000","lng ...
  • Toggle MarkerClusterer 2

    jQuery 1.6.4, HTML, CSS, JavaScript

    var points = [{"name":"Sheff House","lat":"53.341265600000","lng":"-1.466105200000","tid":"1"},{"name":"Old house","lat":"53.361066200000","lng ...