Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 142 views

    Google Map Codes

    Uploaded by

    khamis abdalla
    The document connects to a MySQL database and retrieves latitude and longitude coordinates stored in a table. It displays these coordinates on a Google Map using the Google Maps JavaScript API. Stylesheets are included to style the navigation bar, buttons and map container. PHP code is also included to create the database and location table if they do not already exist.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd

    Google Map Codes

    Uploaded by

    khamis abdalla
    142 views5 pages
    The document connects to a MySQL database and retrieves latitude and longitude coordinates stored in a table. It displays these coordinates on a Google Map using the Google Maps JavaScript API. Stylesheets are included to style the navigation bar, buttons and map container. PHP code is also included to create the database and location table if they do not already exist.

    Original Description:

    code for google

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document connects to a MySQL database and retrieves latitude and longitude coordinates stored in a table. It displays these coordinates on a Google Map using the Google Maps JavaScript API. Stylesheets are included to style the navigation bar, buttons and map container. PHP code is also included to create the database and location table if they do not already exist.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    142 views5 pages

    Google Map Codes

    Uploaded by

    khamis abdalla
    The document connects to a MySQL database and retrieves latitude and longitude coordinates stored in a table. It displays these coordinates on a Google Map using the Google Maps JavaScript API. Stylesheets are included to style the navigation bar, buttons and map container. PHP code is also included to create the database and location table if they do not already exist.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    of 5

    <?

    php
    /* Database connection settings */
    $host = 'localhost';
    $user = 'root';
    $pass = '';
    $db = 'location_db';
    $mysqli = new mysqli($host,$user,$pass,$db) or die($mysqli->error);

    $coordinates = array();
    $latitudes = array();
    $longitudes = array();

    // Select all the rows in the markers table


    $query = "SELECT `locationLatitude`, `locationLongitude` FROM `location_tab`
    ";
    $result = $mysqli->query($query) or die('data selection for google map
    failed: ' . $mysqli->error);

    while ($row = mysqli_fetch_array($result)) {

    $latitudes[] = $row['locationLatitude'];
    $longitudes[] = $row['locationLongitude'];
    $coordinates[] = 'new google.maps.LatLng(' .
    $row['locationLatitude'] .','. $row['locationLongitude'] .'),';
    }

    //remove the comaa ',' from last coordinate


    $lastcount = count($coordinates)-1;
    $coordinates[$lastcount] = trim($coordinates[$lastcount], ",");
    ?>

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Map | View</title>
    </head>

    <body>
    <nav>
    <ul>
    <li class="active"><a href="#"><img
    src="img/map.png"></a></li>
    <li><a href="#"><img src="img/logout.png"></a></li>
    </ul>
    </nav>

    <div class="outer-scontainer">
    <div class="row">
    <form class="form-horizontal" action="" method="post"
    name="frmCSVImport" id="frmCSVImport" enctype="multipart/form-data">
    <div class="form-area">
    <button type="submit" id="submit" name="import"
    class="btn-submit">RELOAD DATA</button><br />
    </div>
    </form>
    </div>
    <div id="map" style="width: 100%; height: 80vh;"></div>

    <script>
    function initMap() {
    var mapOptions = {
    zoom: 18,
    center: {<?php echo'lat:'. $latitudes[0] .', lng:'.
    $longitudes[0] ;?>}, //{lat: --- , lng: ....}
    mapTypeId: google.maps.MapTypeId.SATELITE
    };

    var map = new


    google.maps.Map(document.getElementById('map'),mapOptions);

    var RouteCoordinates = [
    <?php
    $i = 0;
    while ($i < count($coordinates)) {
    echo $coordinates[$i];
    $i++;
    }
    ?>
    ];

    var RoutePath = new google.maps.Polyline({


    path: RouteCoordinates,
    geodesic: true,
    strokeColor: '#1100FF',
    strokeOpacity: 1.0,
    strokeWeight: 10
    });

    mark = 'img/mark.png';
    flag = 'img/flag.png';

    startPoint = {<?php echo'lat:'. $latitudes[0] .', lng:'.


    $longitudes[0] ;?>};
    endPoint = {<?php echo'lat:'.$latitudes[$lastcount] .', lng:'.
    $longitudes[$lastcount] ;?>};

    var marker = new google.maps.Marker({


    position: startPoint,
    map: map,
    icon: mark,
    title:"Start point!",
    animation: google.maps.Animation.BOUNCE
    });

    var marker = new google.maps.Marker({


    position: endPoint,
    map: map,
    icon: flag,
    title:"End point!",
    animation: google.maps.Animation.DROP
    });

    RoutePath.setMap(map);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>

    <!--remenber to put your google map key-->


    <script async defer src="https://maps.googleapis.com/maps/api/js?
    key=AIzaSyC-dFHYjTqEVLndbN2gdvXsx09jfJHmNc8&callback=initMap"></script>

    </body>
    </html>

    <?php
    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "";

    $conn = mysqli_connect($servername, $username, $password, $dbname);

    // Create database --------------------------------------------------------


    $sql = "CREATE DATABASE location_db";

    if (mysqli_query($conn, $sql)) {
    echo "Database created successfully<br>";
    } else {
    echo "Error creating database: " . mysqli_error($conn) . "<br>";
    }

    $dbname = 'location_db';
    mysqli_select_db ( $conn , $dbname);

    if (!$conn) {
    die("select db connection failed: " . mysqli_connect_error());
    }

    //create location table


    -------------------------------------------------------
    $sql = "CREATE TABLE `location_tab` (
    `locationLatitude` VARCHAR(50) NOT NULL,
    `locationLongitude` VARCHAR(50) NOT NULL,
    `ID` INT NOT NULL AUTO_INCREMENT,
    PRIMARY KEY (`ID`))";

    if(mysqli_query($conn, $sql)){
    echo "Table location created successfully<br>";
    } else {
    echo "Error creating location table: " . mysqli_error($conn). "<br>";
    }

    mysqli_close($conn);
    ?>

    body{
    font-family: Arial;
    margin: 5px 100px 10px 100px;
    padding: 0;
    color: white;
    text-align: center;
    background: #555; /*#555652;*/
    }

    nav{
    margin: 0;
    padding:0;
    margin-bottom: 10px;
    }

    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #222;
    }

    li {
    margin: 0;
    padding:0;
    float: left;
    }

    li a{
    display: block;
    color: white;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 40px;
    padding-left: 40px;
    border-right: 1px solid #555652;
    text-decoration: none;
    }

    li a img{
    width: 30px;
    height: 30px;
    }

    li a:hover {
    background-color: #555652;
    }

    .active{
    background-color: #DD4F43;
    }

    .form-area{
    float: right;
    display: table-column;
    margin-bottom: 10px;
    color: white;
    }

    .btn-submit {
    outline: 0;
    background: #F4BA0F;
    width: 120px;
    border: 0;
    padding: 8px;
    color: white;
    font-size: 12px;
    cursor: pointer;
    }

    .btn-submit:hover, .form button:active{


    background: #555652;
    }

    #userTable{
    background: #222;
    }

    .outer-scontainer {
    color: #E8E9EB;
    background: #333;
    border: #555652 1px solid;
    padding: 10px;
    }

    .outer-scontainer table {
    /*border-collapse: collapse;*/
    width: 100%;
    }

    .outer-scontainer th {
    border: 1px solid #555652;
    padding: 5px;
    text-align: center;
    }

    .outer-scontainer td {
    border: 1px solid #555652;
    padding: 5px;
    text-align: center;
    }

    You might also like