We Keep Coding

Google maps stop showing points v3

Hi i have trouble to find what case a problem to showing the way point on goggle maps as there were no changes in the code for a wile. way point stop showing about last week. im not familiar with google api
var map = null;
var markerArray = []; //create a global array to store markers
var myPoints =
[ [52.664167, -8.509825,' HQ','favicon.ico'] ,[52.836346, -6.913117,'point 1','http://maps.google.com/mapfiles/ms/icons/red.png ' ],[52.836202, -6.912101,'point2','http://maps.google.com/mapfiles/ms/icons/red.png ' ]];
function initialize() {
var myOptions = {
zoom:7,
center: new google.maps.LatLng(53.112, -7.448),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
var mcOptions = {
gridSize: 30,
maxZoom: 15
};
var mc = new MarkerClusterer(map, [], mcOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Add markers to the map
// Set up markers based on the number of elements within the myPoints array
for(var i=0; i<myPoints.length; i++){
createMarker(new google.maps.LatLng(myPoints[i][0], myPoints[i][1]), myPoints[i][2], myPoints[i][3]);
}
mc.addMarkers(markerArray , true);
}
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 50)
});
function createMarker(latlng, html, icons) {
var contentString = html;
var links = icons;
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: links ,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
// marker.setAnimation(google.maps.Animation.BOUNCE);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
markerArray.push(marker); //push local var marker into global array
}
window.onload = initialize;
<script src="https://maps.googleapis.com/maps/api/js?v=3"
type="text/javascript"></script>
<div id="map" style="width: 800px; height: 750px;" ></div>
Any suggestions?

It seems that you are using MarkerClusterer which is a part of google maps utility library, which was moved recently. Somebody probably referenced the library straight from code.google.com/svn/... in your project, where it's not available anymore and that's why it's broken. You need to find all libraries which are referenced from https://google-maps-utility-library-v3.googlecode.com/svn and replace then with your own links.
Check this SO question, user had very similar issues to yours.
Also! check this question and answers on SO!!, there are users who experienced issues with the same library, to get more information. Read all answers, as replacing https://google-maps-utility-library-v3.googlecode.com/svn with https://rawgit.com/googlemaps/... is not a correct solution, you should download the library assets into your project and reference them from there or use CDN (but not git!).

google map +boostrap modal not work resize

Hi guys I have the following problem. The google map is not dimensioned against that point. Here is the code I've written so far. I do not know why but this function google.maps.event.trigger(map, "resize");does not work if you put it in click event
$(function() {
var map;
$('.check-in').click(function(e) {
var coordX = $(this).data('x'),
coordY = $(this).data('y');
initialize(coordX, coordY);
});
function initialize(x, y) {
var map_canvas = document.getElementById('map_canvas');
var myLatlng = new google.maps.LatLng(x, y);
var map_options = {
center: myLatlng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(map_canvas, map_options);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
google.maps.event.trigger(map, "resize");
}
});

If I understand your issue correctly, the map is contained within a bootstrap modal and is not resizing once the modal is shown/displayed.
To do this, you need to trigger the google maps resize event on the modal's 'shown' event. For Bootsrap v3, the following should work. For v2, use 'shown' instead of 'shown.bs.modal'
$('#modal').on('shown.bs.modal', function () {
google.maps.event.trigger(map, "resize");
});

I had such a problem.
I solve it whit show the map in
I think there problem whit js files conflict

jquery link toggle with google maps

Im having problems working out how to get this toggle working, by default it hides the map and when you click show map i want the map to slide down and change the link test to hide map which then of course will slide back up but does not seem to be working..... anyone got any ideas?
Also if anyone knows of a solution for the google maps issue im also having please let me know, because the made is hidden when you show / slides down it does not show most of the map (something about resizing i think i remember reading up on)
i have made a jsfiddle here: http://jsfiddle.net/DfVBb/ although does not work there at all for some reason. thanks in advance!
HTML
<div class="slideToggleBox">
<div id="map_div"> </div>
</div>
show map
JS
<script type="text/javascript">
$('#map_div').hide();
$('#slideToggle').click(function() {
$('#map_div').slideToggle('slow', function() {
$('#slideToggle').text('hide map');
}, function(){
$('#slideToggle').text('show map');
});
return false
});
</script>
Maps JS
$(document).ready(function() {
var latlng = new google.maps.LatLng(53.334583, -0.961674);
var options = {
zoom: 15, // This number can be set to define the initial zoom level of the map
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_div'), options);
var image = new google.maps.MarkerImage('/images/map-icon.png',
new google.maps.Size(680, 178),
new google.maps.Point(0,0),
new google.maps.Point(18, 50)
);
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(53.334583,-0.961674),
map: map,
icon: image
});
});
</script>

