Input & Submit infomation to Google Map Marker

In this page, it includes the JavaScript source code and the display of
'How to Input and Submit the URL, Image & Video to Google Map Marker'.

Display:

Code:

At index.php

Step 1: Import the JavaScript

JavaScript: Line 98 - 99


            <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>


            <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyBTzxjPohB40FZEksFJ6m-FMPILqn78fHs"></script>

Step 2: Create a Funtion and Setup Map and Options

JavaScript: Line 102 - 109


            <script type="text/javascript">

            function initialize() {
            


              var map = new google.maps.Map(document.getElementById("map_canvas"), {

                maxZoom: 10

              }, {

                mapTypeId: google.maps.MapTypeId.ROADMAP

              });

Step 3: Get the Json File Data

JavaScript: Line 112


            $.getJSON("countyjson.php?countyid=320411", function(data) {

Step 4: Loop through the Data

JavaScript: Line 115 - 117


            $.each(data, function(key, data) {

              var myLatlng = new google.maps.LatLng(data.lat, data.lng); // set position

Step 5: Add Marker to Map

JavaScript: Line 120 - 123


            var marker = new google.maps.Marker({

              position: myLatlng,

              map: map,

            });

Step 6: Set Info Window Content

JavaScript: Line 172 - 174


            Name


            var infoContent = '<strong>' + data.name + '</strong>';


            
                ID


            infoContent += '<p>' + data.address + '</p>';


            
                URL


            infoContent += '<a class="website-link-display" href="' + data.website + '" target="_blank">' +
            data.website + '</a>';


            
                Let user to enter their country link


            infoContent += '<p class="website-link">' + '<b>Enter your country link here:</b>' + '</p>';



            infoContent += '<form action="php-script.php" class="website-update" method="post">' +
            '<input class="form-street-id" type="hidden" name="streetid" value="' + data.streetid +
            '" required>' +
            '<input type="text" class="form-website" placeholder="Enter Website" name="website" required>' +
            '<button type="submit">Submit</button>' + '</form>';


            
                Let user to upload their image


            infoContent += '<p class="website-link">' + '<b>Upload your image here:</b>' + '</p>';



            infoContent += '<form method="POST" action="image-script.php" enctype="multipart/form-data">' +
            '<input class="form-street-id" type="hidden" name="streetid" value="' + data.streetid +
            '" required>' + '<input class="form-control" type="file" name="uploadfile" value="" />' +
            '<button class="btn btn-primary" type="submit" name="upload">UPLOAD</button>' + ' </form>';


            
                Let user to upload their video


            infoContent += '<p class="website-link">' + '<b>Upload your video here:</b>' + '</p>';



            infoContent += '<form method="POST" action="video-script.php" enctype="multipart/form-data">' +
            '<input class="form-street-id" type="hidden" name="streetid" value="' + data.streetid +
            '" required>' + '<input class="form-control" type="file" name="video" value="" />' +
            '<button class="btn btn-primary" type="submit" name="save">UPLOAD</button>' + ' </form>';


            
                Display image


            infoContent += '<form id="display-image.php">' + '</form>';


            
                Add info window


            marker.info = new google.maps.InfoWindow({

              content: infoContent

            });


            
                Add listener for info window


            google.maps.event.addListener(marker, 'click', function() {

              marker.info.open(map, marker);

            });


            
                Add marker location to loc var


                var loc = new google.maps.LatLng(marker.position.lat(), marker.position.lng());


            

                var bounds = new google.maps.LatLngBounds();

                // extend bounds with loc

                bounds.extend(loc);



                map.fitBounds(bounds); // auto zoom

                map.panToBounds(bounds); // auto center


               });


              });

            }

            </script>

Step 7: Initialize the Map

JavaScript: Line 153 - 158


             <script type="text/javascript">


              $(document).ready(function() {

              initialize(); // init map

              });

            </script>

            

            <script src="ajax-script.js"></script>