গুগল ডিভের ভিতরে গুগল ম্যাপের সাথে কীভাবে व्यवहार করবেন (আপডেট ছবি)

Question

আমার একটি পৃষ্ঠা রয়েছে এবং গুগল ম্যাপটি প্রথমে একটি লুকানো ডিভের ভিতরে রয়েছে। আমি তখন কোনও লিঙ্কে ক্লিক করার পরে ডিভিটি প্রদর্শন করি তবে মানচিত্রের উপরের বামদিকে প্রদর্শিত হয়।

আমি ক্লিক করার পরে এই কোডটি চালানোর চেষ্টা করেছি:

    map0.onResize();

বা:

  google.maps.event.trigger(map0, 'resize')

কোন ধারনা. এখানে লুকানো মানচিত্রের সাথে ডিভিটি দেখানোর পরে আমি যা দেখছি তার একটি চিত্র এখানে।

Comments

কোনও গোপন অঞ্চল থেকে গুগল ম্যাপ প্রদর্শন

— ম্যাট বল

@ ম্যাট বল - আপডেট হিসাবে, আমি সেখানে পুনরায়

— আকারের

@ ম্যাট বল - আমি এটি কাজ করতে পেরেছি। আমি গুগল ম্যাপ অবজেক্ট তৈরি করার পরে আমি এটিকে বিশ্বব্যাপী পরিবর্তনশীল হিসাবে সংরক্ষণ করি যাতে আমি পরে এটি আবার উল্লেখ করতে পারি এবং পুনরায় আকার পরিবর্তন করা কল করা এখন কাজ করে বলে মনে হচ্ছে। আমি যখনই এটি দেখাব ততবার মানচিত্রের অবজেক্টটি পুনরায় তৈরি না করার চেষ্টা করছি কারণ আমি লোকদের সামনে এবং পিছনে টগল করার অনুমতি দিই।

— লিওরা

@ooo যা নীচের কোড সহ খুব সহজ। মানচিত্র অবজেক্টটি আরম্ভ হয়েছে কিনা তা যাচাই করার জন্য আপনাকে যা যা করতে হবে তা হ'ল শর্ত। এটি আপনার প্রাথমিক সমস্যা যা মানচিত্রটি সঠিকভাবে লোড করতে হবে তার সমাধান করার জন্য একটি অফ-দ্য-কফ কোড ছিল।

— ফিলার

@ ফিলার - হ্যাঁ । ধন্যবাদ এখানে। । এইভাবে upvote :)।

— পুনর্নির্মাণ

Answer 1

এটি কেবল নিজেই পরীক্ষা করে দেখলাম যে আমি কীভাবে এটি কাছে এসেছি। খুব সোজা এগিয়ে, আপনার যদি কোনও ব্যাখ্যা দরকার হয় তবে আমাকে জানান

এইচটিএমএল

<div id="map_canvas" style="width:700px; height:500px; margin-left:80px;" ></div>
<button onclick="displayMap()">Show Map</button>

সিএসএস

<style type="text/css">
#map_canvas {display:none;}
</style>

জাভাস্ক্রিপ্ট

