Skip to content

Instantly share code, notes, and snippets.

@JacobHsu

JacobHsu/geolocation_google-place-api.php

Created September 10, 2013 03:58
Show Gist options
  • Save JacobHsu/6504798 to your computer and use it in GitHub Desktop.
Save JacobHsu/6504798 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
geolocation_google-place-api.php
<!doctype html>
<html lang="en">
<head>
<title>Example with Google maps and jQuery - Google maps jQuery plugin</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="keywords" content="Google maps, jQuery, plugin" />
<meta name="description" content="An example how to use jQuery and Google placee api with Google maps jQuery plugin" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="container_16">
<article class="grid_16">
<div class="item rounded dark">
<div id="map_canvas" class="map rounded"></div>
</div>
</article>
</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=places"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="ui/jquery.ui.map.overlays.js"></script>
<script type="text/javascript" src="ui/jquery.ui.map.js"></script>
<script type="text/javascript" src="ui/jquery.ui.map.extensions.js"></script> <!-- placesSearch-->
<script type="text/javascript">
$(function() {
$('#map_canvas').gmap('getCurrentPosition', function(position, status) {
if ( status === 'OK' ) {
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
$('#map_canvas').gmap('get', 'map').panTo(latlng);
var zoom = $('#map_canvas').gmap('option', 'zoom');
$('#map_canvas').gmap('option', 'zoom', 24); //改變檢視層級
$('#map_canvas').gmap('addMarker', { 'position': latlng, 'bounds': true }).click(function() {
$('#map_canvas').gmap('openInfoWindow', { 'content': '我在這!' }, this);
});
var request = {
location: latlng,
radius: '100', //搜索100m內
types: ['restaurant'] //餐廳
};
$('#map_canvas').gmap('placesSearch', request, function(results, status) {
if ( status === 'OK' ) {
$.each(results, function(i, item) {
$('#map_canvas').gmap('addMarker', { 'id': item.id, 'icon': item.icon, 'position': item.geometry.location, 'bounds':true }).click(function() {
$('#map_canvas').gmap('openInfoWindow', {'content': '<h4>'+item.name+'</h4>'}, this);
});
});
}
});
} else {
alert('Unable to get current position');
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment