Jquery Google Map wont Load

Question

0.00/5 (No votes)

See more:

help i want to make a map where we can edit and save markers with jquery but when i finished it,my map wont load. plus when i checked my code on Developer tools i got this message "Uncaught ReferenceError: $ is not defined " .please help thank you

this is my code:

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://www.google.com/jsapi?key=AIzaSyBw7b8lMbX80IG_WviZAJBtI9rI_vxjcDU">
<script type="text/javascript"charset="utf-8">google.load("maps","2.x"); google.load("jquery","1.3.1");</script>

<script type="text/javascript">
   $(document).ready(function() {
    var mapCenter = new google.maps.LatLng(47.6145, -122.3418); //Google map Coordinates
    var map;

    map_initialize(); // initialize google map
    
    //############### Google Map Initialize ##############
    function map_initialize()
    {
        var googleMapOptions =
        {
            center: mapCenter, // map center
            zoom: 17, //zoom level, 0 = earth view to higher value
            panControl: true, //enable pan Control
            zoomControl: true, //enable zoom control
            zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL //zoom control size
        },
            scaleControl: true, // enable scale control
            mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
        };
    
        map = new google.maps.Map(document.getElementById("map-canvas"), googleMapOptions);
        
        //Load Markers from the XML File, Check (map_process.php)
        $.get("map_process.php", function (data) {
            $(data).find("marker").each(function () {
                 //Get user input values for the marker from the form
                  var name      = $(this).attr('name');
                  var address   = ''+ $(this).attr('address') +'';
                  var type      = $(this).attr('type');
                  var point     = new google.maps.LatLng(parseFloat($(this).attr('lat')),parseFloat($(this).attr('lng')));

                  //call create_marker() function for xml loaded maker
                  create_marker(point, name, address, false, false, false, "http://mapicons.nicolasmollet.com/wp-content/uploads/mapicons/shape-default/color-eb2828/shapecolor-color/shadow-1/border-dark/symbolstyle-white/symbolshadowstyle-dark/gradient-no/stop.png");
            });
        });
        
        //drop a new marker on right click
        google.maps.event.addListener(map, 'rightclick', function(event) {
            //Edit form to be displayed with new marker
            var EditForm = ''+
            '<form action="ajax-save.php" method="POST" name="SaveMarker" id="SaveMarker">'+
            '<label for="pName">Place Name :<input type="text" name="pName" class="save-name" placeholder="Enter Title" maxlength="40" /></label>'+
            '<label for="pDesc">Description :<textarea name="pDesc" class="save-desc" placeholder="Enter Address" maxlength="150"></textarea></label>'+
            '<label for="pType">Type : <select name="pType" class="save-type"><option value="restaurant">Rastaurant</option><option value="bar">Bar</option>'+
            '<option value="house">House</option></select></label>'+
            '</form>'+
            '<button name="save-marker" class="save-marker">Save Marker Details</button>';

            //call create_marker() function
            create_marker(event.latLng, 'New Marker', EditForm, true, true, true, "http://mapicons.nicolasmollet.com/wp-content/uploads/mapicons/shape-default/color-eb2828/shapecolor-color/shadow-1/border-dark/symbolstyle-white/symbolshadowstyle-dark/gradient-no/stop.png");
        });
    }
});
</script>
<style>
html, body, #map_canvas {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#map_canvas {
    position: relative;
}
</style>
<head>

<body>

    <<;h1> class="heading">My Google Map<</h1>>
    <<div> align="center">Right Click to Drop a New Marker<</div>>
    <<div >id="map-canvas" style="height:100%"><</div>>

</body>
</html>

Posted 25-Mar-14 12:52pm

Member 10699106

Updated 25-Mar-14 13:00pm

v3

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Code Help 2014 · Accepted Answer · 2014-03-26T03:33:00

The reason of the issue "$ is not defined" is that your html is not completely valid. The first <script> is not closed properly. It should be <script ............="" />. The opening <head> tag occurs twice i.e. you have <head> two times instead of <head> and </head>. Also the tags inside <body> are not formatted correctly.

Here is the modified HTML:

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://www.google.com/jsapi?key=AIzaSyBw7b8lMbX80IG_WviZAJBtI9rI_vxjcDU"></script>
<script type="text/javascript"charset="utf-8">google.load("maps","2.x"); google.load("jquery","1.3.1");</script>
 
<script type="text/javascript">
    $(document).ready(function () {
        var mapCenter = new google.maps.LatLng(47.6145, -122.3418); //Google map Coordinates
        var map;

        map_initialize(); // initialize google map

        //############### Google Map Initialize ##############
        function map_initialize() {
            var googleMapOptions =
        {
            center: mapCenter, // map center
            zoom: 17, //zoom level, 0 = earth view to higher value
            panControl: true, //enable pan Control
            zoomControl: true, //enable zoom control
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL //zoom control size
            },
            scaleControl: true, // enable scale control
            mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
        };

            map = new google.maps.Map(document.getElementById("map-canvas"), googleMapOptions);

            //Load Markers from the XML File, Check (map_process.php)
            $.get("map_process.php", function (data) {
                $(data).find("marker").each(function () {
                    //Get user input values for the marker from the form
                    var name = $(this).attr('name');
                    var address = '' + $(this).attr('address') + '';
                    var type = $(this).attr('type');
                    var point = new google.maps.LatLng(parseFloat($(this).attr('lat')), parseFloat($(this).attr('lng')));

                    //call create_marker() function for xml loaded maker
                    create_marker(point, name, address, false, false, false, "http://mapicons.nicolasmollet.com/wp-content/uploads/mapicons/shape-default/color-eb2828/shapecolor-color/shadow-1/border-dark/symbolstyle-white/symbolshadowstyle-dark/gradient-no/stop.png");
                });
            });

            //drop a new marker on right click
            google.maps.event.addListener(map, 'rightclick', function (event) {
                //Edit form to be displayed with new marker
                var EditForm = '' +
            '<form action="ajax-save.php" method="POST" name="SaveMarker" id="SaveMarker">' +
            '<label for="pName">Place Name :<input type="text" name="pName" class="save-name" placeholder="Enter Title" maxlength="40" /></label>' +
            '<label for="pDesc">Description :<textarea name="pDesc" class="save-desc" placeholder="Enter Address" maxlength="150"></textarea></label>' +
            '<label for="pType">Type : <select name="pType" class="save-type"><option value="restaurant">Rastaurant</option><option value="bar">Bar</option>' +
            '<option value="house">House</option></select></label>' +
            '</form>' +
            '<button name="save-marker" class="save-marker">Save Marker Details</button>';

                //call create_marker() function
                create_marker(event.latLng, 'New Marker', EditForm, true, true, true, "http://mapicons.nicolasmollet.com/wp-content/uploads/mapicons/shape-default/color-eb2828/shapecolor-color/shadow-1/border-dark/symbolstyle-white/symbolshadowstyle-dark/gradient-no/stop.png");
            });
        }
    });
</script>
<style>
html, body, #map_canvas {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#map_canvas {
    position: relative;
}
</style>
</head>
 
<body>
    <h1 class="heading">My Google Map</h1>
    <div align="center">Right Click to Drop a New Marker</div>
    <div id="map-canvas" style="height:100%"></div>
</body>
</html>