jQuery Forum

Try this after page load :

1. google.maps.event.trigger(map, 'resize');

Thanks mate.

But its not working. Actually, I've written showMap function in another js file and passing DIV object to this. and rendering back. However, its not working. I've used following code:

1. var showMap = function (mapCanvas) {
       var map; var lat; var lng; var marker;
       var locationUrl = 'web service to get location';
       $.ajax({
           type: 'GET', contentType: 'application/json', dataType: 'json', url: locationUrl, success: mapSuccess
       });
    
       function mapSuccess(result) {
           lat = result.data.latitude;
           lng = result.data.longitude;
           $.jStorage.set('lat', lat);
           $.jStorage.set('lng', lng);
           var latlng = new google.maps.LatLng(lat, lng);
           var myOptions = {
               zoom: 8,
               center: latlng,
               draggable: false,
               panControl: false,
               scaleControl: false,
               streetViewControl: false,
               zoomControl: false,
               disableDefaultUI: true,
               mapTypeId: google.maps.MapTypeId.ROADMAP
           };
           map = new google.maps.Map(mapCanvas, myOptions);
           marker = new google.maps.Marker({ position: latlng, map: map });
           google.maps.event.trigger(map, 'resize');
       }
    
   }

Thanks.

Did you setup width and height for your map page, content, and canvas div's? Google map will not render unless it knows the canvas' offsetWidth and offsetHeight. And usually that doesn't happen unless the page is rendered first and the canvas size is set.

Hi,

I have a problem to:
https://forum.jquery.com/topic/a-google-map-will-not-show-on-a-linked-page

But nobody can help ...?

Regards from Germany

Hi,

I have solve my problem!

I change on the linkingpage the href parameter and add - target="_parent",
now it is working correctly!

Regards from Husum / Nordsee

Hi,
i  need to implement google map in my application.i am using  mvc4 (.net) jquery 1.8.3
here is my code

<script src="@Url.Content("~/Scripts/jquery-1.8.3.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.mobile-1.1.0.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/jquery.mobile-1.1.0.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/Kendo/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/Kendo/kendo.default.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/Kendo/kendo.all.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/myIns.css")" rel="stylesheet" type="text/css" />
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

    $(document).ready(function () {
      

    })
   
</script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script language="javascript" type="text/javascript">
    var directionsDisplay;
    var latitude; var langitude;
   
      function success(position) {
        debugger
        var mapcanvas = document.createElement('div');
        mapcanvas.id = 'mapcontainer';
        latitude = position.coords.latitude;
        langitude = position.coords.longitude;
        var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

        var options = {
            zoom: 10,
            center: coords,

            mapTypeControl: false,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.SMALL
            },
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"), options);
        var marker = new google.maps.Marker({
            position: coords,
            map: map,
            title: "You are here!"
        });
    }
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success);
    }

</script>
<script type="text/javascript">
    function mapp() {


        var directionsService = new google.maps.DirectionsService();
        var directionsDisplay = new google.maps.DirectionsRenderer();

        var start = latitude + "," + langitude;

        var end = document.getElementById('endvalue').value;
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        directionsDisplay.setMap(map);
        //  directionsDisplay.setPanel(document.getElementById('panel'));

        var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };

        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });
    }
    function getdirection() {

        mapp();
    }

</script>
<div id="example" style="width: 100%; margin-left: 49px;">
 
                <div>
                    <table id="control" style="width:100%">
                        <tr>
                            @*<td style="width: 25px">@Html.Label("From:", new { Style = "color:black" })
                            </td>
                           <td>@Html.TextBox("startvalue", "", new { id = "startvalue", Style = "width:200px;" })
                            </td>*@
                        </tr>
                        <tr>
                            <td style="width: 25px">
                                @Html.Label("To:", new { Style = "color:black" })
                            </td>
                            <td>
                                @Html.TextBox("endvalue", "", new { id = "endvalue", Style = "" })
                            </td>
                        </tr>
                        <tr>
                            <td>
                            </td>
                            <td>
                                <input id="Button1" type="button" value="GetDirections" onclick="getdirection()" />
                            </td>
                        </tr>
</table>
</div>
</div>


i am not getting the google map can u suggest any solutions?

Well, here's your first problem:

1. <script src="@Url.Content("~/Scripts/jquery-1.8.3.js")" type="text/javascript"></script>
2. <script src="@Url.Content("~/Scripts/jquery.mobile-1.1.0.js")" type="text/javascript"></script>

No version of jQuery Mobile is compatible with jQuery 1.8.3.

And if you're using JQM 1.1 (why?) you have to use either jQuery 1.6.4 or 1.7.1. It's in the very first paragraph of the docs.

http://jquerymobile.com/demos/1.1.0/

Also, not a problem YET, because there's nothing in the callback:

1.     $(document).ready(function () {
2.       
3.     })

But see the BIG YELLOW BOX at the top of the page:

http://jquerymobile.com/demos/1.2.0/docs/api/events.html

Well noticed @watusiware !
For all of us who follow Rick Strahl's methods of removing the version numbers of script files, working with JQuery mobile needs to be well thought out.

{Removing version numbers from all code files makes it a snap when updating scripts in the JS folder only instead of individual sitewide page changes}       

There are other ways of avoiding having to make sitewide page changes.

When using JQM, it's best of have either:

- Some sort of server-side include facility. Of course, any kind of templating system or server side framework satisfies this. But even the most rudimentary web servers also have their own simple server-side include.

- If that's not possible (perhaps because there is no server, as with PhoneGap apps) use a Static Site Generator. This can give you all the templating you might have on, for instance, a Rails site, but it is a static "build" to produce your site from the templates.

I use Middleman, and am very happy with it.

Solves the problem of maintaining identical <head> sections on every page, and has many other uses.

Unfortunately, there is no SSGs that I know of that use PHP as the generator language. Middleman is great if you are familiar with Ruby.