I managed to work out a solution for this and also fixing the resize issue
$(function () {
// create a center
var c = new google.maps.LatLng(53.334583, -0.961674);
//create map options object
var mapOptions = {
zoom: 14,
center: c,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
$("#slideToggle").click(function () {
$('#map_canvas').slideToggle(300, function(){
if ($('#slideToggle').text() !== "hide map") $('#slideToggle').text('hide map');
else $('#slideToggle').text('show map');
google.maps.event.trigger(map, "resize"); // resize map
map.setCenter(c); // set the center
}); // slide it down
});
});

I looked at your fiddle, it has to be cleaned. Based on my understanding, you're trying to toggle Google maps on button click.
Mistakes in your Fiddle:
(1) The Google maps is not initialized. The below is used to initialize Google maps.
google.maps.event.addDomListener(window, 'load', initialize);
(2) Your .slideToggle() has to be cleaned up. It has be somehow like
$('#slideToggle').on('click', function () {
$('#map_canvas').slideToggle('slow', function () {
if ($('#slideToggle').text() !== "hide map")
$('#slideToggle').text('hide map');
else
$('#slideToggle').text('show map');
});
return false;
});
I've created a JSFiddle, please go through it and share your thoughts.

Loading Google Maps inside bootstrap tabs, fix is showing blank

UPDATE
I've tried implementing wf's solution, but the error still persists. You can take a look at a live example here -->
http://www.opohills.com/taipei-rentals/apollo_a.php
Scroll down and click the "Locations" tab
I'm trying to load google maps inside bootstrap tabs. I'm encountering the same problem discussed here, and extensively at SA --
https://github.com/twitter/bootstrap/issues/2330
The fix is to add a callback when the tab is clicked, to load the map than. I'm trying to implement this, with no success. The error still persists ( when only 1/8th of the map shows on the top left hand corner. ) When I open up inspect element, the map fills up and works fine (I'm guessing because inspect element is rereading the javascript)
Below is my javascript, and since this is my first real forray into it, I'm sure I'm doing something wrong --
<script type="text/javascript">
var map,
marker = new google.maps.Marker({
position: new google.maps.LatLng(25.041483, 121.553984),
draggable: true,
title: 'Opo Apartment' }),
infoWindow = new google.maps.InfoWindow({content: 'Apollo Apartment'});
$('#location').on('show', function(e) {
if( map == undefined) {
map = new google.maps.Map(
document.getElementById('map-canvas'),
{ zoom: 14,
center: new google.maps.LatLng(25.041483, 121.553984),
mapTypeId: google.maps.MapTypeId.ROADMAP })
}
marker.setMap(map);
infoWindow.open(map, marker);
})
</script>​
What are your thoughts on this?

I made a fix around it, but keeping it in a different div, away from the tabs, and displaying it when a certain tab is clicked. You can go to the same site to see the code
$(document).ready(function(){
var map,
marker = new google.maps.Marker({
position: new google.maps.LatLng(25.041483, 121.553984),
draggable: true,
title: 'Opo Apartment' }),
infoWindow = new google.maps.InfoWindow({content: 'Apollo Apartment'});
$('#location').on('show', function(e) {
if( map == undefined) {
map = new google.maps.Map(
document.getElementById('map-canvas'),
{ zoom: 14,
center: new google.maps.LatLng(25.041483, 121.553984),
mapTypeId: google.maps.MapTypeId.ROADMAP })
}
document.getElementById("largemap").style.display="block";
google.maps.event.trigger(map, 'resize');
marker.setMap(map);
infoWindow.open(map, marker);
})
$('.tabclick').on('show', function(e) {
document.getElementById("largemap").style.display="none";
})
})

Did you try like this?
$('#location').on('show', function(e) {
if( map == undefined) {
map = new google.maps.Map(
document.getElementById('map-canvas'),
{ zoom: 14,
center: new google.maps.LatLng(25.041483, 121.553984),
mapTypeId: google.maps.MapTypeId.ROADMAP })
}
marker.setMap(map);
infoWindow.open(map, marker);
google.maps.event.addListenerOnce(map, "bounds_changed", function() {
google.maps.event.trigger(map, "resize");
});
})

Thanks to alexxB in https://github.com/twbs/bootstrap/issues/2330
I use Cake, Bootstrap 3.0 an Jquery 1.11. First check that jquery functions trigers with any function to discard javascript problems then add this.
$('a[href="#my_id_tab_map"]').on('shown.bs.tab', function(e)
{
google.maps.event.trigger(map, 'resize');
});

Google Maps: marker icon and popup window

The code below opens a popup-window whenever a marker on the map is clicked. It works:
<script type="text/javascript">
function popup() {
newwindow = window.open('test.php','Test','width=800,height=500');
newwindow.focus();
return false;
}
function addMarker(lat, lng, map){
var latlng = new google.maps.LatLng(lat,lng);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
popup();
});
}
function initialize() {
var myOptions = {
center: new google.maps.LatLng(47.367633, 8.542557),
zoom: 5,
scrollwheel: true,
mapTypeId: google.maps.MapTypeId.HYBRID,
mapTypeControlOptions:{
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControlOptions:{
style: google.maps.NavigationControlStyle.SMALL
}
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var jsonData = <?php echo $json; ?>;
for(var i = 0; i < jsonData.length; i += 1){
addMarker(jsonData[i].lat, jsonData[i].lng, map);
}
}
</script>
If I add a marker icon, however, the popup-window still opens, but it immediately disappears in the background, i.e., behind the browser window that contains the map:
function addMarker(lat, lng, map){
var latlng = new google.maps.LatLng(lat,lng);
var marker = new google.maps.Marker({
position: latlng,
icon: 'myicon.png',
map: map
});
google.maps.event.addListener(marker, 'click', function() {
popup();
});
}
What is the reason for this behavior?

This is an interesting issue. It looks like it has to do with the Google Map window requesting focus after the click event. It's strange how it only happens when you use a custom marker icon though.
You could consider working around this issue by launching your popup with a slight delay of 1 millisecond. Tested on Firefox 3.6.3 and it seems to solve your problem:
function popup() {
setTimeout(function () {
var newwindow = window.open('test.php','Test','width=800,height=500');
newwindow.focus();
}, 1);
return false;
}
However, you could also consider not using popup windows at all. Many users still consider them evil, and you'd probably end up battling with popup blockers all the time.