Multiple Point Google Maps


Untuk menambahkan titik / point menggunakan google map itu mudah, langsung saja saya kasih scriptnya :

Code:
<!DOCTYPE html>
<
html xmlns='http://www.w3.org/1999/xhtml'>
    <
head>
        <
title>Latihan Multi Point Google Map</title>
    </
head>
    <
body>

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

        <div id="map_canvas" style="width:100%;height:800px;border:1px solid green">Google Map</div> 

        <script type="text/javascript">

            function initialize() {

                var map_options = {

                    center: new google.maps.LatLng(-7.755043459630856,110.38321655566403),

                    zoom: 15,

                    mapTypeId: google.maps.MapTypeId.ROADMAP

                };

                var google_map = new google.maps.Map(document.getElementById("map_canvas"), map_options);

                var info_window = new google.maps.InfoWindow({

                    content: 'loading'

                });

                var t = [];

                var x = [];

                var y = [];

                var h = [];

            

                t.push('asdasd');

                x.push(-7.753980387250357);

                y.push(110.38376372630307);

                h.push('<p><strong>asdasd</p>');

                t.push('KING');

                x.push(-7.753044881333829);

                y.push(110.38390320117185);

                h.push('<p><strong>KING</p>');

                t.push('nol');

                x.push(-7.751599095372457);

                y.push(110.38521211917111);

                h.push('<p><strong>nol</p>');

                t.push('Foto Kopi Cannon');

                x.push(-7.75017456611221);

                y.push(110.3859845953674);

                h.push('<p><strong>Foto Kopi Cannon</p>');

                var i = 0;

                for ( item in t ) {

                    var m = new google.maps.Marker({

                        map:       google_map,

                        animation: google.maps.Animation.DROP,

                        title:     t[i],

                        position:  new google.maps.LatLng(x[i],y[i]),

                        html:      h[i]

                    });

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

                        info_window.setContent(this.html);

                        info_window.open(google_map, this);

                    });

                    i++;

                }

            }

            initialize();

        </script>

    </body>

</html> 



Untuk scriptnya bisa didownload disini

sumber : http://jsfiddle.net/nrabinowitz/2DBXY/

#selamat mencoba

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s