Home/ Questions/Q 8349887
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T08:08:33+00:00

The map is loaded correctly without marker object ,But it doesn’t load when I

  • 0

The map is loaded correctly without marker object ,But it doesn’t load when I add Marker object on this structure here my 

<!doctype html>
<html>
    <head>
    <script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="script.js" type="text/javascript"></script>
    <script type="text/javascript"> 

        $.geolocation.find(function(location) {
            var lat = location.latitude;
            var lng = location.longitude;

            var map = new google.maps.Map($('#mapDiv').get(0), {
                center: new google.maps.LatLng(lat, lng),
                zoom: 13,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var pinColor = "FE7569";
            var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2" + pinColor,
            new google.maps.Size(21, 34),
            new google.maps.Point(0,0),
            new google.maps.Point(10, 34));
            var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
            new google.maps.Size(40, 37),
            new google.maps.Point(0, 0),
            new google.maps.Point(12, 35))

            var marker= new google.maps.Marker({
                position: new google.maps.LatLng(lat, lng),
                map: map,
                icon: pinImage,
                shadow: pinShadow 
            });        
        });
    </script>
</head>
 <body>
    <div id="mapDiv" style="width:700px; height: 500px;"></div>
 </body>
</html>

The script which is included in the page script.js 

      (function($){

            $.extend($.support,{
                geolocation:function(){
                    return $.geolocation.support();
                }
            });

            $.geolocation = {        
                find:function(success, error, options){
                    if($.geolocation.support()){
                        options = $.extend({highAccuracy: true, track: false}, options);
                        ($.geolocation.object())[(options.track ? 'watchPosition' : 'getCurrentPosition')](function(location){
                            success(location.coords);
                        }, function(){
                            error();
                        }, {enableHighAccuracy: options.highAccuracy});     
                    }else{
                        error();                
                    }
                },
                object:function(){
                    return navigator.geolocation;
                },
                support:function(){
                    return ($.geolocation.object()) ? true : false;
                }
            };

        })(jQuery);

I need to include the marker with the google map
another issue that this code is running only on Firefox and IE ,but it doesn’t run on Google Chrome

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Take a look at this, I think this is solved, your error was in the url parameters and now it is working in Chrome too. You can also change the color of your marker by replacing FE7569 according to your needs.

    Eg: 73B5EB enter image description here or 33DE61 enter image description here

    Another thing you can do is to put a text in the marker like this:

    http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=You%20are%20here|FE7569

    Eg: enter image description here

    Live demo of your code but corrected:

    http://jsfiddle.net/oscarj24/sPsxh/

    Hope this helps 🙂

    • 0