Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test google maps</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <div id="map-canvas"></div>
</body>
</html>
 
function initialize() {
​
    var mapOptions = {
        zoom: 15,
        center: new google.maps.LatLng(19.8580724890365, -101.269905144175),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    },
    poliMorelia,
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions),
    triangleCoords = [],
    urlMunmorelia = "https://jsonblob.com/api/jsonBlob/5514476fe4b05f8280fd42d8",
    coorMorelia = [];
​
    $.ajax({
        method : 'GET',
        dataType : 'json',
        url : urlMunmorelia,
        success : function(data)
        {
            for(var i = 0; i <= data.coord_x.length; i++)
            {   
                coorMorelia.push(new google.maps.LatLng(data.coord_x[i], data.coord_y[i]));
            }
            
            poliMorelia = new google.maps.Polygon({
                paths: coorMorelia,
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35
            });
​
            poliMorelia.setMap(map);
        }
    });
}
​
google.maps.event.addDomListener(window, 'load', initialize);
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers