When you enter some websites, you will see locations like the followings :
Since Google offers Google maps, we can put the map on a browser of our websites. It used to be easier than now to use without any keys, but currently, to use it, you need to have the API Keys. Here is the link for the API Keys: https://developers.google.com/maps/documentation/embed/get-api-key
Use API Keys | Maps Embed API | Google Developers
Send feedback Use API Keys Google Maps Platform products are secured from unauthorized use by restricting API calls to those that provide proper authentication credentials. These credentials are in the form of an API key - a unique alphanumeric string that
developers.google.com
Since I already have the key, I will jump to the below codes to access Google maps on a browser.
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="googleMap" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var mapProp= {
center:new google.maps.LatLng(-33.8567844, 151.2152967),
zoom:18,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDEM3FEmY5ecJzAkXH9TDRAs1MaXpSWtME&callback=myMap"></script>
</body>
</html>
You can also make a button to load the center that you set. So, once users want to see your location, they can simply click the button.
Map with a button
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDEM3FEmY5ecJzAkXH9TDRAs1MaXpSWtME"
type="text/javascript"></script> -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDEM3FEmY5ecJzAkXH9TDRAs1MaXpSWtME"
type="text/javascript"></script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(37.497975, 127.027506),
zoom:18,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
//google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
// reload();
initialize();
});
});
</script>
</head>
<body>
<button>Click to see map</button>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
To set the center, you need to know the longitude and the latitude. By copying and pasting them to the code, it can easily be set.
load event with DOM Level 2 method
Here, we used the addDomListener() and added a marker on the map.
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js">
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDEM3FEmY5ecJzAkXH9TDRAs1MaXpSWtME"
type="text/javascript"></script>
<script>
var myCenter=new google.maps.LatLng(62.4539464, -114.3704224);
function initialize(){
var mapProp = {
center:myCenter,
zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
To make a bouncy marker, edit the code as the following:
var marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
A marker with a title
You can see the title once you hover the mouse, and when you click the pin, it will zoom.
var marker = new google.maps.Marker({
position: myCenter,
title:'Click to zoom'
});
marker.setMap(map);
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(20);
map.setCenter(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
'Javascript > jQuery' 카테고리의 다른 글
| jQuery UI (0) | 2022.08.25 |
|---|