D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
Reference : https://d3js.org/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh-TW"></script>
<script type="text/javascript">
function GoogleMap(){
this.getMap = function(id, title, longitude, latitude, str){
$(document).ready(function() {
var map;
var myLatlng = new google.maps.LatLng(longitude, latitude);
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true
}
map = new google.maps.Map(document.getElementById(id), myOptions);
var image = "sort_down.png";
var location = new google.maps.LatLng(longitude, latitude);
var marker1 = new google.maps.Marker({
position: location,
icon: image,
map: map
});
var infowindow1 = new google.maps.InfoWindow({
content: str
});
var marker1 = new google.maps.Marker({
position: location,
icon: image,
map: map,
title: title
});
google.maps.event.addListener(marker1, 'click', function() {
infowindow1.open(map,marker1);
});
});
}
}
var googleMap = new GoogleMap();
googleMap.getMap("id", "Title", 22.316374, 114.18040 , "Hello World");
</script>
<div id="id" style="width: 500px; height: 300px;"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh-TW"></script>
<script type="text/javascript">
function GoogleMap(){
this.getMap = function(id1, id2, longitude, latitude){
$(document).ready(function() {
var fenway = new google.maps.LatLng(longitude, latitude);
var mapOptions = {center: fenway, zoom: 16, mapTypeId: google.maps.MapTypeId.ROADMAP, streetViewControl: true};
var map = new google.maps.Map(document.getElementById(id1), mapOptions);
var image = "sort_down.png";
var myLatLng = new google.maps.LatLng(longitude, latitude);
var beachMarker = new google.maps.Marker({position: myLatLng, map: map, icon: image});
var panoramaOptions = {position: fenway, pov: {heading: 34, pitch: 10, zoom: 1}};
var panorama = new google.maps.StreetViewPanorama(document.getElementById(id2),panoramaOptions);
map.setStreetView(panorama);
});
}
}
var googleMap = new GoogleMap();
</script>
<script type="text/javascript">googleMap.getMap("map_canvas", "pano", 22.316374, 114.18040)</script>
<div id="map_canvas" style="width: 500px; height: 250px;"></div>
<div id="pano" style="width: 500px; height: 250px;"></div>
</script>
<script type="text/javascript">
googleMap.getMap("map_canvas", "pano", 22.316374, 114.18040)
</script>
<div id="map_canvas" style="width: 500px; height: 250px;"></div>
<div id="pano" style="width: 500px; height: 250px;"></div>