<script>
function displayMap()
{
    document.getElementById( 'map_canvas' ).style.display = "block";
    initialize();
}
function initialize()
{
    // create the map
    var myOptions = {
        zoom: 14,
        center: new google.maps.LatLng( 0.0, 0.0 ),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map( document.getElementById( "map_canvas" ),myOptions );
}
</script>

Comments

সুতরাং মূলত আপনি যখন ডিভিটি প্রদর্শিত হবে তখন কেবল মানচিত্রটি ইনস্ট্যান্টালাইজড করবেন? এটি করার কোনও উপায় কি যাতে মানচিত্রের অবজেক্টটি একবারে ইনস্ট্যান্টালাইজড হয়ে যায় (পৃষ্ঠা লোডে)?

— lucas

আপনি পুনরায় আকার দেওয়ার সময় দেওয়ার জন্য কোনও অনুষ্ঠান () এ কল দিলে দ্বিতীয় ফাংশনটি কল করতে আমি একটি সেটটাইমআউট বিলম্বের পরামর্শও দিতে পারি।

— এরিক .১৮

Answer 2

আমি একই সমস্যা ছিল এবং আবিষ্কার করেছি যে ডিভ দেখানোর সময়, কল করুন google.maps.event.trigger(map, 'resize');এবং এটি আমার জন্য সমস্যাটি সমাধান করার জন্য উপস্থিত হয়।

Comments

আকারের পরে মানচিত্রের মূল কেন্দ্রটি ঠিক রাখতে, পুনরায় আকারের বিবৃতিটি এভাবে প্রসারিত করার বিষয়টি বিবেচনা করুন: var কেন্দ্র = map.getCenter (); google.maps.event.trigger (মানচিত্র, 'আকার পরিবর্তন'); map.setCenter (কেন্দ্র);

— জন ডপপেলম্যান

নিশ্চিত নয় কেন, তবে এটির কাজটি পেতে আমার ছোট সেটটাইমআউটের ভিতরে সমাধানটি আবৃত করতে হবে: সেটটাইমআউট (ফাংশন () {google.maps.event.trigger (মানচিত্র, 'পুনরায় আকার')}, 100);

— হাফজেড

@ জনডপপেলম্যান টিপটির জন্য ধন্যবাদ! কেন এটি কেন্দ্র বজায় রাখছিল না, বা কীভাবে এটি জোর করে ফিরিয়ে দেওয়া হবে তা স্বজ্ঞাত ছিল না।

— নোহ ডানকান

'পুনরায় আকার' ইভেন্টটি ট্রিগার করার পরে মানচিত্রের কেন্দ্র এবং জুম স্তরটি আবার সেট করুন। আরও তথ্যের জন্য, দেখুন: কোড. google.com/p/gmaps-api-issues/issues/detail?id=1448

— রুহং

@ হাফজেড সম্ভবত প্রদর্শিত হওয়ার প্রভাবের আগে আপনার আকার পরিবর্তনকারী কোড ফায়ারিংয়ের কারণে হয়েছে, শোটি সঞ্চালন না হওয়া পর্যন্ত সময়সীমা বিলম্ব করে, তারপরে পুনরায় আকারটি এটি কার্যকর করতে পারে। আপনি সম্ভবত কার্যকরভাবে আপনার কোড ক্রম পরিবর্তন করে একই প্রভাব অর্জন করতে পারেন তা নিশ্চিত করার জন্য যে ইভেন্টটি ফায়ার করার সময়, মানচিত্র পুনরায় আকার দেওয়ার আগে ডিভি শো প্রদর্শিত হবে uted

— বার্ডো

Answer 3

google.maps.event.trigger($("#div_ID")[0], 'resize');

আপনার যদি ভেরিয়েবল মানচিত্র উপলব্ধ না থাকে তবে এটি divজিএমএপি রয়েছে এমন প্রথম উপাদান (যদি আপনি বোকামি কিছু না করেন) হওয়া উচিত ।

Comments

আপনি কি নিশ্চিত যে আপনি একটি উপর উপাদান আরম্ভ করতে পারবেন হয় DIV আছে পরিবর্তে একটি google.map.Map বস্তু?

— সালমান

@ সালমানা - কেবল এটি পরীক্ষা করে দেখুন এবং এটি আমার জন্য কাজ করেছে (যদিও মানচিত্রটির মনে হয় একটি নতুন কেন্দ্র রয়েছে)। পূর্ববর্তী গবেষণা থেকে আমি জানতাম না যে এটি এতটা সম্ভবত সিএসএন-তে সম্ভব ছিল

— হাল

সিএস এন ... এটি আমার পক্ষে কাজ করে তবে এটি কেন্দ্রের অবস্থানটি ভুল জায়গায় ফেলে দেয়। আমার মানচিত্রটি ওপি-র স্ক্রিন শটের মতো আরম্ভ করছে এবং এটি কেন্দ্রের মতো: আমার মানচিত্র_ক্যানভাসের উপরের বাম কোণে কেন্দ্র করে। কেন্দ্রিক আঁকতে কীভাবে তা নিয়ে চিন্তাভাবনা?

— কর্ক রস

Answer 4

আমার বুটস্ট্র্যাপ ট্যাবের ভিতরে একটি গুগল ম্যাপ ছিল, যা সঠিকভাবে প্রদর্শিত হচ্ছে না। এটা আমার স্থির ছিল।

// Previously stored my map object(s) in googleMaps array

$('a[href="#profileTab"]').on('shown', function() {   // When tab is displayed...
    var map = googleMaps[0],
        center = map.getCenter();
    google.maps.event.trigger(map, 'resize');         // fixes map display
    map.setCenter(center);                            // centers map correctly
});

Comments

একটি নিষ্ক্রিয় ট্যাবে লুকানো ছিল এমন মানচিত্রের জন্য এটি কাজ করতে আমাকে 'দেখানো' থেকে 'দেখানো' প্রতিস্থাপন করতে হয়েছিল। ধন্যবাদ

— নিকোলা

আমি স্মার্টউজার্ড 4 ব্যবহার করছি এবং এটিই আমার জন্য কাজ করা একমাত্র সমাধান এবং এটি দুর্দান্ত কাজ করেছে! আমি পরিবর্তন 'a[href="#profileTab"]'করতে step-2যা মানচিত্র DIV ধারণকারী এর div নাম।

— জিওস্প্যাটিয়াল

Answer 5

আপনি যখন আপনার দ্বি পুনরায় আকার দিন তখন মানচিত্রটি কীভাবে রিফ্রেশ করবেন

কেবল কল করার জন্য এটি যথেষ্ট নয় google.maps.event.trigger(map, 'resize');আপনার মানচিত্রের কেন্দ্রটিও পুনরায় সেট করা উচিত।

var map;

var initialize= function (){
    ...
}

var resize = function () {
    if (typeof(map) == "undefined") {) {
        // initialize the map. You only need this if you may not have initialized your map when resize() is called.
        initialize();
    } else {
        // okay, we've got a map and we need to resize it
        var center = map.getCenter();
        google.maps.event.trigger(map, 'resize');
        map.setCenter(center);
    }
}

পুনরায় আকারের ইভেন্টের জন্য কীভাবে শুনবেন

কৌণিক (এনজি-শো বা ইউআই-বুটস্ট্র্যাপ ধসে)

এনজি-শোতে আবদ্ধ মানের পরিবর্তে উপাদানের দৃশ্যমানতার সাথে সরাসরি আবদ্ধ হোন, কারণ এনজি-শো আপডেট হওয়ার আগে $ ঘড়িটি গুলি চালাতে পারে (তাই ডিভিটি এখনও অদৃশ্য থাকবে)।

scope.$watch(function () { return element.is(':visible'); },
    function () {
        resize();
    }
);

jQuery। শো ()

বিল্ট ইন কলব্যাক ব্যবহার করুন

$("#myMapDiv").show(speed, function() { resize(); });

বুটস্ট্র্যাপ 3 মডেল

$('#myModal').on('shown.bs.modal', function() {
    resize();
})

Comments

আপনার বুটস্ট্র্যাপ 3 মডালের পুনরায় আকার দেওয়ার পদ্ধতিটি আমার সমস্যাটিকে পুরোপুরি ঠিক করেছে যেখানে অন্যান্য পরামর্শগুলির বেশিরভাগই তা করেনি। ধন্যবাদ!

— ব্রায়ানলেগ

Answer 6

আপনার যদি কোনও আইফ্রেমে কোড অনুলিপি / পেস্ট করে গুগল ম্যাপ .োকানো থাকে এবং আপনি গুগল ম্যাপস এপিআই ব্যবহার করতে চান না , এটি একটি সহজ সমাধান। আপনি যখন লুকানো মানচিত্র দেখান কেবল তখন নীচের জাভাস্ক্রিপ্ট লাইনটি কার্যকর করুন। এটি কেবল আইফ্রেমে এইচটিএমএল কোড নেয় এবং এটি একই জায়গায় সন্নিবেশ করায় এটি আবার রেন্ডার করে:

document.getElementById("map-wrapper").innerHTML = document.getElementById("map-wrapper").innerHTML;

jQuery সংস্করণ:

$('#map-wrapper').html( $('#map-wrapper').html() );

এইচটিএমএল:

....
<div id="map-wrapper"><iframe src="https://www.google.com/maps/..." /></div>
....

নীচের উদাহরণটি বুটস্ট্র্যাপ 3 ট্যাবে লুকানো মানচিত্রের জন্য কাজ করে:

<script>
$(document).ready( function() {

    /* Detects when the tab is selected */
    $('a[href="#tab-id"]').on('shown.bs.tab', function() {

        /* When the tab is shown the content of the wrapper
           is regenerated and reloaded */

        $('#map-wrapper').html( $('#map-wrapper').html() ); 

    });
});
</script>

Comments

যে কেউ গুগল ম্যাপ জেএস লোড করছে না তবে কেবল https://www.google.com/maps/embed/v1/place?..

— এসসিআর

Answer 7

কেবলমাত্র নেটিভ উইন্ডো পুনরায় আকারের ইভেন্টটি ট্রিগার করাও সম্ভব।

গুগল ম্যাপস স্বয়ংক্রিয়ভাবে নিজেকে পুনরায় লোড করবে:

window.dispatchEvent(new Event('resize'));

Answer 8

আমারও একই সমস্যা google.maps.event.trigger(map, 'resize')ছিল , তিনি আমার পক্ষে কাজ করছিলেন না।

আমি যা করেছি তা হ'ল দৃশ্যমান করার পরে মানচিত্রটি আপডেট করার জন্য একটি টাইমার লাগানো ছিল div...

//CODE WORKING

var refreshIntervalId;

function showMap() {
    document.getElementById('divMap').style.display = '';
    refreshIntervalId = setInterval(function () { updateMapTimer() }, 300);
}

function updateMapTimer() {
    clearInterval(refreshIntervalId);
    var map = new google.maps.Map(....
    ....
}

আমি জানি না এটি করা আরও সুবিধাজনক উপায় কিনা তবে এটি কার্যকর!

Comments

একবার অপেক্ষা করার জন্য সেটটাইমআউট ব্যবহার করুন।

— জো অস্টিন

Answer 9

JQuery এর সাহায্যে আপনি এরকম কিছু করতে পারেন। এটি আমাকে উম্ব্রাকো সিএমএসে একটি ট্যাবে গুগল ম্যাপ লোড করতে সহায়তা করেছিল যা এখনই দৃশ্যমান হবে না।

function waitForVisibleMapElement() {
    setTimeout(function () {
        if ($('#map_canvas').is(":visible")) {
            // Initialize your Google Map here
        } else {
            waitForVisibleMapElement();
        };
    }, 100);
};

waitForVisibleMapElement();

Comments

এটিই আমার এবং আমার সমস্যার জন্য একমাত্র সমাধান। আমার কাছে একটি ম্যাটারিয়ালাইজ.সিএসএস ট্যাবের ভিতরে একটি গুগল মানচিত্র ছিল যা মানচিত্রটি দেখায় নি, তবে কেবলমাত্র মার্কার এবং বাম কোণে গুগল লোগো সহ একটি ধূসর ব্যাকগ্রাউন্ড দেখিয়েছে। আমি যখন মানচিত্রটি দৃশ্যমান হয় তখন এটির জন্য ট্যাব সামগ্রীটি ডিভ সেট করি এবং এটি পুরোপুরি কার্যকর হয়। উদাহরণ

— গর্জন_ইউনিয়ন

Answer 10

আমার সমাধানটি খুব সহজ এবং দক্ষ:

এইচটিএমএল

<div class="map-wrap"> 
  <div id="map-canvas"></div>
</div>

সিএসএস

.map-wrap{
  height:0;
  width:0;
  overflow:hidden;
}

jQuery

$('.map-wrap').css({ height: 'auto', width: 'auto' }); //For showing your map
$('.map-wrap').css({ height: 0, width: 0 }); //For hiding your map

Answer 11

বা যদি আপনি gmaps.js ব্যবহার করেন তবে কল করুন:

map.refresh();

যখন আপনার ডিভিটি প্রদর্শিত হবে

Answer 12

আমি অনুমান করি যে মূল প্রশ্নটি এমন কোনও মানচিত্রের সাথে রয়েছে যা পৃষ্ঠার একটি লুকানো বিভাগে উদ্ভুত। আমি কোনও অনুরূপ সমস্যা সমাধান করেছি দস্তাবেজটি প্রস্তুত করার পরে লুকানো ডিভিতে মানচিত্রের আকার পরিবর্তন করে, এটি প্রদর্শনের স্থিতি নির্বিশেষে, এটি সূচনা করার পরে। আমার ক্ষেত্রে, আমার কাছে 2 টি মানচিত্র রয়েছে, একটি প্রদর্শিত হয় এবং একটি আড়াল হয় যখন সেগুলি প্রাথমিক করা হয় এবং প্রতিবার কোনও মানচিত্র প্রদর্শিত হওয়ার পরে তা শুরু করতে চাই না। এটি একটি পুরানো পোস্ট, তবে আমি আশা করি এটি যে কেউ খুঁজছেন তাদের সহায়তা করবে।

Answer 13

আমি এটি আমার জন্য কাজ করতে পেরেছি:

আড়াল করতে:

$('.mapWrapper')
.css({
  visibility: 'hidden',
  height: 0
});

দেখানো:

    $('.mapWrapper').css({
      visibility: 'visible',
      height: 'auto'
    });

Answer 14

বুটস্ট্র্যাপ v3 ট্যাবগুলির মধ্যে ব্যবহার করা থাকলে, নিম্নলিখিতগুলির কাজ করা উচিত:

$('a[href="#tab-location"]').on('shown.bs.tab', function(e){
    var center = map.getCenter();
    google.maps.event.trigger(map, 'resize');
    map.setCenter(center);
});

tab-locationমানচিত্রযুক্ত ট্যাবের আইডি কোথায় ।

Answer 15

জন ডপেলম্যান এবং হফজেড যেমন নির্দেশ করেছেন, ঠিক তেমনই সমস্ত কোড একসাথে আপনার ডিভি দেখানোর ফাংশন বা অনক্লিক ইভেন্টে রাখুন:

setTimeout(function(){
var center = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
});

এটা আমার জন্য পুরোপুরি কাজ করেন

Answer 16

আমার সমাধানটি ছিল:

সিএসএস:

.map {
   height: 400px;
   border: #ccc solid 1px;
}

JQuery:

$('.map').width(555); // width of map canvas

Answer 17

আমি পছন্দ করি না যে লুকানো ডিভি দৃশ্যমান হওয়ার পরেই মানচিত্রটি লোড হবে। উদাহরণস্বরূপ একটি ক্যারোসেলে, এটি সত্যিই কাজ করে না।

এটি আমার সমাধান হ'ল লুকানো উপাদানটিতে শ্রেণি যুক্ত করা যাতে এটি প্রদর্শন করা যায় না এবং এটিকে স্থিতিশীলভাবে লুকিয়ে রাখা হয়, তারপরে মানচিত্রটি রেন্ডার করুন এবং মানচিত্রের লোডের পরে শ্রেণিটি সরিয়ে ফেলুন।

বুটস্ট্র্যাপ কারাউসলে পরীক্ষিত।

এইচটিএমএল

<div class="item loading"><div id="map-canvas"></div></div>

সিএসএস

.loading { display: block; position: absolute; }

জাতীয়

$(document).ready(function(){
    // render map //
    google.maps.event.addListenerOnce(map, 'idle', function(){
        $('.loading').removeClass('loading');
    });
}

Answer 18

আপনি মানচিত্র দেখাতে চাইলে এই লাইন কোডগুলি ব্যবহার করুন।

               $("#map_view").show("slow"); // use id of div which you want to show.
                    var script = document.createElement("script");
                    script.type = "text/javascript";
                    script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize";
                    document.body.appendChild(script);

Answer 19

 $("#map_view").show("slow"); // use id of div which you want to show.
     var script = document.createElement("script");
     script.type = "text/javascript";
     script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize";
     document.body.appendChild(script);

Answer 20

প্রথম পোস্ট. ট্যাব ক্লিক না করা পর্যন্ত আমার গুগলম্যাপ ডিভিশনটি একটি ধারক ডিভের মধ্যে ছিল {প্রদর্শন: কিছুই নয় with ওপি-র মতো একই সমস্যা ছিল। এটি আমার পক্ষে কাজ করেছে:

google.maps.event.addDomListener(window, 'load', setTimeout(initialize, 1));

এই কোডটির অভ্যন্তরে এবং আপনার কোডের শেষে যেখানে আপনার ধারক ডিভ ট্যাবটি ক্লিক করা থাকে এবং আপনার লুকানো ডিভ প্রকাশ করে ick গুরুত্বপূর্ণ বিষয়টি হ'ল আরম্ভ করার আগে আপনার ধারক ডিভটি দৃশ্যমান হতে হবে।

আমি এখানে এবং অন্যান্য পৃষ্ঠাগুলি প্রস্তাবিত বেশ কয়েকটি সমাধান চেষ্টা করেছিলাম এবং সেগুলি আমার পক্ষে কার্যকর হয়নি। কাজ করেছে কিনা আমাকে জানান. ধন্যবাদ।

Answer 21

এই কোডটি ডিভের আগে যুক্ত করুন বা এটি একটি জেএস ফাইলে পাস করুন:

<script>
    $(document).on("pageshow","#div_name",function(){
       initialize();
    });

   function initialize() {
   // create the map

      var myOptions = {
         zoom: 14,
         center: new google.maps.LatLng(0.0, 0.0),
         mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById("div_name"), myOptions);
   }


</script>

এই ইভেন্টটি ডিভি লোডের পরে ট্রিগার করা হবে সুতরাং এটি F5 টিপুন না করে মানচিত্রের সামগ্রীটি রিফ্রেশ করবে

Answer 22

মানচিত্রটি দেখানোর পরে আমি কোনও ঠিকানা জিওকোড করছি তারপরে মানচিত্রের কেন্দ্রটি সেট করছি। google.maps.event.trigger(map, 'resize');আমার জন্য কাজ করে নি।

আমি একটি ব্যবহার করতে হবে map.setZoom(14);

নীচে কোড:

document.getElementById('map').style.display = 'block';
var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ 'address': input.value }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker2 = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
                map.setZoom(14);
                marker2.addListener('dragend', function (event) {
                    $('#lat').val(event.latLng.lat());
                    $('#lng').val(event.latLng.lng());
                });

            }
        });

Answer 23

function init_map() {
  var myOptions = {
    zoom: 16,
    center: new google.maps.LatLng(0.0, 0.0),
    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(0.0, 0.0)
  });
  infowindow = new google.maps.InfoWindow({
    content: 'content'
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
  });
  infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);

jQuery(window).resize(function() {
  init_map();
});
jQuery('.open-map').on('click', function() {
  init_map();
});

<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?v=3.exp'></script>

<button type="button" class="open-map"></button>
<div style='overflow:hidden;height:250px;width:100%;'>
  <div id='gmap_canvas' style='height:250px;width:100%;'></div>
</div>