All geek questions in one place

JQuery Mobile: unable to update google map

We have a location-based application in (Phone gap using jQuery Mobile) which should load a google map with a marker showing the location of the place. After the first download, the map is not updated. I want to show different locations based on the address.

Live does not seem to work without binding, even if I use die.

Here is the code.

function loadMap(indexClicked){ var offerPosition = getLatAndLong(indexClicked); var centerSettings = { 'center': offerPosition, 'zoom': 10 }; initMap(centerSettings,indexClicked); refreshMap(); } function initMap(centerSettings,indexClicked){ $('#load-map').live('pageshow', function() { $('#map-canvas').gmap({'center': centerSettings.center, 'zoom': centerSettings.zoom, 'disableDefaultUI':true, 'callback': function() { var self = this; self.addMarker({'position': this.get('map').getCenter() }).click(function() { self.openInfoWindow({ 'content': showAdrressInMap(indexClicked) }, this); }); }}); }); } function refreshMap(){ $('#load-map').live('pageshow', function() { $('#map-canvas').gmap('refresh'); }); }

The loadMap function is called on every button pressed.

PS . After the first boot, the map seems to be cached and returns the same address each time. When you click on a marker, it updates the address in a tooltip, but the position seems the same. I am using jQuery Mobile 1.0 with a break phone 1.3.0 along with jquery.ui.map.js, jquery.ui.map.services.js, jquery.ui.map.extensions.js and modernizr.min.js>

+4
source share
1 answer

You can use the following approach to clear markers, add new markers, and dynamically set the center position of jQuery-ui-map.

 //clear all markers $('#map_canvas').gmap('clear', 'markers'); // add a new marker var $marker = $('#map_canvas').gmap('addMarker', {id: i, 'position': new google.maps.LatLng(cityList[i][1], cityList[i][2]), title: cityList[i][0]}); // on marker click show the description $marker.click(function() { $('#map_canvas').gmap('openInfoWindow', {'content': cityList[this.id][0]}, this); }); // update the map center position $("#map_canvas").gmap("get", "map").panTo(new google.maps.LatLng(cityList[i][1], cityList[i][2]));

According to the Google Maps Documentation, the panTo method displays the map for the minimum amount needed to store LatLngBounds data. This does not guarantee where the borders will be on the map, except that as many of the borders as possible will be visible. Borders will be placed in the area limited by the type of map and navigation (pan, zoom and street view) if they are present on the map. If the borders are larger than the display, the display will be biased to include the northwest corner of the borders. If the change in position of the map is less than the width and height of the map, the transition will be smoothly animated.

Below you can find a sample. If you press a button in Chicago, a marker will be added and the center of the map will be updated to Chicago.

 <!doctype html> <html lang="en"> <head> <title>jQuery mobile with Google maps - Google maps jQuery plugin</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script> <script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.min.js"></script> <script type="text/javascript"> var mobileDemo = { 'center': '41,-87', 'zoom': 7 }, cityList = [ ['Chicago', 41.850033,-87.6500523, 1], ['Kentucki', 37.735377,-86.572266, 2] ]; function initialize() { $('#map_canvas').gmap({ 'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':false }); } function addMarker(i) { //clear all markers $('#map_canvas').gmap('clear', 'markers'); // add a new marker var $marker = $('#map_canvas').gmap('addMarker', {id: i, 'position': new google.maps.LatLng(cityList[i][1], cityList[i][2]), title: cityList[i][0]}); // on marker click show the description $marker.click(function() { $('#map_canvas').gmap('openInfoWindow', {'content': cityList[this.id][0]}, this); }); // set the map center position $("#map_canvas").gmap("get", "map").panTo(new google.maps.LatLng(cityList[i][1], cityList[i][2])); } $(document).on("pageinit", "#basic-map", function() { initialize(); }); $(document).on('click', '.add-marker', function(e) { e.preventDefault(); addMarker(this.id); }); </script> </head> <body> <div id="basic-map" data-role="page"> <div data-role="header"> <h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1> <a data-rel="back">Back</a> </div> <div data-role="content"> <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"> <div id="map_canvas" style="height:350px;"></div> </div> <a href="#" id="0" class="add-marker" data-role="button" data-theme="b">Chicago</a> <a href="#" id="1" class="add-marker" data-role="button" data-theme="b">Kentucki</a> </div> </div> </body> </html>

Hope this helps.

0
source

Source: https://habr.com/ru/post/1391442/

More articles:


All Articles