First knowledge SFDC create a Google Map (add small box Infowindow on marker small icon)

Source: Internet
Author: User

The important thing is to emphasize that you must use IE browser to open

1<apex:page >23<meta name= "viewport" content= "initial-scale=1.0, User-scalable=no"/>4<script type= "Text/javascript" src= "Http://maps.google.cn/maps/api/js?sensor=false" ></script>5<script type= "Text/javascript" >6             //Add custom content to the marker tag7             functionmyload () {8 9                 varLat = 23.14746;Ten                 varLNG = 113.34175376; One                  A                     varMYLATLNG =Newgoogle.maps.LatLng (lat, LNG); -                 varMyoptions = { -Zoom:15, the CENTER:MYLATLNG, - MapTypeId:google.maps.MapTypeId.ROADMAP -                 }; -                 varMap =NewGoogle.maps.Map (document.getElementById ("Map"), myoptions); +                  -                 //Create marker +                 varMarker =NewGoogle.maps.Marker ({ A POSITION:MYLATLNG, atDraggable:true -                   }); - marker.setmap (map); -                    -                   //Create Infowindow Custom content -                   varInfowindow =NewGoogle.maps.InfoWindow ({ in                       //Customizing Content -                       //in this case, longitude and latitude are fixed, so they don't change as the icons change. toContent: "Longitude:" + marker.position.lat () + "+" Latitude: "+marker.position.lng () +                 }); - infowindow.open (map, marker); the                    *             } $Window.onload =Myload;Panax Notoginseng</script> - the<body> +<style> A #map { the width:500px; + height:400px; -                 float: Left; $               } $</style> -<div id= "Map" ></div> -</body> the</apex:page>

This column does not have a format of marker, and the default icon is called. Because it was about Infowindow.

When introducing marker, there is a very important attribute to forget to say.
Create Marker21                 var marker = new                      position:mylatlng,23                                         }); 

Whether you can drag. This property is important because it is used below.
Create Infowindow Custom Content                   -var Infowindow = new Google.maps.InfoWindow ({$/                       /custom content                       // In this case, the latitude and longitude are fixed, so they don't change with the icon.                     content: "Longitude:" + marker.position.lat () + "+" Latitude: "+                                  Infowindow.open (map, marker);
This is the simplest step in creating a infowindow.
Content is what you want to show inside the Infowindow, and the content in this example does not follow
Infowindow and marker are moving and changing, not because
Marker.position.lat ();
MARKER.POSITION.LNG ();
These two methods are not good to use, but the two methods at the beginning of the execution of the first time, then no longer be called to execute, so the content is fixed;
Write the next one that can be changed.

First knowledge SFDC create a Google Map (add small box Infowindow on marker small icon)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.