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>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #map { height: 90%; width: 90% }
</style>
​
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<!--script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script-->
    
<script type="text/javascript">
​
var map, infoWin;
​
function initialize() {
    
    var center = new google.maps.LatLng(-34.397, 150.644);
    
    var mapOptions = {
        center: center,
        zoom: 8
    };
    
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    
    var marker = new google.maps.Marker({
        map: map,
        position: center
    });
    
    infoWin = new google.maps.InfoWindow();
    
    geoCoding('Name to Display', 'Tracker Model', 'Setyp Type', marker, 1);
    
}
​
function setContent(marker, content) {
    infoWin.setContent(content);
    google.maps.event.addListener(marker, 'click', function() {
        infoWin.open(map, marker);
    });
}
​
function geoCoding(displayname, trackerModel, setupType, marker, index){
​
var setupMessageInfoWindow;
var geocoder = new google.maps.Geocoder();
​
    geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        console.log('status ok');
        console.log(results);
        
        if (results[1]) {
​
            var location = results[1].formatted_address;
            setupMessageInfoWindow = "<div height=\"300\" width=\"300\"><b>" + displayname + "</b>"
                                + " <br> Location : " + location
                                //+ " <br> Tracker id : " + userid
                                //+ " <br> imei : " + imei
                                + " <br> Tracker Type : " + trackerModel
                                //+ " <br> Mobile Number : " + 
                                //+ " <br> Location : " + location;
                                + " <br> " + setupType
                                + "</div>" ;
​
            setContent(marker, setupMessageInfoWindow);
​
        } else {
            console.log('No results found at marker ' + marker.position);
        }
    } else {
        console.log('Geocoder failed due to: ' + status);
    }
    });
​
}
​
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
​
<body>
    <div id='map'></div>
</body>
</html>
Output

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

Dismiss x
public
Bin info
antojurkovicpro
0viewers