asp.net mvc 5 - show google map inside a jquery dialogue form -

asp.net mvc 5 - show google map inside a jquery dialogue form -

hi i'm trying show map in form within jquery dialogue,

my jquery dialogue homecoming partial view set code within @section scripts , called maps api

<script type="text/javascript"> $(document).ready(function () { initialize(); }); // fun happens function initialize() { // google has tweaked interface - tells api utilize new ui google.maps.visualrefresh = true; var liverpool = new google.maps.latlng(53.408841, -2.981397); // these options set initial zoom level, map centered globally start, , type of map show var mapoptions = { zoom: 14, center: liverpool, maptypeid: google.maps.maptypeid.g_normal_map }; // makes div id "map_canvas" google map var map = new google.maps.map(document.getelementbyid("map_canvas"), mapoptions); // shows adding simple pin "marker" - happens tate gallery in liverpool! var mylatlng = new google.maps.latlng(53.40091, -2.994464); var marker = new google.maps.marker({ position: mylatlng, map: map, title: 'tate gallery' }); // can create markers different colors... google up! marker.seticon('http://maps.google.com/mapfiles/ms/icons/green-dot.png') // sample list of json encoded info of places visit in liverpool, uk // can either create json list server side, or phone call controller using jsonresult var info = [ { "id": 1, "placename": "liverpool museum", "openinghours": "9-5, m-f", "geolong": "53.410146", "geolat": "-2.979919" }, { "id": 2, "placename": "merseyside maritime museum ", "openinghours": "9-1,2-5, m-f", "geolong": "53.401217", "geolat": "-2.993052" }, { "id": 3, "placename": "walker fine art gallery", "openinghours": "9-7, m-f", "geolong": "53.409839", "geolat": "-2.979447" }, { "id": 4, "placename": "national conservation centre", "openinghours": "10-6, m-f", "geolong": "53.407511", "geolat": "-2.984683" } ]; // using jquery "each" selector iterate through json list , drop marker pins $.each(data, function (i, item) { var marker = new google.maps.marker({ 'position': new google.maps.latlng(item.geolong, item.geolat), 'map': map, 'title': item.placename }); // create marker-pin blue! marker.seticon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png') // set in info each json object - in case, opening hours. var infowindow = new google.maps.infowindow({ content: "<div class='infodiv'><h2>" + item.placename + "</h2>" + "<div><h4>opening hours: " + item.openinghours + "</h4></div></div>" }); // hook "onclick" listener map pops out info-window when marker-pin clicked! google.maps.event.addlistener(marker, 'click', function () { infowindow.open(map, marker); }); }) }

i'm calling map within div :

<div id="map_canvas" style="height: 240px; border: 1px solid gray"> map here</div>

but problem map not showing in dialogue, though works in normal page

any help plz !?

i've solved issue next code:

this code on main view, #next trigger of form submit, , #dialog within #form.

$(function () { datepair(); $('#dialog').dialog({ autoopen: false, modal: true, height: 720, width: 700, resizable: false, title: 'verify location', show: "fade", hide: "fade", open: function (event, ui) { var form = $('#form'); $.ajax({ url: form.attr('actoin'), type: form.attr('method'), data: form.serialize(), context: this, success: function (result) { $(this).html(result); } }); } }); $('#next').click(function (e) { $('#dialog').dialog('open'); homecoming false; }); });

this code on partialview

$(function () { window.$required = $('<div></div>').dialog({ autoopen: false, resizable: false, modal: true, title: 'verity location error', buttons: { "ok": function () { $(this).dialog('close'); callback(); } } }); $.ajax({ url: this.action, type: this.method, data: $(this).serialize(), success: function (json) { initialize(); } }); homecoming false; }); function callback() { $('#dialog').dialog('close'); } function initialize() { //init map }

and controller

public actionresult partialviewmapcontroller() { homecoming partialview(); }

hope not late :)

google-maps asp.net-mvc-5 jquery-dialog