-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
100 lines (84 loc) · 3.61 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html>
<head>
<title>Sample for jQuery.simpleMap Plugin</title>
<script src="http://www.google.com/jsapi?key=<my_apikey>"></script>
<script>
google.load("jquery", "1");
</script>
<script>
google.load("maps", "2");
</script>
<script src="js/jquery.simplemap.js"></script>
<script>
// usage: log('inside coolFunc',this,arguments);
// paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
window.log = function(){
log.history = log.history || []; // store logs to an array for reference
log.history.push(arguments);
if(this.console){
console.log( Array.prototype.slice.call(arguments) );
}
};
$(function () {
$('.map').css({ 'width': '590px',
'height': '400px',
'margin-bottom': '20px'});
$('#map1').createMap([ { 'type': 'auto' }, 'Prag', 'Paris', { 'lat': 48.2, 'lng': 36.3674 } ]);
$('#map2').createMap([ 'Berlin' ]);
$('#map2').addMarker(); // draw Marker in the center of current view
$('#map3').createMap();
// draw multiple markers
$('#map3').addMarker([ { address: 'Tulln', zoom: 10, info: 'Blumenstadt', draggable:false } ],
{ 'clear': false }); // global marker settings
// Sample custom marker code created with Google Map Custom Marker Maker
// http://www.powerhut.co.uk/googlemaps/custom_markers.php
var myIcon = new GIcon();
myIcon.image = 'img/image.png';
myIcon.shadow = 'img/shadow.png';
myIcon.iconSize = new GSize(16,16);
myIcon.shadowSize = new GSize(24,16);
myIcon.iconAnchor = new GPoint(8,16);
myIcon.infoWindowAnchor = new GPoint(8,0);
myIcon.printImage = 'img/printImage.gif';
myIcon.mozPrintImage = 'img/mozPrintImage.gif';
myIcon.printShadow = 'img/printShadow.gif';
myIcon.transparent = 'img/transparent.png';
myIcon.imageMap = [ 8,0, 9,1, 10,2, 11,3, 12,4, 12,5, 12,6,
12,7, 12,8, 11,9, 12,10, 13,11, 14,12,
15,13, 15,14, 14,15, 13,15, 12,14, 11,13,
4,12, 3,11, 2,10, 1,9, 0,8, 0,7, 0,6, 0,5,
0,4, 1,3, 2,2, 3,1, 4,0];
var options = { 'icon': myIcon };
$('#map3').addMarker('3442 Asparn',
{ 'clear': false,
'center': false,
'draggable': false,
'options': options });
$('#map4').createMap();
$('#map4').bind('markeradded markermoved',
function (event, map, marker, point) {
$('#lng').val(point.lng());
$('#lat').val(point.lat());
});
$('#where').keyup(function () {
var value = $(this).val();
$('#map4').addMarker(value);
});
});
</script>
</head>
<body>
<div id="map1" class="map"></div>
<br />
<div id="map2" class="map"></div>
<br />
<div id="map3" class="map"></div>
<br />
<input type="text" id="where" />
<div id="map4" class="map"></div>
<input type="text" id="lat" />
<input type="text" id="lng" />
<br />
</body>
</html>