I know this is a common problem here, i already look at all the topics here for a solution, but still, when i change tabs i continue with this problem:
please take a look at my js code:
function initialize() {
//replace 0's on next line with latitude and longitude numbers from earlier on in tutorial.
var myLatlng = new google.maps.LatLng(40.654372, -7.914174);
var myLatlng1 = new google.maps.LatLng(43.654372, -7.914174);
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var myOptions1 = {
zoom: 16,
center: myLatlng1,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
//here's where we call the marker.
//getElementById must be the same as the id you gave for the container of the map
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var map1 = new google.maps.Map(document.getElementById("map_canvas1"), myOptions1);
//google.maps.event.trigger(map1, 'resize');
//map1.setCenter(myLatlng1);
var marker = new google.maps.Marker({
position: myLatlng,
title:"ADD TITLE OF YOUR MARKER HERE"
});
var marker1 = new google.maps.Marker({
position: myLatlng1,
title:"ADD TITLE OF YOUR MARKER HERE"
});
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'<\/div>'+
'<h2 id="firstHeading" class="firstHeading">ADD TITLE HERE<\/h2>'+
'<div id="bodyContent">'+
'<p style="font-size:1em">ADD DESCRIPTION HERE<\/p>'+
'<\/div>'+
'<\/div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.addListener(marker1, 'click', function() {
infowindow.open(map1,marker1);
});
google.maps.event.addListener(map, "idle", function(){
marker.setMap(map);
});
google.maps.event.addListener(map, "idle", function(){
marker1.setMap(map1);
});
// To add the marker to the map, call setMap();
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
map.setCenter(myLatlng); // be sure to reset the map center as well
});
google.maps.event.addListenerOnce(map1, 'idle', function() {
google.maps.event.trigger(map1, 'resize');
map1.setCenter(myLatlng1); // be sure to reset the map center as well
});
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
i have two maps, one ofr each tab. i could solve the problem of the center point being hide on the left corner with this from other post:
.ui-tabs .ui-tabs-hide { /* my_tabs-1 contains google map */
display: block !important;
position: absolute !important;
left: -10000px !important;
top: -10000px !important;
}
but the problem stated here i had no luck even lookin at other topics here.
I found the clean solution:
<script type="text/javascript">
function showAddressMap(){
var mapOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
geocoder = new google.maps.Geocoder();
// searchQuery is the address I used this in a JSP so I called with $
geocoder.geocode( {'address': "${searchQuery}"}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
google.maps.event.trigger(map, 'resize');
//}
}
JQ(document).ready(function(){
JQ('#tabs').tabs();
JQ('#maptab').bind('click', function() {
showAddressMap();
});
});
</script>
<div id="tabs">
<li><fmt:message key="fieldset.map"/></li>
</div>
<div id="tabs-1">
<fieldset>
<div id="map_canvas" style="height:500px; width:100%;"></div>
</fieldset>
</div>
You need to set the center and trigger a re-size event.
MyMap.setCenter(MyCenterCoords);
google.maps.event.trigger(MyMap, 'resize');
This code google.maps.event.trigger(map, 'resize') should be in the pageshow like below.
$('#map_result').live('pageshow',function(event){
google.maps.event.trigger(map, 'resize');
});
By the way, have you found the solutions for this? I actually make it works using css.
I know its not a elegant solution, but you can just add an Iframe inside each tab. and when you click the tab, the map load with the correct sizes.
Related
I a using Google Maps in my app.
The user is to be able to place a marker on any place in the map.
To this end I wrote the following code:
var marker;
function myMap() {
var mapCanvas = document.getElementById("map-canvas");
var myCenter=new google.maps.LatLng(50.833,-12.9167);
var mapOptions = {center: myCenter, zoom: 5};
var map = new google.maps.Map(mapCanvas, mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
//marker.setMap(null); // this line does not work
placeMarker(map, event.latLng);
});
}
function placeMarker(map, location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
The marker is supposed to always move to the place where the user clicked.
The line
marker.setMap(null);
is supposed to remove the old marker (before the new marker is placed).
However, with this line in the code I cannot place any markers any more. Not including this line means that every marker stays in the map and is not removed (i.e. the map is filling up with markers over time).
Look at the javascript console, you will see Uncaught TypeError: Cannot read property 'setMap' of undefined. The first time, marker is null, you need to only set its map property to null if it already exists.
google.maps.event.addListener(map, 'click', function(event) {
if (marker) marker.setMap(null);
placeMarker(map, event.latLng);
});
proof of concept fiddle
code snippet:
var marker;
function myMap() {
var mapCanvas = document.getElementById("map-canvas");
var myCenter = new google.maps.LatLng(50.833, -12.9167);
var mapOptions = {
center: myCenter,
zoom: 5
};
var map = new google.maps.Map(mapCanvas, mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
if (marker) marker.setMap(null);
placeMarker(map, event.latLng);
});
}
function placeMarker(map, location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
google.maps.event.addDomListener(window, "load", myMap);
html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
The problem is that you try to use method setMap after the first click when marker variable doesn't have this method. So, first check if marker has the method and then call it.
google.maps.event.addListener(map, 'click', function(event) {
// check if setMap is available and call it.
if(marker.hasOwnProperty('setMap')){
marker.setMap(null);
}
placeMarker(map, event.latLng);
});
It is said in documentation, that I can set content to node, not only to string, in InfoWindow.
Unfortunately, when I try to set node, it doesn't work:
var point;
point = new google.maps.LatLng(43.65654, -79.90138);
// html = 'hello world';
html = $('<div>hello world</div>');
var marker = new google.maps.Marker({
position: point,
map: map
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(html);
infowindow.open(map, marker);
});
Jsfiddle is here: https://jsfiddle.net/pmek2zhs/3/
Click on marked and you'll see nothing appears. If you change html variable assignment to commented one, it will work.
$('<div>hello world</div>'); is not an HTML node, it is a JQuery object.
Use $('<div>hello world</div>')[0] to get something the API can use.
updated fiddle
code snippet:
var map = null;
var infowindow = new google.maps.InfoWindow();
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(43.907787, -79.359741),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Add markers to the map
// Set up three markers with info windows
var point;
point = new google.maps.LatLng(43.65654, -79.90138);
// html = 'hello world';
html = $('<div>hello world</div>')[0];
var marker = new google.maps.Marker({
position: point,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(html);
infowindow.open(map, marker);
});
google.maps.event.trigger(marker, 'click');
}
initialize();
html,
body {
height: 100%;
}
#map_canvas {
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>
I have a problem with google maps, I have tried to just to set up a normal map, but nothing works all I get is this image:
And this is my code for this:
(function ($) {
var marker;
var map;
var iconBase = 'https://maps.google.com/mapfiles/ms/icons/';
var infowindow;
function initialize() {
getCoordinate(function (location) {
setUpMap(location.latitude, location.longitude);
});
}
function setUpMap(lat, long)
{
var myLatlng = new google.maps.LatLng(lat, long);
var mapOptions = {
zoom: 8,
center: myLatlng,
mapTypeControl: false,
streetViewControl: false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
codeAddress();
}
function codeAddress()
{
//Resellers is a global varaible that holds all the resellers addresses
Object.keys(resellers).forEach(function(key){
var reseller = resellers[key];
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(reseller.lat, reseller.lng),
icon: iconBase + 'green-dot.png'
});
(function (marker) {
// add click event
google.maps.event.addListener(marker, 'click', function () {
if (infowindow) {
infowindow.close();
}
infowindow = new google.maps.InfoWindow({
title: key,
content: '<div style="color: black; height: 150px;">' + reseller.address + '</div>'
});
infowindow.open(map, marker);
});
})(marker);
gmaerksp.push(marker);
});
}
function getCoordinate(callback) {
navigator.geolocation.getCurrentPosition(
function (position) {
var returnValue = {
latitude: position.coords.latitude,
longitude: position.coords.longitude
};
var location = returnValue;
callback(location);
}
);
}
google.maps.event.addDomListener(window, 'load', initialize);
}(jQuery));
#map-canvas{
width: 1200px;
height: 600px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
And I have no idea why the map is not loading, the markers is loading as it should. But as you can see, the zoom tools is not correctly loading either. So you guys have any idea what is wrong? I have tested with change the div size to but it still loads the same.
Well after more debugging, I found the answer! It seems like google maps can't be inserted with wordpress shortcode. I don't know why, but as soon as I move it out to it is own template instead it works like a charm.
So if any other persons have the same problem out there, and have put there google maps in a shortcode, try to move it out from there and see if it works.
I just want to load the Google Maps based on the Mouseover event of different div element. For doing this I just used the following simple code. This code itself not working, can someone tell me what mistake I have made?
<script type="text/javascript">
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(40.740, -74.18),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var content = '<strong>A info window!</strong><br/>That is bound to a marker';
var infowindow = new google.maps.InfoWindow({
content: content
});
var marker = new google.maps.Marker({
map: map,
position: map.getCenter(),
draggable: true
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener($("#showmap"), 'mouseover', function(){ alert("Hi");});
</script>
<div id='showmap'>
Show Map
</div>
<div id="map-canvas" style="width: 500px; height: 400px"></div>
Above simple alert function itself not called for this simple code.
The selector returns the jQuery object and the needed element can be accessed directly from the element array with a [0] . Also, make it "addDomListenerOnce", only need to initialize once.
$("#showmap")[0]
see a demo
google.maps.event.addDomListenerOnce($("#showmap")[0], 'mouseover',
function(){ initialize(); });
I just tried using this and this also worked.
Java Script Code:
function initialize(lat,longit,content) {
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(lat, longit),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow({
content: content
});
var marker = new google.maps.Marker({
map: map,
position: map.getCenter(),
draggable: false
});
infowindow.open(map, marker);
}
Html Code:
<div id='showmap' onclick="initialize(1.37422,103.945,'<h2>Tampines</h2>')">
Show Map
</div>
I just tried using an idea from java, can we try a method call from the onclick and check whether it is working and to my surprise it worked.
I have a somewhat strange problem. I have two maps on my site, a big one and a small one. I want to use the big one to show a route to a certain address. I'm now trying to implement the two maps but get a weird problem. The small map is working fine, but on the big map only a small area of the div is filled with the map, the rest is empty. (See the image.)
I use the following code to display the two maps:
function initialize() {
var latlng = new google.maps.LatLng(51.92475, 4.38206);
var myOptions = {zoom: 10, center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({position: latlng, map:map, title:"Home"});
var image = '/Core/Images/Icons/citysquare.png';
var myLatLng = new google.maps.LatLng(51.92308, 4.47058);
var cityCentre = new google.maps.Marker({position:myLatLng, map:map, icon:image, title:"Centre"});
marker.setMap(map);
var largeLatlng = new google.maps.LatLng(51.92475, 4.38206);
var largeOptions = {zoom: 10, center: largeLatlng,mapTypeId: google.maps.MapTypeId.ROADMAP};
var largeMap = new google.maps.Map(document.getElementById("largeMap"), largeOptions);
var largeMarker = new google.maps.Marker({position: largeLatlng, map:largeMap, title:"Cherrytrees"});
largeMarker.setMap(largeMap);
}
[..]
jQuery(document).ready(function () {
[..]
initialize();
});
What's going wrong here?
EDIT:
Unfortunately the suggestions below doesn't seem to work. The closes i came is to remove the display:none from the elements and set the elements to hide with jquery
[..]
jQuery(document).ready(function () {
[..]
$("#shadow").add($("#shadowContent"),$("#closebar"),$("#content")).hide();
});
With the following result
Yes, #Argiropoulos-Stavros but, Add it as a listener
google.maps.event.addListenerOnce(map, 'idle', function(){
google.maps.event.trigger(map, 'resize');
map.setCenter(location);
});
It will begin re-sizing after, map rendered.
I think you are using v3.
So google.maps.event.trigger(map, "resize");
Also take a look at here
I fixed it!
I made an own function for the largemap and placed it in the callback when the elements are opened
function largeMap(){
var largeLatlng = new google.maps.LatLng(51.92475, 4.38206);
var largeOptions = {zoom: 10, center: largeLatlng,mapTypeId: google.maps.MapTypeId.ROADMAP};
var largeMap = new google.maps.Map(document.getElementById("largeMap"), largeOptions);
var largeMarker = new google.maps.Marker({position: largeLatlng, map:largeMap, title:"Cherrytrees"});
largeMarker.setMap(largeMap);
}
[..]
$("#showRoute").click(function(e){
e.preventDefault();
$("#shadow").add($("#shadowContent"),$("#closebar"),$("#content")).fadeIn(500);
$("#shadowContent").show().css({'width':'750px','top':'25px','left':'50%','margin-left':'-400px'});
$("#closeBarLink").click(function(l){
l.preventDefault();
$("#shadow").add($("#shadowContent"),$("#closebar"),$("#content")).fadeOut(500);
});
largeMap();
});
Thanks anyway!!
call initialize(); function after you box active.
$(document).ready(function () {
$("#shadow").show(function () {
initialize();
})
});
When you're loading in the large map, try adding this at the end of your map code.
map.checkResize();
When Google Maps first renders on your page, it has the dimensions recorded so that it displays the map images in that size. If you're resizing the map dynamically, you need to tell the API to check the new size.
<script type='text/javascript' >
var geocoder, map;
function codeAddress() {
var address= '<?php echo $this->subject()->address; ?>';
geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 13,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon:'http://rvillage.com/application/themes/rvillage/images/map-marker.png'
});
var infowindow = new google.maps.InfoWindow({ content: 'coming soon' });
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, this);
});
}
});
}
jQuery(document).ready(function () {
codeAddress();
});
</script>
You are using pop up window with jQuery, and I guest you call initialize() function when document is ready ( $(document).ready(function() {initialize(); }) ).
Try call initialize() function after pop up windown showed.
Johnny