Google-maps/map.html at master · kjbedi/Google-maps · GitHub

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
<script src = "jquery-3.2.1.min.js"></script>
<h3>My Google Maps Demo</h3>
<div id="map" style = "height:500px"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAPmFB_OWQ6OcNvGeYhD3yF9TdrniggrQ&callback=initMap">
</script>
<br>
<br>
<br>
LAT  <input id = "lat"  type ="text" />
Long <input id = "long" type ="text" />


<button id = "sub_long_lat">SHOW ON MAP</button><br>


<br>
<br>
<br>
<br>
<br>


<div style = "float:left" class = "go" id = "INDIA"><img class = "images" src = "images/taj.jpg"/></div>
<div style = "float:right" class = "go" id = "CANADA"><img class = "images"src = "images/canada.jpg"/></div>


<script>

var width = $(window).width();
var height = $(window).height();

$(".images").width(width*40/100);
$(".go").width(width*40/100);

$(".images").width(height*20/100);
$(".go").width(height*20/100);


$(".go").hover(function(){
		if($(this).attr('id')=="INDIA"){
			initMap(28.6139,77.2090,"images/india.png");
		}else{
			initMap(45.4215,-75.6972,"images/canada_flag.png");
		}

    }, function(){
    $(this).css("background-color", "pink");
});

$( "#sub_long_lat" ).click(function() {
	var latitude = $("#lat").val();
	var longitude= $("#long").val();
	initMap(latitude,longitude);
});

function initMap(latitude,longitude,iconpath) {
  var uluru = {lat: parseInt(latitude), lng: parseInt(longitude)};
  console.log(uluru);
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map		: map,
	icon	: iconpath
  });
}

</script>