This post similar my post GEOLOCATION for Google Maps JavaScript V3
But this map using j-query.
First, prepare.
You will download library.
And unzip and copy ui folder to you project.
Second, coding.
This is javascript for library.
- <!--jquery-ui-map-->
- <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
- <script type="text/javascript" src="ui/min/jquery.ui.map.full.min.js"></script>
- <script type="text/javascript" src="ui/jquery.ui.map.extensions.js"></script>
This is body
- <body>
- <div data-role="page" id="page" data-fullscreen="true" class="map_style">
- <div data-role="header" data-position="fixed">
- </div>
- <div data-role="content" class="map_style">
- <div id="map_canvas" class="map_style" >
- </div>
- </div>
- <div data-role="footer" data-position="fixed">
- <div data-role="navbar">
- <ul>
- </ul>
- </div>
- </div>
- </div>
- </body>
Add map_style class to page(line 2), content(line 6), map(line 7)
'Line 7' is map and 'line 13' is search button.
This is very important code.
This code Implement google map.
- <script type="text/javascript">
- $(document).ready(function(e) {
- var startpos=new google.maps.LatLng(37.309,126.875);
- $("#map_canvas").gmap({
- "center":startpos,
- "zoom":16
- });
- $("#currentpos").click(function() {
- $("#map_canvas").gmap("getCurrentPosition",function(position,status){
- if(status=="OK"){
- var latlng=new google.maps.LatLng(
- position.coords.latitude,position.coords.longitude);
- var marker="http://www.google.com/intl/en_us/mapfiles/ms/icons/blue-dot.png";
- $("#map_canvas").gmap("get","map").panTo(latlng);
- $("#map_canvas").gmap("addMarker",{
- "position":latlng,
- "icon":marker
- }).click(function(){
- $("#map_canvas").gmap("openInfoWindow",{
- "content":"<b>current location</b> <img src='http://images.forbes.com/media/lists/companies/google_200x200.jpg' alt=''/>"},this);
- });
- }else{
- alert("can't found location");
- }
- });
- });
- });//ready
- </script>
'Line 3' is init position for display map.
'Line 4~7' is display(position and zoom level)
'Line 8~26' is searching code.
'Line 8' is button click listener.
'Line 9' is check current position using sensor(gps or network)
I recommend using mobile.
'Line 10~21' is success searching your position and 'line 22~24' is can't searching.
'Line 11~12' is getting current position.
'Line 13' is marker option.
'Line 14~17' display current position and marker.
'Line 18' is click listener for marker.
'Line 19~21' is info window.
I ran my mobile device.
This is result.
This is init status.
I click to search button.
I click to marker.
No comments:
Post a Comment