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 varGgreenicon =NewGoogle.maps.MarkerImage (7 8"Http://img.zcool.cn/community/[email protected]_32h_1c_1e_2o.png",9 NewGoogle.maps.Size (32, 32),Ten NewGoogle.maps.Point (0, 0), One NewGoogle.maps.Point (16, 16) A - ); - the functionmyload () { - - varLat = 23.14746; - varLNG = 113.34175376; + - varMYLATLNG =Newgoogle.maps.LatLng (lat, LNG); + varMyoptions = { A atZoom:15, - - CENTER:MYLATLNG, - - MapTypeId:google.maps.MapTypeId.ROADMAP - }; in varMap =NewGoogle.maps.Map (document.getElementById ("Map"), myoptions); - to varMarker =NewGoogle.maps.Marker ({ + POSITION:MYLATLNG, - Icon:ggreenicon, the Map:map, *Title: "Hello world!" $ });Panax Notoginseng //marker.setmap (map); - } theWindow.onload =Myload; +</script> A the<body> +<style> - #map { $ width:500px; $ height:400px; - float: Left; - } the</style> -<div id= "Map" ></div>Wuyi</body> the</apex:page>
Directly on the code, the important thing is to emphasize that it must be IE browser to open.
The comments on the previous article are not too much wasted in detail, focus on marker
function Myload () The paragraph above is actually a custom small icon. Please feel the attributes (I don't know). The first one is the path to the icon you want to apply. Size is sized. Point is the relative displacement of the coordinate position. (As for why there are two point ... If there is a wrong place certainly must be correct out ah, learn together.
Map creation and the same, set the latitude and longitude, basic information, call map method, generally put the map in <div>.
Create marker using the Marker method
Icon:ggreenicon refers to the one you call the Var, if not write is also available, by default is a small red icon with the self.
Map:map was to add him to the map. If you do not write this with //marker.setmap (map), the same function is achieved.
Title: "Hello world!" refers to the mouse on the above display of things, by default hidden, not a box above.
My computer is Win10 's own browser does not open the map effect, so there is no view.
Initial knowledge SFDC create a Google Map (marker small icon added)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
