A small project is going to use Google Map as its main presentation, showing the current state of the world on a map. Although I have used Google Map before, it still took me two days to complete the development of the main map function. Here is a record for my own use.

Js implement gist address: https://gist.github.com/jy00295005/11077920

Custom Map Marker

Google gives the pin of default as marker, and it can also be changed into other pictures, but my requirement is to display two kinds of marker simultaneously: 1. 2. Pin marker is used to display the mechanism

Balls and Numbers

Without an artist, I looked for a Google Cluster Marker image

Using different images as Markers is as simple as giving the Google API address when defining Markers

icon: helper.map.config.pin_icon_url 

But it took a bit of time to add a number to Marker by Google, and it wasn’t easy enough to write it yourself. The last method I used was to use a package markerWithLabel.js

Marker with Label() is used instead of the original default Google.maps.Marker (). The construction method is exactly the same as the default method, except that more parameters of Label can be passed to it.

var marker_country = new MarkerWithLabel({
    position: new google.maps.LatLng(_country_data.lat, _country_data.long),
    map: _map,
    country: _country_data.country,
    icon : icon_val.icon_url,
    draggable: false,
    raiseOnDrag: ture,
    labelContent: ""+_country_data.value,
    labelAnchor: new google.maps.Point(icon_val.xIndex, icon_val.yIndex),
    labelClass: "mapIconLabel", // the CSS class for the label
    labelInBackground: false
});

OK is done, just like the default method

Custom Marker Tooltips

Because of the use of adaptive layout, I found it a little difficult to locate the X and Y coordinates of Tooltips. I used the normal method: display the Tooltips with a hidden Tooltip div, grab the coordinates with a Mouseover marker, and display the Tooltips div with 10 px offset around it. However, because of the adaptive DIV layout, the coordinates change every time the user changes the browser window, and recalculating the window size to detect the user is obviously not a good solution.

Finally, we use Google’s custom Infowindow method to simulate Tooltips with Infowindow, and the effect is good. Again, a package, infobox.js, is used

// new Infowindow tooltioptions tooltioptions: {content: document.getElementById("infobox"), disableAutoPan: false, maxWidth: 150, pixelOffset: new google.maps.Size(-70, 0), zIndex: null, boxStyle: { "background": "# f0ad4e", "opacity" : 0.75, "width" : "100 px", "border - style" : "solid", "border - width" : "1 px", "border - color" : "#646464", "border-radius": "3px 3px 3px 3px" }, closeBoxMargin: "12px 4px 2px 2px", closeBoxURL: "",// Null there is no closed fork for InfoboxClearance: new google.maps.Size(1, 1)} / / statement infoWindow tooltip var infoWindow_tooltip = new InfoBox (helper. Map. Config. TooltipOptions); . / / in the surveillance using Google maps. The event. The addListener (marker_country, 'mouseover, function (e) { _infoWindow_tooltip.setContent('<p>' + marker_country.country + '</p>'); _infoWindow_tooltip.open(_map, marker_country); }); google.maps.event.addListener(marker_country, 'mouseout', function () { _infoWindow_tooltip.close(); });

toggle switch

Slide button to show/hide second Marker

show

hide

Using AngularJS implementation is very simple HTML button

<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked ng-init="survey_show =  true" ng-click=" survey_show = ! survey_show; pick_survey(survey_show) " >

angular methods

// init drives inst_markers (); // init drives inst_markers (); init drives inst_markers () = helper.map.create_country_oa_maker (s.map.infowindow, infoWindow_tooltip); false, inistutes_data ); // Click on the toggle button and use survey_show to draw or not draw inst_markers s.pick_survey = function (survey_show) {if (survey_show) {inst_markers = helper.map.create_country_OA_maker( s.map, infoWindow, infoWindow_tooltip, false, inistutes_data ); } else{ helper.map.destroyMarker( inst_markers.institute_markers ); inst_markers = helper.map.create_country_OA_maker( s.map, infoWindow, infoWindow_tooltip, false, false ); }; }

Custom Map Style

Refer to the following the receipt of a few http://segmentfault.com/q/1010000000450074

Js implement gist address: https://gist.github.com/jy00295005/11077920

Development on a person, no artists no design, interface soil can not be