I have been trying to make a map with Jquery-ui-map, however, when the page loads the map doesn’t load. So I try to use the refresh command, however, that doesn’t seem to work… any ideas?
$('#map_canvas').gmap({'center': '<?=$row2->latitude;?>,<?=$row2->longitude;?>'})
$('#map_canvas').gmap('option', 'zoom', 16);
$('#map_canvas').gmap('addMarker', {'position': '<?=$row2->latitude;?>,<?=$row2->longitude;?>'}).click(function() {
$('#map_canvas').gmap('openInfoWindow', {'content': 'Hello World!'}, this);
$('#map_canvas').gmap('refresh');
You’re missing a final line from your code, that closes the click function:
});
Other than that it works for me. See it working .
HI, Actually I couldn’t see your results either until I refreshed the page. I tried this and still no good:
$('#map_canvas').gmap({'center': '<?=$row2->latitude;?>,<?=$row2->longitude;?>'})
$('#map_canvas').gmap('option', 'zoom', 16);
$('#map_canvas').gmap('addMarker', {'position': '<?=$row2->latitude;?>,<?=$row2->longitude;?>'}).click(function() {
$('#map_canvas').gmap('openInfoWindow', {'content': 'Hello World!'}, this);$('#map_canvas').gmap('refresh');
});
The problem then has to be somewhere else - not in the code that you’re showing to us.
Can you link us to a test page that demonstrates the problem that you are having? It’s quite likely that you’re forgetting something - a needed library or something else.
If you check out this tutorial page , you’ll see that the scripts are loaded in a slightly different order with different versions. Could that perhaps be relevant?
Ok… startin to drive me crazy
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.map.full.min.js"></script>
This did nothing. So I tried rewriting the script to who the tutorial explained. The only difference was that I used “on” instead of “live” as this just broke the page.
$('#mapPage').on("pageshow", function() {
$('#map_canvas').gmap('refresh');
});
$('#mapPage').on("pageinit", function() {
$('#map_canvas').gmap({'center': '<?=$row2->latitude;?>,<?=$row2->longitude;?>'})
$('#map_canvas').gmap('option', 'zoom', 16);
$('#map_canvas').gmap('addMarker', {'position': '<?=$row2->latitude;?>,<?=$row2->longitude;?>'}).click(function() {
$('#map_canvas').gmap('openInfoWindow', {'content': 'Hello World!'}, this);
});
});
Still no go. The page loads with no map. However, when you refresh the page, the map happily appears…
Full Code with the dynamic php taken out for lat and long. Also tried taken out the on statements and just went for the page load:
<!DOCTYPE HTML>
<html>
<head>
<title>Y.art</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="js/jquery.ui.map.full.min.js" type="text/javascript"></script>
</head>
<body>
<div id="mapPage" data-role="page">
<div data-role="header" data-position="fixed" data-theme="b">
<a href="#" data-role="button" data-rel="back" data-icon="arrow-l">Back</a>
<h1>Y.art</h1>
</div>
<div data-role="content">
<h1 style="text-align:center"><?=$row2->collection;?></h1>
<div class="ui-grid-a" style="width: 80%;margin:0 auto 20px auto;">
<div class="ui-block-a"><div class="ui-bar ui-bar-a">Artist</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-a"><?=$artist;?></div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-a">Year</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-a"><?=$year;?></div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-a">Owner</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-a"><?=$owner;?></div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-a">Location</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-a"><?=$location;?></div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-a">Material</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-a"><?=$material;?></div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-a">Dimensions</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-a"><?=$dimensions;?></div></div>
</div>
<div id="map_canvas" style="width:100%; height:300px;"></div>
</div>
<div data-role="footer" data-id="foo1" data-theme="b" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed fade ui-fixed-overlay" role="contentinfo" data-fullscreen="true">
<div data-role="navbar" class="ui-navbar ui-navbar-noicons" role="navigation">
<ul class="ui-grid-b">
<li><a href="index.php" data-icon="home" class="ui-btn-active">Home</a></li>
<li><a href="map.php" data-icon="grid">Photos</a></li>
<li><a href="Info" data-icon="info">Info</a></li>
</ul>
</div><!-- /navbar -->
</div>
</div>
<script>
$(function(){
$('#map_canvas').gmap('refresh');
$('#map_canvas').gmap({'center': '43.09273,-89.33532'})
$('#map_canvas').gmap('option', 'zoom', 16);
$('#map_canvas').gmap('addMarker', {'position': '43.09273,-89.33532'}).click(function() {
$('#map_canvas').gmap('openInfoWindow', {'content': 'Hello World!'}, this);
});
});
</script>
</body>
The page you supplied at http://atomiccoffee.com/art/detail.php?id=68 seems to work fine, with the map loading full width each time.
Is there some way for me to reliably reproduce the problem that you’re having?
Hmm… directly linking to it works? It seems when you link via a nav bar or link it breaks…
Go here: http://atomiccoffee.com/art/
Click on one of the selections in the list and see what happens…
Ok… so I made a small step forward. It seems the issue is with multipage sites. Ie… I am linking between index.php and detail.php. JQuery by default uses ajax, which messes up the map scripts no matter what I try (like the refresh statement). So, instead I kill the ajax on links on the index page by using (data-ajax=“false” ).
However, of course this causes the page to refresh oddly, so it doesn’t feel as smooth as it could
system
April 17, 2015, 10:17am
12
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
I tried rearranging the scripts and putting them into the head