www.bchomescondos.ca/properties/?city=Burnaby&id=261618646
www.bchomescondos.ca/properties/?city=Burnaby&id=261711367
These are just the few of the sample pages where the problem is arising. I am not too proficient with the Google Map API, but still tried to incorporate on my website.
I have added three tabs- one showing the road map, another the street view and the third is the walkscore. While the road map and walk-score is working fine, the street view isn't.
But one strange thing I have noticed is if the page is resized (just for any weird reason) the street view map appears.
I would be very much obliged if anyone helps me with this problem.
The Script
http://pastebin.com/zQTCxez2
<script src="https://maps.googleapis.com/maps/api/js?v=3.19&sensor=true_or_false"></script>
<script>
var geocoder;
var ws_wsid = 'afca921c9778417e8dc16a8236d1f079';
var ws_address = "<?php echo $row['address']; ?>,<?php echo $row['city']; ?>";
var ws_width = '100%';
var ws_height = '400';
var ws_layout = 'vertical';
var ws_commute = 'true';
var ws_transit_score = 'true';
var ws_map_modules = 'all';
var address = "<?php echo $row['address']; ?>,<?php echo $row['city']; ?>";
function initialize() {
var fenway = new google.maps.LatLng( <? php echo $row['latitude']; ?> , <? php echo $row['longtitude']; ?> )
var mapOptions = {
center: fenway,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var contentString = '<a class="fancybox-inline" href="#request_form_pop">Request of showing this property</a>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: fenway,
map: map,
title: ''
});
infowindow.open(map, marker);
google.maps.event.addListener(marker, 'click', function() {});
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
};
panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
map.setStreetView(panorama);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
The HTML
http://pastebin.com/fgDRR0MN
<div class="row">
<div class="one columns"></div>
<section class="ten columns tabs" style="margin: 20px 0;">
<ul class="tab-nav">
<li class="active">Google Map</li>
<li> Street View</li>
<li>Walk Score</li>
</ul>
<div class="tab-content active">
<div id="map-canvas" style="height: 400px; border: 0.5px solid #000;">
</div>
</div>
<div class="tab-content">
<div id="pano" style="height: 400px; border: 0.5px solid #000;"></div>
</div>
<div class="tab-content">
<div id="ws-walkscore-tile" style="height: 400px; border: 0.5px solid #000;"></div>
</div>
<script type='text/javascript' src='http://www.walkscore.com/tile/show-walkscore-tile.php'></script>
</section>
<div class="one columns"></div>
</div>
I just wanted to show the street view when that particular tab is clicked.
CSS Files
[http://www.bchomescondos.ca/wp-content/themes/dgdon/css/gumby.css]
[http://www.bchomescondos.ca/wp-content/themes/dgdon/css/style.css]
So, it can be deduced that there is no problem with the map api and it's script. The problem lies with how the CSS tabs are handled.
Thanks duncan for your help. I would open a new question regarding solving this CSS and JS problem.
Related
This question already has answers here:
Find center of multiple locations in Google Maps
(4 answers)
Closed 4 years ago.
I have this code:
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<style>
#map_canvas {
border:1px solid transparent;
height: 400px;
width: 100%;
}
</style>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 padding_all_right_4">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 padding_all_3">
<h2 class="h2">Atrakcje w okolicy</h2>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding_all_2">
<a href ="#" class="obj-1" id="obj-1">
<div class="apartament_atrakcje">Atrakcja 1 pl</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding_all_2">
<a href ="#" class="obj-2" id="obj-2">
<div class="apartament_atrakcje">Atrakcja 2 PL</div>
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 padding_all_0">
<div class="apartament_mapa">
<div id="map_canvas"></div>
<script>
var locations = [
['Atrakcja 1 pl', 51.73925413, 19.51309225, 1],
['Atrakcja 2 PL', 53.41475000, 14.60220358, 2],
];
var map;
var markers = [];
function init(){
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var num_markers = locations.length;
for (var i = 0; i < num_markers; i++) {
markers[i] = new google.maps.Marker({
position: {lat:locations[i][1], lng:locations[i][2]},
map: map,
html: locations[i][0],
id: i,
});
google.maps.event.addListener(markers[i], 'click', function(){
var infowindow = new google.maps.InfoWindow({
id: this.id,
content:this.html,
position:this.getPosition()
});
google.maps.event.addListenerOnce(infowindow, 'closeclick', function(){
markers[this.id].setVisible(true);
});
this.setVisible(false);
infowindow.open(map);
});
}
}
init();
</script>
The script displays 2 points on the google map.
I have a problem with centering the map on these points. Currently, I enter the coordinates of the centering of the map in the page code, however points on the map are added from the CMS and must center automatically :(
Does anyone know how to do it?
Do you need to center on one point? scaisEdge answer will do that for you.
map.setCenter(new google.maps.LatLng(lat, lng));
Else if what you need is to center on the 'center' of those two points. You'll need to calculate the center point between those two and then center on this new LatLong. For that you can check Google Maps Javascript API
and this post of stackoverflow: Find center of multiple locations in Google Maps
You could use setCenter()
map.setCenter(new google.maps.LatLng(lat, lng));
eg for center on the first marker
map.setCenter(new google.maps.LatLng(locations[0][1], locations[0][2]));
I'm obviously making a thing which is meant to show a Map.
Literally nothing happens - no Map, no Errors, no crash and burn.
Here is my code:
<div style="height:100%; width: 100%;">
<div id="map-canvas"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpgrLi55xM68AaSJOQPX5nzEOV7sw4KVY&callback=initMap"></script>
<script>
function initMap() {
var mapCanvas = document.getElementById("map-canvas");
var mapOptions = {
center: new google.maps.LatLng(53.419824, -3.0509294),
mapTypeId: 'satellite',
scrollwheel: true
}
var map = new google.maps.Map(mapCanvas, mapOptions);
}
</script>
I've tried changing the width/height of the parent div to PX's with no luck.
Any help is great
Cheers
For a better insight, view the full page code here:
http://pastebin.com/XrRYgtjz
I would say you have two issues.
your map div doesn't have a size (you don't specify the size of the containing element for the anonymous div <div style="height:100%; width: 100%;">).
your MapOptions doesn't contain the required/manditory zoom property.
proof of concept fiddle
code snippet:
function initMap() {
var mapCanvas = document.getElementById("map-canvas");
var mapOptions = {
center: new google.maps.LatLng(53.419824, -3.0509294),
zoom: 5,
mapTypeId: 'satellite',
scrollwheel: true
}
var map = new google.maps.Map(mapCanvas, mapOptions);
}
html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<div style="height:100%; width: 100%;">
<div id="map-canvas"></div>
</div>
<script deferred async src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
I think the problem is in how you've described the new map in your mapOptions variable. Try changing the syntax to something like this, passing mapCanvas as the first argument and the options as the second argument:
var mapOptions = new google.maps.Map(mapCanvas, {
center: {lat: 53.419824, lng: -3.0509294},
mapTypeId: 'satellite',
scrollwheel: true
});
I hope this helps!
<div style="height:100%; width: 100%;">
Maybe problem in height. Try change to 400px.
Or
<div style="height:400px; width: 100%;">
<div id="map-canvas" style="height:100%; width: 100%;></div>
</div>
EDIT
<div style="height:100%; width: 100%;">
<div id="map-canvas"></div>
</div>
<script>
function initMap() {
var mapCanvas = document.getElementById("map-canvas");
var mapOptions = {
center: new google.maps.LatLng(53.419824, -3.0509294),
mapTypeId: google.maps.MapTypeId.SATELLITE,
scrollwheel: true
}
var map = new google.maps.Map(mapCanvas, mapOptions);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpgrLi55xM68AaSJOQPX5nzEOV7sw4KVY&callback=initMap"></script>
so far the text is centered the google maps page hugs the left and then the text underneath it remains centered, i just want the map to be centered.
<div id="row1">
<div id="note"><img src="http://www.bristol.gov.uk/sites/default/files/styles/hero_image/public/images/children_and_young_people/resources_for_professionals/head_teachers_and_school_administrators/hr/contact_us/we%20will%20be%20back%20soon-sticky%20note.jpg?itok=08vLR_lO"></div>
<div id = "hours">
Sorry<br>
hours<br>
</div>
<div id="gmap_canvas" style="height:500px; width:600px;"></div>
Below text
</div>
Style:
#row1 {
text-align: center;
}
Google Map JavaScript:
<script type="text/javascript">
function init_map() {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(20.0820037, -14.26733380000002),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(20.0820037, -14.26733380000002)
});
infowindow = new google.maps.InfoWindow({
content: "<b>Crokson Dine In</b><br/>43 Gill Rd<br/>09521 Hovill"
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
text-align: center cannot center a block element itself. You need auto margins:
<div
id="gmap_canvas"
style="height:500px; width:600px; margin-left: auto; margin-right: auto;">
I have a problem before ask in here, i already searching in google or cases in stackoverflow, but not solved this case :(
This is my screnshot
http://i.stack.imgur.com/oSIsS.png
sign red arrow this is place marker, why google maps not focus in place marker ?
and this mycode
this part code page.php
<div id="tab-5">
<?php
$map = "-6.3447213,106.8658161";
$title = "Creative School";
$image = "log.jpg";
$addres = "DKI JAKARTA";
?>
<iframe id="headerMap" width="480" HEIGHT="420"></iframe>
<script>
jQuery("iframe#headerMap").attr("src", "map.php?map=<?php echo $map;?>&title=<?php echo $title ?>&image=<?php echo $image ?>&addres=<?php echo $addres ?>");
</script>
</div>
this full code map.php
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var map;
var TILE_SIZE = 256;
var lang = new google.maps.LatLng(<?php echo $_GET['map'];?>);
function createInfoWindowContent() {
return [
'<center><b><?php echo $_GET['title'];?></b></center>',
'<center><b><?php echo $_GET['addres'];?></b></center>',
'<center><img src="images/<?php echo $_GET['image'];?>"></center>'
].join('<br>');
}
function initialize() {
var mapOptions = {
zoom: 13,
center: lang
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var coordInfoWindow = new google.maps.InfoWindow();
coordInfoWindow.setContent(createInfoWindowContent());
coordInfoWindow.setPosition(lang);
coordInfoWindow.open(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
Help me thank's you
Trying to have several gmaps on one page that are in hidden divs and swapped out. First map shows up fine but all following ones when called are part grey and off center. I've seen many posts as such but none of the solutions have worked - even google.maps.event.trigger(map, "resize");
Here's what I have. Thanks for any help.
function displayMap() {
document.getElementById('map_canvas').style.display="block";
initialize();}
function displayMap2() {
document.getElementById('map_canvas2').style.display="block";
initialize();}
function displayMap3() {
document.getElementById('map_canvas3').style.display="block";
initialize();}
function displayMap4() {
document.getElementById('map_canvas4').style.display="block";
initialize();
}
function initialize() {
var myLatlng = new google.maps.LatLng(39.924186, -75.297571);
var myLatlng2 = new google.maps.LatLng(40.152785, -76.750233);
var myLatlng3 = new google.maps.LatLng(39.962254, -75.605264);
var myLatlng4 = new google.maps.LatLng(40.152785, -76.750233);
var mapOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mapOptions2 = {
zoom: 13,
center: myLatlng2,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mapOptions3 = {
zoom: 13,
center: myLatlng3,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mapOptions4 = {
zoom: 13,
center: myLatlng4,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var map2 = new google.maps.Map(document.getElementById('map_canvas2'), mapOptions2);
var map3 = new google.maps.Map(document.getElementById('map_canvas3'), mapOptions3);
var map4 = new google.maps.Map(document.getElementById('map_canvas4'), mapOptions4);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
var marker2 = new google.maps.Marker({
position: myLatlng2,
map: map2
});
var marker3 = new google.maps.Marker({
position: myLatlng3,
map: map3
});
var marker4 = new google.maps.Marker({
position: myLatlng4,
map: map4
});
}
google.maps.event.addDomListener(window, 'load', initialize);
The swap div script
jQuery(function(){
jQuery('#showall').click(function(){
jQuery('.targetDiv').show();
});
jQuery('.showSingle').click(function(){
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).attr('target')).show();
});
});
The html
<div class="left_club" style="float:left; width:200px; margin-right:15px;">
<h3>Men's Clubs</h3>
<p><a class="showSingle" target="1" onclick="displayMap()">Royal Legends VBC</a><br>
<a class="showSingle" target="2" onclick="displayMap2()">Yorktowne VBC</a></p>
<h3>Women's Clubs</h3>
<p><a class="showSingle" target="3" onclick="displayMap3()">Lokahi</a><br>
<a class="showSingle" target="4" onclick="displayMap4()">Yorktowne VBC</a></p>
</div>
<div class="targetDiv" id="div1" style=" display:inline;">
<h2>Royal Legends VBC</h2>
<p>Contact | sample<br>
Location | Clifton Heights, PA 19018<br>
Phone Number | sample<br>
Website | sample
<div id="map_canvas"></div>
</div>
<div class="targetDiv" id="div2">
<h2>Yorktowne VBC</h2>
<p>Contact | sample<br>
Location | Etters PA 17319<br>
Phone Number | sample<br>
Website | sample
<div id="map_canvas2"></div>
</div>
<div class="targetDiv" id="div3">
<h2>Lokahi</h2>
<p>Contact | sample<br>
Location | West Chester PA 19380<br>
Phone Number | sample<br>
<div id="map_canvas3"></div>
</div>
<div class="targetDiv" id="div4">
<h2>Yorktowne VBC</h2>
<p>Contact | sample<br>
Location | Etters PA 17319<br>
Phone Number | sample<br>
Website | Yorktowne VBC
<div id="map_canvas4"></div>
</div
The css
#map_canvas {margin-top:10px;width: 455px;height: 240px;float:left;border:1px solid #dcdcdc; margin-left:0px; margin-bottom:0px;}
#map_canvas2 {margin-top:10px;width: 455px;height: 240px;float:left;border:1px solid #dcdcdc; margin-left:0px; margin-bottom:0px;}
#map_canvas3 {margin-top:10px;width: 455px;height: 240px;float:left;border:1px solid #dcdcdc; margin-left:0px; margin-bottom:0px;}
#map_canvas4 {margin-top:10px;width: 455px;height: 240px;float:left;border:1px solid #dcdcdc; margin-left:0px; margin-bottom:0px;}
.showSingle {cursor:pointer;}
.targetDiv {float:left; width:458px; padding:20px;border:1px solid #dcdcdc; background-color:#f0efee;}
js to hide maps after first map
jQuery(function(){
$('#div2, #div3, #div4').hide();
});
I know this problem very good here is one of the possible solutions stated in my comment,
The Problem is, when you initiate a google map on an element with width and height and after that set it to display:none and then display:block again (hide/show) it will fck up the map.
Now on this fiddle, when another map is shown or any map gets hidden the width and height of the containers are not affected, they are just moved horizontaly,
http://jsfiddle.net/LNYSE/
css, all maps are initialy positioned somewhere so left, users dont see.
.targetDiv {position:absolute;top:220px; width:458px;left:-999px; padding:20px;border:1px solid #dcdcdc; background-color:#f0efee;}
html, only the first map is visible because left:0
<div class="targetDiv activeYo" id="div1" style=" display:inline;left:0;">
here´s the js, you dont need to use a animate function you could also only use .css('left',0)
jQuery('.showSingle').click(function(){
jQuery('.activeYo').animate({left:-999}).removeClass('activeYo');
jQuery('#div'+$(this).attr('target')).animate({left:0}).addClass('activeYo');
});
without animate http://jsfiddle.net/LNYSE/1/
cheers