D3 Examples - Google Map + D3 Example

Google Map + D3 Example

This is an example of using d3.js and Google Maps.

The data.json file is simply the output from the API Console page: https://www.yelp.com/developers/api_console, and was created using the conference hotel address in the "Near" field.

Here's the full query: http://api.yelp.com/v2/search/?term=Bars&location=Hyatt Regency Century Plaza, Los Angeles, CA&sort=2&limit=20&actionlinks=true Built with blockbuilder.org Built with blockbuilder.org

xxxxxxxxxx
 
<!doctype html>
​
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
​
    <title>Google Map + D3.js </title><?php /* EDIT ME */ ?>
​
​
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
​
    <!-- Latest compiled and minified Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
​
    <!--LEAFLET CSS -->
    <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" />
​
​
    <link rel="stylesheet" href="style.css"/>
​
</head>
​
<body class="">
​
    <div id="main-wrapper" class="">
        <div id="main-content" class="container">
            <header class="row">
                <div class="social-links col-md-12"></div>
                <div class="col-md-12">
​
                    <h1>Google Map + D3.js Example</h1>
                    <div class="byline">By <a href="#">Jeremy C.F. Lin</a></div>
​
                    <div class="meta">
                        Published September 23, 2015
                    </div>
                </div>
            </header>
​
            <section class="row">
​
            <div class="col-md-12" id="map"></div>
​
            </section>
​
            <footer>
                <div id="source-line">Source: Source goes here.</div>
            </footer>
​
        </div>
    </div>
​
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB-z__K2Tz1ZKAxvmiZ1mB7rxi9LY4_0JE">
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <!-- Latest compiled and minified Bootstrap JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <!-- <script src="js/map.js"></script> -->
    <script src="marker.js"></script>
​
</body>
</html>
    